Stylesheets - Two Column layout has extra space in IE

Author

Two Column layout has extra space in IE

Rich.Hephner@gmail.com

2007-04-13, 6:16 pm

Hi,

I'm new to this group, but in need of some help with a css based two
column layout.

The layout consists of a short left nav and a content section. The
problem is that in IE, the content is shifted approx. 2 pixels to the
right where the left nav floats next to it. This shouldn't be and
isn't in FF.

Here's the css:

body{
margin-top:2px;
}

#container {
width: 100%;
margin: 0px auto;
min-width:830px;
}

#pagebody{
clear:both;
margin:0;
padding:0;
background:url(../images/bg_gray.gif) repeat-y;
}

#leftnav {
float: left;
width: 152px;
margin: 0;
padding: 0;
margin-top:3px;
}

#content {
margin:0px;
margin: 3px 0px 0px 155px;
padding: 0;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
}

and the html (simplified for posting):

<div id="container">
<div id="header">Defined in a different style sheet</div>
<div id="pagebody">
<div id="leftnav">This is a left nav</div>
<div id="content">Here is my content.</div>
</div>
<div id="footer">This is a footer.</div>
</div>

Any help would be appreciated. Thanks.

Rich.Hephner@gmail.com

2007-04-13, 6:16 pm

On Apr 13, 11:34 am, Rich.Heph...@XXXXXXXXXX wrote:
> Hi,
>
> I'm new to this group, but in need of some help with a css based two
> column layout.
>
> The layout consists of a short left nav and a content section. The
> problem is that in IE, the content is shifted approx. 2 pixels to the
> right where the left nav floats next to it. This shouldn't be and
> isn't in FF.
>
> Here's the css:
>
> body{
> margin-top:2px;
>
> }
>
> #container {
> width: 100%;
> margin: 0px auto;
> min-width:830px;
>
> }
>
> #pagebody{
> clear:both;
> margin:0;
> padding:0;
> background:url(../images/bg_gray.gif) repeat-y;
>
> }
>
> #leftnav {
> float: left;
> width: 152px;
> margin: 0;
> padding: 0;
> margin-top:3px;
>
> }
>
> #content {
> margin:0px;
> margin: 3px 0px 0px 155px;
> padding: 0;
>
> }
>
> #footer {
> clear: both;
> margin: 0;
> padding: .5em;
>
> }
>
> and the html (simplified for posting):
>
> <div id="container">
> <div id="header">Defined in a different style sheet</div>
> <div id="pagebody">
> <div id="leftnav">This is a left nav</div>
> <div id="content">Here is my content.</div>
> </div>
> <div id="footer">This is a footer.</div>
> </div>
>
> Any help would be appreciated. Thanks.

Here's an even better example:

http://www.cvillehephners.com/gmaps/twocoltest.html

Rob Kerr

2007-04-13, 6:16 pm

Rich.Hephner@XXXXXXXXXX wrote in
news:1176480857.638402.100150@y80g2000hsf.googlegroups.com:

>
> Here's an even better example:
>
> http://www.cvillehephners.com/gmaps/twocoltest.html

Try adding these rules to your CSS:

#pagebody { position: relative; }

#leftnav { position: absolute; left: 0; top: 0; }
#content { position: relative; right: 0; top: 0; }

This will work if you can guarantee that #content will always be
taller than #leftnav -- basically the taller of the two positioned
elements is relative, to make the containing div the same height.

Rob Kerr
--
"It's impossible for an Englishman to open his mouth without making
some other Englishman despise him."
-- G.B.S., "Pygmalion"

dorayme

2007-04-13, 10:18 pm

In article
<1176478492.198487.83480@w1g2000hsg.googlegroups.com>,
Rich.Hephner@XXXXXXXXXX wrote:

> Hi,
>
> I'm new to this group, but in need of some help with a css based two
> column layout.
>
> The layout consists of a short left nav and a content section. The
> problem is that in IE, the content is shifted approx. 2 pixels to the
> right where the left nav floats next to it. This shouldn't be and
> isn't in FF.
>
> Here's the css:
>
> body{
> margin-top:2px;
> }
>

IE is known to add 3px under some circumstances to the content
next to a float. If you do not design so tightly where 3px counts
a lot, you won't have a problem. This is advsable. But if you
must account for such pixels then you can "talk" to IE Win alone
and give 3 less pixels to the content left margin just for IE
Win. You will need to read up on this and have a go.

<http://www.positioniseverything.net...hreepxtest.html>

I think this may be what you are running up against. If not, then
it should still be of interest to you.

There is another thing you do not mention, perhaps it s not
showing up except in Safari? Your content is not aligned with the
floated text. It seems you can fix this by giving #pagebody a
border, 1px in the same colour as the background (so as not to
show). I am not quite sure why this is. If you want any demo of
it, please ask.

--
dorayme