CSS Forum

**Spinland** · 12-09-2009, 11:07 AM

I'm aware Firefox is probably the one getting it right, but in making a very basic web page layout (two columns, fixed width) for some reason which ever panel I float gets shifted down 20 pixels (and the text inside that panel gets shifted down one line from the top edge of the panel) when I display it in Firefox 3.5.4, whereas it looks correct in IE7.0. In the example here it's the right panel floated right, but if I swap the panels in the HTML and then float the sidebar left instead the same shifting (both panel and text) occurs. I'm stumped.

Here is the code:

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <link type="text/css" rel="stylesheet" href="sample.css" />
        <title>Format Work Sample</title>
    </head>
    
    <body>
    
        <div id="page_area">
        
            <div id="header">
                <p>This is the header.</p>
            </div>
  
            <div id="main_area">
    
                <div id="content">
                    <p>This is the content.</p>
                </div>        
    
                <div id="sidebar">
                    <p>This is the sidebar.</p>
                </div>
    
            </div>
    
            <div id="footer">
                <p>This is the footer.</p>
            </div>
    
        </div>
        
    </body>
</html>

CSS:

Code:

body {
    background-color: #A32929;
    font-family: 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
    font-size : small;
}
    
#page_area {
    width: 955px;
    padding-top: 5px;
    padding-bottom: 5px; 
    margin-left: auto;
    margin-right: auto;
}

#header {
    background-color: #79B9B9;
    width: 915px;
    height: 100px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#main_area {
    width: 955px;
}

#content {
    background-color: #E0EBEB;
    width: 695px;
    height: 520px;
    text-align: center;
    margin-top: 20px;
    margin-right: 20px;
    float: right;
}

#sidebar {
    background-color: #F7E1AB;
    width: 200px;
    height: 520px;
    text-align: center;
    margin-top: 20px;
    margin-left: 20px;
}

#footer {
    background-color: #79B9B9;
    width: 915px;
    height: 50px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    text-align: center;
}

Any insights would be wonderful!
Thanks in advance!

**rolda hayes** · 11:27 AM

Im a bit confused in your question... but if your trying to align the side bar with the content div then:

Code:

#sidebar {
	background-color: #F7E1AB;
	width: 200px;
	height: 520px;
	text-align: center;
	margin-top: 20px;
	margin-left: 20px;
	float: left;
}

**Spinland** · 08:12 AM

Thanks, but that's not the issue; floating the left sidebar panel just makes it worse: then both floats are messed up.

The issue seems to be using a floating DIV block of fixed height. Somehow there's an overflow problem and IE ignores it while FF shows the overflow. I've gone over the dimensions of the code and I can't see anything that's going past the boundaries I've defined.

Attached are the screenshots of what happens when you display the code I supplied above in each browser. The IE version displays exactly as I'd expect from the code, but the FF version is displaying mystery overflows, both in the position of the DIV block itself, and even in the inner text.

Where are these overflows coming from and, please, how do I get rid of them?

Thanks!

ON EDIT: Had to delete the attachments so I could post another screen shot below and meet quota. Sorry.

**Spinland** · 12-09-2009, 07:09 PM

Oh, for what it's worth this is also true in Firefox 3.5.5 so it's not a version issue.

I've done more searching around and reading (thank you LadynRed and I apologize for taking so long to find your posts but there is a HUGE amount of info here and I'm so green even knowing what search terms I needed was a challenge) and setting the div containing the floating div to float as well solved the offset block problem. The text is still shifted inside the block for some reason, and whichever block I float that is the one that shifts, but I just added a special CSS case for a top <p> margin of -1px in that block and it works. Maybe a hack but at this point I'll take it.

Thanks for this great resource.

**rolda hayes** · 12-10-2009, 04:29 AM

BY floating them both, Im seeing this in FF and IE...

**Spinland** · 12-10-2009, 06:38 AM

Yeah, that's the problem. The two columns are pushed down into the footer (there's supposed to be a gap) and the text in each is pushed down a row (each is supposed to butt right up against the top edge). Floating the "main" div as well brings the two columns back up to where they're supposed to be but, if they float, the text is still pushed down. My hack is to add the -1px top margin for the paragraph in each floater and it all lines up again.

**rolda hayes** · 12-10-2009, 06:45 AM

Ok, just so I know that I'm not going mad...!

Can you post an image of how the correct layout looks with your "hack" please.

**Spinland** · 12-10-2009, 08:11 AM

Sure (had to delete the old ones to meet quota, alas). Here's the result, the only changes I made to the code I posted was adding a "float: right" to the "main" div, and adding a "#content p" rule with a -1px top margin. I was worried the negative top margin would cause the IE version to bleed above the content block (since the text displays correctly in IE without it), but it happily kept the text inside the block and ignored the margin. I'm sure it's a bug but in this case a fortuitous one.

**rolda hayes** · 10:15 AM

Ahh... I see...!

the text is a line down because you are using the <P> tag (paragraph)

http://www.w3schools.com/tags/tag_P.asp

remove the <p> </p> on the headings.
remove the margin-top on the footer, and add margin-bottom to the side and main Div.

That should do the trick. (Hopefully!)

**Spinland** · 12-10-2009, 10:19 AM

The odd thing was it's not happening in IE, so that led me down the path of what's different--in other words, what failure of IE's is making something normal not show up.

I got the answer, finally, and it's smack-my-forehead simple. Firefox has a default paragraph spacing for block elements. That's all there is to it. The fix is also dead simple. I put this at the top of my CSS sheet, before the body rule:

* {margin: 0px}

Done. Now I can enclose my parapraphs in p tags to enforce proper structure and only have margins inserted when I specifically insert them, and my div blocks all sit where they're supposed to.

Learn something new every day.

**rolda hayes** · 12-10-2009, 10:23 AM

Quote:

Originally Posted by Spinland

Now I can enclose my parapraphs in p tags

Doh! I didn't realise you wanted to use the p's like that!

Glad you got it sorted, always code for FF then fix anything for IE with a conditional comment. Makes life a lot easier.

**Spinland** · 12-10-2009, 10:57 AM

Sorry I wasn't more clear. I wanted to use this as a template for an actual 2-column page once I got the kinks ironed out.

Thanks for all the help!

**LadynRed** · 12-10-2009, 03:01 PM

Quote:

Firefox has a default paragraph spacing for block elements

ALL elements have a default margin and padding, in ALL browsers. That's why it's always a good practice to do what's called a css-reset - set the margins and padding to ZERO for all the elements you're using.

**Spinland** · 12-10-2009, 04:19 PM

Today has been a supreme learning experience, and the lessons shall not be forgotten.

Thanks again!