2008 / 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!
217 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 →
Hot Topics This Month
-
2007 / Why I don’t use CSS Frameworks
85 comments
-
2008 / Top reasons your CSS columns are messed up
217 comments
-
2009 / Having fun with the Lighthouse API
8 comments
-
2009 / Quick & Dirty Referral Tracking
11 comments
-
2009 / Optimizing asset bundling and serving with Rails
11 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.
July 28th | #
[...] CSS Column Fixes [...]
August 12th | #
[...] Top Reasons Your CSS Columns Are Messed Up – Warpspire [...]
August 19th | #
A nicely written article, I must say.
August 20 | #
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 for sharing…………..
August 21st | #
[...] Top Reasons Your CSS Columns Are Messed Up – Warpspire [...]
August 22nd | #
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 :)
September 2nd | #
A really useful and well written guide to the various CSS problems we face! I;m forever having to alter my IE6 CSS bugs when designing sites…and this gave me a couple of quick hard fast rules to look out for. Thanks!
September 3rd | #
I used this for the last two builds I’ve done and found it to work out well. I did find a problem with IE7 and the self clearing however, so I just expanded the * hack to include IE6 and IE7.
I changed:
* html .columns {height: 1%;}
to:
.columns { *height: 1%; }
More on the * and _ hacks here… http://www.ejeliot.com/blog/63
September 11th | #
I don’t like margins and try to less use it. Better make more block-elements with additional paddings, than look to lost verticals.
Regards, Alexey
September 19th | #
[...] 18. Top reasons your CSS columns are messed up [...]
September 24th | #
Came one day too late; I already went back to tables.
September 30th | #
[...] 7. ??????? ??????? ???????????????? ??????????????? ???… [...]
October 10th | #
Nice,
Now just kick the px habit and use % and you’ll have flexible layouts!
October 11th | #
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 :)
October 11th | #
Came one day too late; I already went back to tables
October 17th | #
Thanks for sharing such good info, web designing is my everyday work and I always like to learn new tricks in css, they make our work so easy :)
October 18th | #
Awesome article man. I always had troubles likes that.
Keep up the good work.
October 20 | #
[...] WarpSpire.com – Top reasons your CSS columns are messed up [...]
November 1st | #
nice, i bookmark this and refer next time i get problem!
November 1st | #
[...] 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 [...]
November 4th | #
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!
November 4th | #
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
November 4th | #
.sidebar{
float:left;
margin-left:20px;
display:inline
}
November 4th | #
I changed:
* html .columns {height: 1%;}
to:
.columns { *height: 1%; }
November 4th | #
City Pics: I actually articulated that exact exception in the article (content wider than expected). If you believe pixel-width layouts are not reliable, then you need to reconsider your viewpoint. In short: you’re wrong.
November 10th | #
[...] Top Reasons Your CSS Columns Are Messed Up – Warpspire [...]
November 18th | #
fantastic resource. really useful. thanks.
November 22nd | #
Nice content thanks…
November 24th | #
Very nice and useful findings to rescue developers from nagging problems.
November 24th | #
OMG~u save me!! finally solved my roblem!!
for i’ve been wondering wt’s wrong with my css tag for a long time which it looks perfertly fine to me~until i read your post, my problem is fixed
thanks sooo much!!
December 10th | #
superb i like it very much,very helpfull
December 10th | #
for dynamically generated webpages. I thought of delivering content separately for human and search engine alike by using a user agent detect. When detected that the agent is a search engine (such as google bot..etc known browsers) then why not just deliver the organized content straight without the layout. Then if detected that the agent is human(using ie,ff,safari, etc..know browsers) then deliver the content using the table layout rather than get pissed with the complexity of div layouting.
just my 2 cents..
December 11th | #
[...] Warspire provides help for common issues in dealing with columns and layouts. The post covers the most likely problems and provides the necessary fix, including the code to be used. [...]
December 12th | #
[...] Top Reasons your Columns are messed up [...]
December 13th | #
[...] Warspire provides help for common issues in dealing with columns and layouts. The post covers the most likely problems and provides the necessary fix, including the code to be used. Salva e condividi questo Articolo su: Queste icone linkano i siti di social bookmarking sui quali i lettori possono condividere e trovare nuove pagine web. [...]
December 21st | #
thank you dinamikoyun oyun oyunu oyna oyunlar
December 21st | #
thank you oyun oyunlar oyunu dinamikoyun
December 23rd | #
travesti
December 23rd | #
travesti
December 23rd | #
gay
December 23rd | #
travesti
December 24th | #
Ça?da? Paslanmaz olarak paslanmaz metal ve pirinç dekorasyon i?leri ile hizmetinizdeyiz.
February 9th | #
full programlar-oyun yamalari-dizi arsivi-msn-cep-telefonu-ipod
February 11th | #
thank you
February 24th | #
Great! I have been locked into doing all my website development using tables because of all the damn problems with Internet Explorer CSS compliance. This will help me stop using nested tables for my HTML. Now, how do solve the problem of side-by-side columns remaining at even heights when filled with different amounts of contents across browers?
March 2nd | #
[...] Top reasons your CSS columns are messed up – Warpspire (tags: css) [...]
March 4th | #
[...] Top Reasons Your CSS Columns Are Messed Up [...]
March 4th | #
[...] Top reasons your CSS columns are messed up – Warpspire (tags: css webdesign design web) [...]
March 4th | #
Meh. I’ve unilaterally decided to stop supporting IE6. Sure, my site will probably work in IE6 but I got so fed up with Microsoft’s half-assed css implementation that I gave up. My site’s not for profit, it’s just a hobby. If you view it in IE 6 you get a nice polite message suggesting you download FF or Opera to see the web as intended.
I think it’s up to web developers to just stop supporting IE 6, sort of a carrot and stick approach but without the carrot :D If most developers did it, sooner or later everyone would have to move to something else.
I think, thankfully, that the news surrounding FF3 and MS’s own push towards IE7 and 8 has started people moving away from IE6.
March 8th | #
[...] Warpspire | CSS Column Tricks [...]
March 10th | #
Very helpful, Thanks for saving me a bunch of time!
Q: What’s the best way to add gutters between the cols that is cross-browser compatible? So far, padding-left has worked for me.
Any thoughts or better ideas or suggestions?
Thanks!
-Danl
March 10th | #
In regards to the above comment, I add “padding-left” to the second and third floated cols but not the first of course. I’m just curious if there’s a better, less crufty or more semantic way to do it.
And, one more question:
Does anybody know the pros or cons of floated cols as in this thread vs the “columns” CSS as suggested by the W3C. I have a feeling that there may be some cross-browser issues but am still testing it.
W3C CSS Columns
http://www.w3.org/TR/css3-multicol/#stacking
btw: This was a great tutorial, Thanks Kyle!
March 16th | #
[...] Top reasons your CSS columns are messed up [...]
March 17th | #
[...] Top reasons your CSS columns are messed up [...]
March 18th | #
[...] Top reasons your CSS columns are messed up – Warpspire [...]
March 19th | #
[...] Source [...]
March 19th | #
[...] Top reasons your CSS columns are messed up [...]
March 23rd | #
A really useful and well written guide to the various CSS problems we face! I;m forever having to alter my IE6 CSS bugs when designing sites siki?…and this gave me a couple of quick hard fast rules to look out for. Thanks!
March 23rd | #
i like that the css is best coding web site but some mistake must solution. Anyway… bYe
April 1st | #
asssssssssssssssssssssssssssssss
April 2nd | #
[...] 7- ??CSS?????????? [...]
April 3rd | #
[...] Top reasons your CSS columns are messed up [...]
April 4th | #
[...] Top reasons your CSS columns are messed up [...]
April 5th | #
[...] Top reasons your CSS columns are messed up [...]
April 5th | #
[...] Top reasons your CSS columns are messed up [...]
April 7th | #
[...] The margin applied would actually be 40px. To avoid this you can simply apply margins to the opposite side only, or use a separate stylesheet ( using IE conditional comments ) and divide the margin by two. More IE6 quirks and solutions can be viewed on this post by Kyle Neath. [...]
April 11th | #
[...] Top reasons your CSS columns are messed up [...]
April 30th | #
[...] Top reasons your CSS columns are messed up [...]
May 10th | #
Great listing of tips, I really like the explanations, now I must remember to bookmark this one..,
May 11th | #
[...] 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 [...]
May 12th | #
Top reasons your CSS columns are messed up
May 16th | #
[...] Top reasons your CSS columns are messed up [...]
May 25th | #
thank you…
May 27th | #
[...] [...]
May 29th | #
[...] Top reasons your CSS columns are messed up – Warpspire [...]
May 30th | #
[...] Top reasons your CSS columns are messed up – Warpspire [...]
June 7th | #
[...] 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 7th | #
margin applied would actually be 40px. To avoid this you can simply apply margins to the opposite side only, or use a separate stylesheet ( using IE conditional comments ) and divide the margin by two. More IE6 quirks and solutions can be viewed on this post by Kyle Neath. [...]
June 12th | #
Nice tips there, most of them I use in my CSS anyway but good to know what they do and more importantly why they need to be there (at least until IE6 goes the way of the mammoth)
June 28th | #
[...] Top reasons your CSS columns are messed up [...]
June 29th | #
Great post. I remember first discovering the float bug. Drove me bonkers!!!
I wish IE6 would curl up and die, though I’m sure CSS3 will find a way to pooch at least one major browser to ensure I have no hair left very soon.
July 1st | #
[...] 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 [...]
July 16th | #
Great post. I remember first discovering the float bug.
July 17th | #
margin applied would actually be 40px. To avoid this you can simply apply margins to the opposite side only, or use a separate stylesheet ( using IE conditional comments ) and divide the margin by two. More IE6 quirks and solutions can be viewed on this post by Kyle Neath. [...]
July 17th | #
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
July 22nd | #
[...] 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 [...]
July 22nd | #
[...] 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 [...]
July 27th | #
Thanks very much.
July 27th | #
Thank you very match
August 31st | #
I want ti say Thanks a lot. Your tips and tutorial are useful. Maybe I hate IE. but u make me cool.
Thanks again for your great job.
August 31st | #
Great article, I would have never come up with a negative margin on my own. Thank you!
September 2nd | #
i just don’t like this article.. i love it !!
wOw .. it really works & solved my dilemma.. its been a week working around just to make my .css compatible with different major browsers & i found this article accidentally.. you rOck..
September 16th | #
Great, Very clear article. Thanks for sharing. Came across those problems but why they happened i did not fully understand till i read this article
October 2nd | #
[...] Top reasons your CSS columns are messed up [...]
October 8th | #
Great, Very clear article. Thanks for sharing. Came across those problems but why they happened i did not fully understand till i read this article
October 10th | #
[...] Top reasons your CSS columns are messed up [...]
October 23rd | #
your website does not Support Chinese………
well …your article is extremely useful…
October 24th | #
[...] Top reasons your CSS columns are messed up Pourquoi vos colonnes CSS ne régissant pas comme vous le désirez (solutions) [...]
October 24th | #
[...] good. Or, you could just use templates. Continue reading » · Written on: 10-24-09 · No [...]
October 28th | #
[...] Top reasons your CSS columns are messed up – Warpspire [...]
October 28th | #
[...] Top reasons your CSS columns are messed up [...]
October 28th | #
[...] Top reasons your CSS columns are messed up [...]
October 29th | #
[...] Top reasons your CSS columns are messed up Pourquoi vos colonnes CSS ne régissant pas comme vous le désirez (solutions) [...]
November 4th | #
te?ekkürler güzel
November 8th | #
Man, wish I’d found this when I first started out! Cheers for sharing.
November 13th | #
[...] but it just doesn’t feel good. A while ago I came across a nice solution on this site: http://warpspire.com/tipsresources/web-production/css-column-tricks/ underneath the “Your margins extend past your container” [...]
December 9th | #
Hii thanks you…
Great post. I remember first discovering the float bug. Drove me bonkers!!!
December 12th | #
Nice little bit of coding there. Ty, now I understand an issue that IE6 has with some websites (usually putting in a sideways scrollbar)
December 18th | #
Nice little bit of coding there. Ty, now I understand an issue that IE6 has with some websites (usually putting in a sideways scrollbar)
December 20 | #
hi nice article very useful thx.
i have a question I’m building a website with a slide show and took one from DHTML but it doesn’t work on IE plz someone can help me? with this link you will see de slidshow on DHTNL
http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
December 20 | #
thanks for the summary
December 23rd | #
thanks for information. great works.
December 26th | #
Oh very nice. thank you warpspire team.
December 30th | #
Thank you very successful and useful site I have received the necessary information …
January 2nd | #
Thank you very successful and useful site I have received the necessary information …
January 5th | #
[...] Top reasons your CSS columns are messed up – Warpspire good wordpress look (tags: reference design webdesign) [...]
January 6th | #
[...] Top reasons your CSS columns are messed up [...]
January 7th | #
thanky
January 8th | #
very nice. thanks…
January 9th | #
thank you admin. very good post.
January 9th | #
Thank you very successful and useful site I have received the necessary information …
January 10th | #
[...] 7- ??CSS?????????? [...]
January 13th | #
very nice. thanks.
January 14th | #
very nice. thanks.
January 17th | #
[...] 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 [...]
January 20 | #
You say: “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” .
That is quite a statement!
With all due respect, but I think the recent surge in popularity of CSS frameworks might also have something to do with the fact that it really speeds up productivity.
Try some zen-coding in combination of 960 framework. You’ll have a website skeleton in a matter of no time. Whilst hand coding takes up much more time!
Also, if you don’t properly understand CSS and how the box model works, a CSS framework is probably not a good idea. You need a decent amount of understanding before you can start using those.
But a very good post nonetheless :)
January 20 | #
I’m tempted to apply these fixes to my columns, but frankly IE6 should be phased out now than be dealt with. It’s 2010 for damn sakes.
For client and business sites however, this could be useful. I would place these in conditional comments or use the * html hack because I’m strict about my CSS. If it says display inline, I expect it to be that even if it’s not and just a fix.
January 20 | #
This might be nitpicky, but isn’t the first image describing double-floated margins in IE6 inaccurate with respect to how the bug renders? From PIE:
“This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any other left-margined floats that are displayed in the same row won’t show the doubled margin.”
So if they’re floated left, you should only see the bug if you have a left margin floated against the left edge of your container (in IE6). Please correct me if I’m wrong. :]
January 20 | #
[...] Top reasons your CSS columns are messed up – Link. [...]
January 20 | #
Def going to review this. However, who cares what happens in browsers like IE6? That’s not a reason CSS is bad. That’s a browser being bad. And IE6 is in the grave now, regardless of who still uses it. I don’t test in it. I don’t develop for it. To hell with it.
January 21st | #
[...] upfront to try it out and download. Also, if you prefer to code from scratch, this, this, this and this seems like good articles to clear your basics. Here are some very basic guidelines for [...]
January 31st | #
Thanks for a great article! Learnt something I didn’t know!
February 7th | #
These are some tricky tricks,nice to see somebody shared them!
February 21st | #
[...] left top; padding:0px 10px; } #wrapper p { line-height:25px; }[/code] [color=Teal]Column Issues 7- 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 [...]
February 24th | #
Helpful stuff!
Keep up the good work!
March 2nd | #
Thenks, very nice
March 6th | #
thanks you nice web
March 8th | #
tenx admin very good blog
March 9th | #
[...] ??CSS?????????? [...]
March 11th | #
thanks again
March 11th | #
thx :x
March 11th | #
travesti
March 11th | #
thanks it is good blog
March 11th | #
ursite wowww
March 11th | #
thank you for your site
March 14th | #
thnks admin
March 14th | #
thks for links