3-column layout - columns vertically not aligning

top margins uneven

[gldweb]

I am working on a page that uses a 3-column layout. I have everything aligned fine horizantially but vertically the top of the columns are not aligning FF, Netscape, Opera. They only align when viewed in IE. It's the right most column (column 3) that is displayed higher than the other 2 columns.

Also, the space above the columns is different when viewed in IE vs the other browsers. Here is the pertinent CSS:

#page_container {
position: relative;
top: -75px;
margin: 0;
padding: 0;
display: inline-block;
}
#1st_column {
width: 150px;
padding: 0;
margin: 0;
float: left;
display:inline;
}
#2nd_column {
width: 400px;
padding: 0;
margin: 0 1em 0 2em;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
display:inline;
}
#3rd_column {
width: 150px;
padding: 0;
float: left;
border: 1px solid #b7691d;
margin: 0 1em 0 1em;
display:inline;
}

Here is the HTML:

<div id="page_container">
<div id="map"><img src="images/map.jpg" width="145" height="175" alt="" /></div>
<div id="maincontent"><p>blah blah blah</p>
</div>
<div id="news_container">
<h4>News</h4>
<p>More blah blah blah</p>
</div>

<div id="text_nav"><a href="index.htm">Home</a> </div>
</div>
</div>

Any suggesstions would be appreciated.

Thanks

[D_Blackwell]

Eric Meyer on CSS [ericmeyeroncss.com]

...so if you have an id called 1st, you'll need to rename it.

The first issue is the naming of the ids. Firefox won't render the columns horizontally. Opera does, but there is a whole other rendering issue there. I think that you'll first need to address design platform. What you are seeing in IE is very different that what I am seeing in Firefox, and different again from what I am seeing in Opera.

[D_Blackwell]

I don't know why I couldn't find this the first time round.

CSS2, chapter 4.1.3

In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit.

W3C [w3.org]

[gldweb]

In my actual code the IDs are not named 1st_column, 2nd_column, etc. I edited them for posting in the forum. But re-looking at my post I see that I left them unchanged in the HTML.

So 1st_column is actually 'map', 2nd_column is 'maincontent; and 3rd_column is 'news_container'.

When you state "Firefox won't render the columns horizontally." - I am not sure what you mean. I got Firefix, IE, and Opera to render the 3-column layout correctly. What is not lining up is the top of each of the columns. Column 1 (id=map) lines up with the top of column 2 (id=maincontent). But the top of column 3 (id=news_container) is higher than the other two. At least that is how FF & Opera render it. IE has the top of all 3 columns lined up.

Also IE has the 3 columns lined up higher up on the page than FF and Opera.

Thanks

[tedster]

How abbout the content in each of these divs - I notice that the content you have in news_container begins with an H4 element. Have you styled H4 explicitly, or let it default? I'm thinking the apparent lack of lining up may be due to elements within the divs, and the divs themselves are actually aligned.

[gldweb]

Yes, I have styled the H4 in the CSS. Here it is:

#news_container h4 {
margin: 0;
padding: 0 0 0 .5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color: #517295;
border: 1px solid #b7691d;
}

But your suggestion triggered a thought. Since it is the news_container container that is not lining up, I removed all the contents from within the container and replaced it with an "&nbsp". The container still lines up higher on the page then the other two columns - again in FF and Opera. In IE, it lines up even with the other columns.

Would appreciate any other thoughts or suggestions anyone might have.

Thanks

[gldweb]

Okay, I re-read tedster's reply again and realized it read "How abbout the content in <FONT
style="BACKGROUND-COLOR: yellow">each</FONT> of these divs."

So I removed the content from each of the containers, placed them with &nbsp; and added borders so I can see where they line up. The columns are now lining up at the top.

Now I need to figure out which of the contents is throwing the alignmwnt off.

Thanks

[gldweb]

After some fiddling around it turned out the <p> tags in the main_content container (middle container) were the cause of the top mis-alignment. After I removed the top margin from the <p> tags with the container everything lined up correctly.

Thanks for getting me on the right track!

[SuzyUK]

added borders so I can see where they line up. The columns are now lining up at the top.

adding borders and the fact that you removed the top margins off the <p> element strongly suggests that collapsing margins were in play here..

adding top borders is one of the best "cures" for the x-browser difference in the handling of these.

You might want to read more about collapsing margins [w3.org] or search this Forum [google.com] for related posts

Suzy

[gldweb]

SuzyUK - thanks for the insight on collapsing margins. After reading the article, I determined that collapsing margins was not the issue I had, at least the way I interpreted the article. When I added the borders around the 3 containers, they still where not aligned correctly at the top. Only after I removed the contents and replaced them with &nbsp did they line up.

Maybe I misunderstood something in the article, but I thought if I added a border - or 1px padding - that should have cleared the issue if it was due to the collapsing margins. That is why I do not believe collapsing margins was my issue. Please correct me if I am wrong.

Thanks again for the insight to this issue. I will defintely keep in mind for next time.

[SuzyUK]

gldweb..

I'm sure you didn't misunderstand anything in the article, and as for correcting you I wouldn't presume to know better.. I'm only working of the code you have above.

Collapsing margins exhibit symptoms differently, most often it is visual as a gap in FF/Moz . In IE however it is that there will not be a margin where there should be one (which I believe is what happened here which made the columns "line up")

Take this code based entirely on yours above:

CSS:
#page-container {
position: relative;
top: 0;
margin: 0;
padding: 0;
display: inline-block; /* using you code I presume to trigger haslayout (layout should always be given to a relatively positioned element) */
background: #cfc;
}
#page-container {display: block;} /* to put back to normal */

#left {
width: 150px;
padding: 0;
margin: 0;
float: left;
display:inline;
background: #ff0;
}
#middle {
width: 400px;
padding: 0;
margin: 0 1em 0 2em;
float: left;
display:inline;
background: #dad;
}
#right{
width: 150px;
padding: 0;
float: left;
border: 1px solid #f00;
margin: 0 1em;
display:inline;
background: #ffc;
}

#footer {clear: both; width: 100%; background: #ddd;}

/* div {border: 1px solid #000;} *//* uncomment this to see IE Flunk */
/* h4, p {margin: 1em 0;} */ /*uncomment this to see IE handle margins correctly */

HTML
<div id="page-container">
<div id="left">an image or something with no default margin involved</div>
<div id="middle"><p>content with a default margin involved</p></div>
<div id="right">
<h4>Heading - default Margins</h4>
<p>another paragraph with default margins</p>
</div>
<div id="footer"><a href="#">Inline footer</a> </div>
</div>

All columns have been coloured to show that in fact the columns do line up it is the the "top of the text" in each column which doesn't

The left column had no default margin involved and starts right at the top of the page.. just like an image would, the middle column has a paragraph in it. A <p> should involve default top and bottom margins, as should the <h4> in the right column although the <h4> has larger default margins so produces a bigger "gap".

In IE as it stands ALL these elements text lines up across the top of the page (So does Opera, but it mimics IE when it can...) I believe, but CMIIW, this to be incorrect behaviour: reference [w3.org] ::

Vertical margins between a floated box and any other box do not collapse

All of these columns are floated so according to the above statement any margins involved should not collapse. That is what IE (and Opera) are doing..

Now look in FF you will see that the columns (as per coloured backgrounds) ARE lining up it just that the margins are now contained, not collapsing.

The traditional cure for cancelling collapsing margins, that of putting a border (or padding) around the containers does work, uncomment the rule that puts a border on all divs.. Now FF looks the same as it did before which is OK, but now Opera also get's it butt kicked into working the same too :o But IE is still not honouring those default margins..

So last but not least let's assume IE is dumb and make things simple for it, let's explicitly tell it what margins we want it to have instead of expecting it to work with defaults. First comment out that border rule again, just for fun, then uncomment the rule that gives the <p> and <h4> explicit top/bottom margins

Well what do ya know it works perfectly across all 3 PC browsers.. now in IE, Opera and FF, ALL margins are contained without a border! as they should (according to the recommendations) because of the floats that contain the elements.

Moral of the story... I don't think for one minute that you read the specs wrong :)
everyone thinks FF have got collapsing margins wrong but I'm not so sure.. We would automatically expect IE to get things wrong these days, but when Opera copies their behaviour to this extent it makes things even more confusing

As a rule of thumb I always cancel default margins at the start of stylesheets * {margin: 0;}, yes it may then mean I've to put back spacing onto elements I would never have to bother about e.g. form, ul, but it puts me in control of my spacing and the alternative is.. well not worth it!

In saying all that for the purposes of ensuring that all elements align to the top of their container as you imply then removing Top Margins across the board is probably as good as solution as any..

sorry for essay again! but hope you take this as the tongue-in-cheek pointer it was meant as and feel free to disagree with your own interpretations too!

Suzy

[gldweb]

SuzyUK - I really appreciate you taking the time to fully explain collapsing margins issue. I haven't had chance to completely look over the code you provided and play with it, but I wanted to reply back as soon as I could.

I am fairly new to this CSS thing and I am learning more each day. I always want to hear from individuals that have more experience or even different experiences than me so I really appreciate it that you took the time and effort for your thorough explanation.

Before your first post on this topic I had not heard about collapsing margins. So your reply made me do some research to read more about.

Bottom line, I took your input simply as helpful information and nothing else. I am way too much of a rookie with a CSS to take any input from anybody as anything more than that.

Thanks again for your help!