May 12th/ Top reasons your CSS columns are messed up
I believe the recent surge in popularity of CSS frameworks comes from a lack of basic understanding of the CSS box model and how it’s implemented across browsers. I wanted to share with you some quick tips on how to avoid easy pitfalls so you can create your own CSS framework in no time flat, without all the cruft of having ten thousand column combinations available. Keeping these quick tips in mind at all times will allow you to do something I like to call defensive coding — and really that’s all CSS frameworks are: defensively coded snippets of CSS.
Your margins are doubled in IE6
Here’s a super common pitfall: IE6 will double margins facing the direction of the float. Example problematic code:
.sidebar{
float:left;
margin-left:20px;
}
This sidebar will have a 40px left margin in IE6 — almost certainly throwing the sidebar down below the content, and not next to the content as it should be. Easy fix: add display:inline; No side effects in any browser, and IE6 obeys margins perfectly.
.sidebar{
float:left;
margin-left:20px;
display:inline
}
Why it works: By declaring float on an element, you implicitly demand that it must be rendered as a block element — thus rendering the display:inline inert. However, due to IE6’s awesome CSS engine, it fixes a bizarre bug that is the #2 reason I see CSS columns fail in IE6.
Your content is wider than your column
Let’s pretend you’ve got this simplistic setup of code:
.columns{
width:500px;
}
.columns .main{
float:left;
width:400px;
}
.columns .sidebar{
float:right;
width:100px;
}
HTML:
<html>
...
<div class="columns">
<div class="main">
<img src="/images/awesome.gif" />
</div><!-- /.main -->
<div class="sidebar">
<p>Sidebar rules!</p>
</div><!-- /.sidbear -->
</div><!-- /.columns -->
...
</html>
Harmless right? You might view this in Firefox and everything will be fine. But then you look at it in IE6 and your sidebar has mysteriously dissapeared below .main. WTF? You look at the HTML, the CSS, and everything’s fine. What could possibly be wrong? A common problem here is if awesome.gif is 510px wide. What this does is push out .main to 510px, and suddenly there’s not enough room for .sidebar inside .columns any longer. Ack!
Easy fix: add overflow:hidden to your columns. This forces the width restriction to crop any extruding content. New magical CSS:
.columns{
width:500px;
}
.columns .main{
float:left;
width:400px;
overflow:hidden;
}
.columns .sidebar{
float:right
width:100px;
overflow:hidden;
}
Your margins extend past your container
So you’re building out a simple product listing template out, and you throw it in an unordered list:
ul.listing{
margin:0;
width:400px;
}
ul.listing li{
list-style-type:none;
float:left;
margin:0 20px 0 0;
width:85px;
}
HTML:
<html>
...
<ul class="listing">
<li>Product #1</li>
<li>Product #2</li>
<li>Product #3</li>
<li>Product #4</li>
</ul>
...
</html>
This CSS will work just fine in something like Firefox, but for mysterious reasons you’ll see that Product #4 appears on it’s own line in IE6. What’s happening here? I mean 4 columns x 85px + 3 gaps x 20px = 400px, right? Except that your 4th gap is hanging over the right edge — pushing the true width of the blocks to 420px. Firefox is smart and lets that margin just hang out there — but IE6 will apply that margin within the parent wrapper — throwing the 4th item down since it takes up 20px more than it should have.
The fix? Apply a left margin to each item, with a negative margin to the wrapper. This means that every item has a visible margin, but the whole block of elements are yanked back by the negative margin:
ul.listing{
margin:0 0 0 -20px;
width:420px;
}
ul.listing li{
list-style-type:none;
float:left;
margin:0 0 0 20px;
width:85px;
}
This gets around the nasty solution of adding a class to the first or last item in every row — something I’ve seen with abundance around the web.
Building a CSS framework in no time
Wev’e got to start out with some basic HTML. Here’s what I’ve been using lately:
<html>
...
<div class="columns col2">
<div class="column first">
...
</div><!-- /.first -->
<div class="column last">
...
</div><!-- /.last -->
</div><!-- /.columns -->
...
</html>
For different column widths, I’ve been changing out the col2 declaration to things like col2A, col2B, col2C and so on. You could easily give them more semantic names like products-columns too.
Self clearing is the future
The first step for any column framework is self-clearing. It’s easy, practical, and reduces all those damn clearing divs.
.columns:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .columns {height: 1%;}
.columns{ display:inline-block; }
.columns{ display:block; }
Float those columns
Next step is to actually float those columns. So let’s add a couple more declarations:
.columns .column{
float:left;
overflow:hidden;
display:inline;
}
.columns .last{ float:right; }
.col2 .first{ width:500px; }
.col2 .last{ width:100px; }
.col2A .first{ width:400px; }
.col2B .last{ width:200px; }
.col3 .first{ width:100px; }
.col3 .second{ width:280px; margin-left:20px; }
.col3 .last{ width:200px; }
Done… uh, what?
Oh, yeah. That’s it. That’s all it takes to create reliable columns in CSS. Really.
Here’s an example page to prove it!
70 Comments
Make a Comment
don’t be afraid, it’s just text
Warpspire is the place that web professional Kyle Neath writes about the web. More →
A word from the sponsors. Advertise with Warpspire
Hot Topics
-
2006 / Spotting a fake: “New apple design”
104 comments
-
2005 / Introducing Hemingway
92 comments
-
2006 / (Re)introducing Hemingway
73 comments
-
April 16th / 5 reasons I won’t be getting on the open id train
71 comments
-
2007 / Wordpress community, we gotta talk
70 comments
Feeds / Syndication
Choose your preferred method of syndication. All feeds are full-posts & ad-free. All feeds are protected under copyright and may not be redistributed without permission.
The Network
All my little projects that I leave scattered around the web. Some for profit, all for fun.
May 12th | #
Nice article. Can’t say that I’ve really had problems making my columns work, but now I know why they work. . . Heh. ;)
May 12th | #
What about using
overflow: autorather than the :after filter hack?May 12th | #
Great info; thanks.
May 13th | #
Nice work mate. I particularly like the negative margin on ul trick, you clever clog :P
I’ve seen the first example a number of times, didn’t know that disaply:inline one, nice :). Personally though, in that two-column case, I would just float the right column to the right, makes sense. But your point is good for 3+ columns.
May 13th | #
Nice write up. I’m sure we’ve all scratched our head at one point or another when doing columns, and this will serve as good reference if it happens again. Thanks!
May 13th | #
Thanks very much. The first problem is one I am currently struggling with.
May 13th | #
good stuff indeed. thanks
May 13th | #
[...] you some quick tips on how to avoid easy pitfalls so you can create your own CSS framework.”read more | digg [...]
May 14th | #
Thank so much for writing this. It’s incredibly helpful to have all of these top tips in one place ; )
May 14th | #
Very useful article, thanks a lot, I will link it :)
May 14th | #
[...] “Top reasons your CSS columns are messed up” címmel írt egy érdekes cikket Kyle Neath. Honlaptervez?ket sok órányi [...]
May 14th | #
this is a major life saver!
May 15th | #
Nice article. I always had to find workarounds instead of using Margin’s. margin’s are so much easier then wrapping 2-3 extra divs together and adjusting padding’s ect. so, THANK YOU :)
May 15th | #
WOW. I’ve fought these problems many times and usually had to find some really complex, overly long ways to fix them. this will help A LOT! Thanks
May 15th | #
The ‘old & busted’ vs. ‘new hotness’ bit cracked me up.
May 15th | #
Is your solution for clearing floats superior in your opinion to the following:
http://www.positioniseverything.net/easyclearing.html
May 15th | #
Josh: it’s the same one, minus the hack for IE5 (I could really care less about IE5)
May 15th | #
Yep, very cool article. I completely agree with most, and have faced some mahself. The world should lynch IE, we should sit there and watch as it is slowly transferred to another worldly dimension.
-Yep
May 16th | #
[...] Top reasons your CSS columns are messed up - Warpspire [...]
May 16th | #
[...] Top reasons your CSS columns are messed up Related StuffHow To: Resizeable Background Image8 fonts you probably don’t use in css, but should47+ Excellent Ajax CSS FormsHow to create a Dock MenuBush CSSLearning CSS For BeginnersFive Free CSS Sliding Door Tab Menus | Blog.SpoonGraphics23 Resources for Clean and Compressed CSSHomer Simpson CSS Level the Playing Field with Reset Style Sheets [...]
May 16th | #
Fixed-width (and pixel-dimensioned) columns are NOT reliable. When the content is wider than expected, overflows occur and the page becomes unreadable. And on the web, you DON’T KNOW the content width; you don’t know the visitor font settings, you don’t known what will be edited in the columns, you don’t known in what (verbose) languages it will be translated.
The top reason why CSS columns are messed up is because CSS is WORSE than tables to create reliable columns.
The second top reason is “how to shoot youself nicely in the foot” tutorial like this one.
May 16th | #
Amazing advice. Now I know why the sidebar kept falling down for some readers but I never saw it.
May 16th | #
Came one day too late; I already went back to tables.
And man, I’m so glad.
May 16th | #
Wow thanks captain obvious.
May 16th | #
This is great. I’ve probably read about some of these problems, and either forgotten or just didn’t have a ‘cure’. One quibble: I actually LIKE the ‘clearing div’. It makes the layout’s transition from multiple columns back to a single column (or another row of columns) more obvious and easier to pick out.
I think the one I was surprised I DIDN’T know was the doubling of a margin in the direction of float. So many ‘box model’ discussions don’t mention that.
May 16th | #
I always had bad experience with float and divs, but tables fixed my problem. any way thanks next time i will try this trick
May 16th | #
You have reminded me how much I hate IE
May 16th | #
[...] Top reasons your CSS columns are messed up (tags: css webdesign layout) [...]
May 16th | #
Very nicely presented article. Thank you.
One other advantage to using “overflow: hidden;” on your columns is that it establishes a “new block formatting context.” In English, this means that floats inside the column are contained inside that column by obedient browsers. The width gives IE “hasLayout” that accomplishes the same thing for that miscreant. No extra float clearing code required.
Bonus!
May 16th | #
All I keep thinking of is how much I want to burn IE at the stake.. but damn if we aren’t stuck working with it for a long time coming.
May 16th | #
[...] Top reasons your CSS columns are messed up - Warpspire Interesting. (tags: css layout ie tutorial) [...]
May 17th | #
[...] Links Twitter / anamariecox: Gibson to Obama, re electin…Top reasons your CSS columns are messed up - WarpspireMetro Spirit: Archives - Black and white and red all overMy Way News - California’s top court [...]
May 17th | #
This clears up a lot of questions I had. Thanks for the great but simple article
May 17th | #
Perfect timing. I was just struggling with the fact the IE6 was clearing a floated block for some reason. I ended up using a percentage width workaround, but I’m certainly going to test the display:inline bit as it is much simpler. Thanks for the resource. Definitely going to store this page for future reference.
May 17th | #
[...] Top reasons your CSS columns are messed up - Warpspire (tags: css layout ie) [...]
May 18th | #
[...] Top reasons your CSS columns are messed up - Warpspire (tags: css howto troubleshooting web design development) [...]
May 18th | #
i hate css. what a waste of precious time. ill just use tables until there no longer supported.
May 18th | #
[...] Top reasons your CSS columns are messed up Explain very clearly why your CSS columns drop in IE, must read! [...]
May 19th | #
Thanks! I never knew the solution to my problem could be quite simple. This is really helpful.
May 19th | #
[...] your CSS columns look messed up in IE 6? Here are some excellent tips by Kyle Neath on fixing [...]
May 19th | #
[...] Top reasons your CSS columns are messed up - Warpspire Some good CSS here for beginners and experts. The negative margin on UL technique is eloquent. Good explanation of float problems in IE6 too (DIE IE6!) (tags: browser code css) [...]
May 19th | #
hi mate, nice post! I’m glad somebody finally put on writing the ECWNM (even columns with negative margins) way ;-)
May 20 | #
Thanks very much.
May 20 | #
I am probably missing something here but I am using FF 2.0.0.14. I have taken the code snippets from the “products Listing” example and viewed them in my browser. I am not seeing FF playing nice with the math as you suggest it will. (is this due to my FF version?) I made a minor adjustment with color so I could see the elements.
In addition when I try the IE6 fix I am not getting the results described.
I will send you my email through your contact form. If you are able to take some time from your schedule I can send you some screen shots and a few files. I appreciate your time to look this over. It may be a case of my oversight but I am hoping it will help other users.
May 21st | #
Just a thought.
On the “Your margins extend past your container” another way to solve this problem would be to still apply the left margins to the list items only instead of the negative margins the unordered list, you could add this
ul.listing li:first-child { margin-left: 0; }
This is applied to the first list item only and would negate having to use the negative margins.
Thanks for the great article, wonderful stuff.
May 21st | #
Tyler: That would of course be the optimum solution, if it worked in all browsers. Unfortunately, until we can stop supporting IE6, we can’t rely on using the first-child pseudo selector.
May 22nd | #
Kyle,
I was hoping you had some time to consider my comment. I have tried the exact code example you posted for the products listing to get around the IE6 limitations with rendering the box model properly but it is still dropping the last product below the first three.
Can you confirm this? And offer a solution. I was excited to hear about your solution but I am unable to get the same results you spoke about in IE6. Usually I have to write that special class for the last product?
Any thoughts…
May 22nd | #
A great refresher on the work arounds for CSS issues. Great post, I’ll use it a reference in the future!
May 23rd | #
I tried the examples and wanted to see if they worked with more columns than 3, and apparently ti doens’t.
Do you have any idea why? .. I set up a test-page here, where it’s failing in IE6 (FF and Safari renders it fine).
http://kompjuter.dk/columns.html
May 25th | #
display: inline was a new one for me, thanks!
May 26th | #
Many people new to CSS will struggle with this forever. This is a great tutorial on understanding how CSS works with divs
May 27th | #
[...] of broken css layouts and bloated css frameworks? Check out the Top reasons your CSS columns are messed up?????? article on warpspire.com. It’s a great overview of some of the common cross-browser [...]
May 27th | #
Excellent article, well done
May 30th | #
Thank you very much!
I spent the best part of last night trying to make my site look work in IE6 and then I found this article and it was the ‘Your content is wider than your column’ problem I was having.
I threw in the ‘overflow:hidden’ property on my columns and hey presto everything now works in IE6!
June 9th | #
[...] CSS Column Fixes [...]
June 12th | #
Thanks for these great tips! It certainly helped me fix up my webpage. Never knew messing around with the css could mess it up quite like that! Helps if you know what you are doing :)
June 15th | #
[...] Top reasons your CSS columns are messed up- An easy-to understand article on how to fix common CSS Column issues with helpful diagrams and [...]
June 16th | #
Excellent article! thank you very much
June 18th | #
[...] of broken css layouts and bloated css frameworks? Check out the Top reasons your CSS columns are messed up article on warpspire.com. It’s a great overview of some of the common cross-browser [...]
June 22nd | #
Great article man. Nice work taking the time to create all those diagrams as well. I didn’t actually realize that anyone coded css using a framework…
June 24th | #
[...] Top reasons your CSS columns are messed up - Warpspire While all of these could be generalized as “IE 6 is a pain in the ass,” this is a must-read for CSS layout and positioning debugging. (tags: css layout webdev howto grid ie6) [...]
July 3rd | #
nice, i bookmark this and refer next time i get problem!
July 3rd | #
In example two (with image) it is better to give in special stylesheet overflow-x for IE6, because let’s say that we simulate min-height for the box for IE6 with sth. like this:
ff: opere safari even IE7:
.columns .main{
float:left;
width:400px;
min-height: 500px;
}
IE6:
* html .columns .main{
float:left;
width:400px;
overflow-x: hidden;
height: 500px;
}
July 3rd | #
[...] questo articolo vengono indicate le principali cause degli errori di layout quando si usano i CSS per strutturare il contenuti in [...]
July 4th | #
[...] A great article on why your CSS layouts may be going haywire can be found on Kyle Neath’s website Warspire. [...]
July 10th | #
Great article. I was banging my head against the wall trying to figure out why my li’s were getting pushed to the right slighted in IE. I just needed to add the float: left; property to my #sidebar li{}
Thanks !
July 15th | #
Thank you for bringing me back from the brink of insanity!! Have been having a huge problem with a double sidebar in IE6 - perfect in every other browser of course - but I fixed it with your advice. I used overflow: hidden and it saved the day.
Sincere thanks!!
July 17th | #
Thanks for the information. The graphics were a big help to a CSS beginner. Consider yourself Dugg.
July 22nd | #
Great article, and I’m probably still in the habit of using IE5 CSS. I gotta stop wasting time on that.
You’ve articulated everything very nicely to explain how and why. Thanks!
July 25th | #
Would be nice to see a php and css version. But overall fairly helpful. Thanks for sharing.