Liquid layouts and borders

Question

I am having problems with a liquid layout and borders, causing elements to overflow.

• Here is a jfiddle with the exmaple of the page with no borders (works fine): http://jsfiddle.net/eRaB5/1/
• Now here is an example of what I want to happen, but it breaks. http://jsfiddle.net/eRaB5/2/

The structure is somewhat like this:

<div id="container">
    <label>Label</label><input type="text' />
</div>

#container{width: 100%;}
label{width: 25%;}
input{width: 75;}

I need the values to add up to 100% so the left and right edges align. Only the borders on the input make the input widths effectively width: 100% +2px;

Is there any way around this problem using just CSS?

Answer 1

Negative margins

You can try by setting negative margins:

margin: -1px;

I've changed them on your jsFiddle and textboxes did jump right of label.

Answer 2

Fixed:

http://jsfiddle.net/Mutant_Tractor/eRaB5/3/

Just add

margin: -1px;

to .input-text class.