1pixel to the right

[dankellys]

i have the following CSS:


#wrapper
{
width:90%;
margin:0 auto;


}

#container
{
width:100%;
border-left:1px solid #F38F21;
border-right:1px solid #F38F21;
border-bottom:1px solid #F38F21;
float:left;
display:table;

}

#header
{
width:100%;
background-color:#F38F21;
float:left;
text-align:right;
padding-bottom:1em;

}


with the following HTML:


<div id="wrapper">

<div id="header">
Header text
</div>

<div id="container">
Text

<br />
More text

</div>
</div>


In chrome it displays fine, but in Firefox and IE i am getting a gap of about 1px to the right where the bordered container div is larger than the header div...

The container div is set to to be 100%, and is inside of the wrapper div, as is the header div. Can anyone help me, it is driving me insane!

[dankellys]

Here is a screenshot of the problem:

http://img196.imageshack.us/img196/6131/gapm.png

I thought maybe it was something to do with the content, so removed all the content and it still occurred...

[sunsh1ne]

A div's border is not counted as part of it's width, which I think is the problem you're running into. I'd suggest adding a margin of 1px to the left, right, and bottom of the container element.

[dankellys]

A div's border is not counted as part of it's width, which I think is the problem you're running into. I'd suggest adding a margin of 1px to the left, right, and bottom of the container element.


Thanks for the advice, but unfortunately that did not fix it.

[Gozzy82]

like sunsh1ne mentioned border is not included in width:

you have this in container

width:100%;
border-left:1px solid #F38F21;
border-right:1px solid #F38F21;

and this inside header: width:100%; without any border!!!

so actually its 2px to the right.

adding border to header fixes it.

(at least in my firefox: http://www.webdevout.net/test?01t&raw)

BTW kinda weird that chrome does show it correctly logically it shouldn't

grtz

[mordauk]

Gozzy is correct. The best thing you could do is get rid of width: 100%; on the container div. It will automatically fill the entire horizontal space.