*

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

comments feed

  1. Gravatar
    Michael

    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. ;)

  2. Gravatar
    Chris Lloyd

    May 12th | #

    What about using overflow: auto rather than the :after filter hack?

  3. Gravatar
    Brandon

    May 12th | #

    Great info; thanks.

  4. Gravatar
    Luke

    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.

  5. Gravatar
    Aaron Russell

    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!

  6. Gravatar
    Adrian

    May 13th | #

    Thanks very much. The first problem is one I am currently struggling with.

  7. Gravatar
    kontur

    May 13th | #

    good stuff indeed. thanks

  8. [...] you some quick tips on how to avoid easy pitfalls so you can create your own CSS framework.”read more | digg [...]

  9. Gravatar
    Jazmin

    May 14th | #

    Thank so much for writing this. It’s incredibly helpful to have all of these top tips in one place ; )

  10. Gravatar
    Andris

    May 14th | #

    Very useful article, thanks a lot, I will link it :)

  11. [...] “Top reasons your CSS columns are messed up” címmel írt egy érdekes cikket Kyle Neath. Honlaptervez?ket sok órányi [...]

  12. Gravatar
    sir jorge

    May 14th | #

    this is a major life saver!

  13. 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 :)

  14. Gravatar
    Brady

    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

  15. Gravatar
    Tallain

    May 15th | #

    The ‘old & busted’ vs. ‘new hotness’ bit cracked me up.

  16. Gravatar
    Josh

    May 15th | #

    Is your solution for clearing floats superior in your opinion to the following:

    http://www.positioniseverything.net/easyclearing.html

  17. Gravatar
    Kyle

    May 15th | #

    Josh: it’s the same one, minus the hack for IE5 (I could really care less about IE5)

  18. Gravatar
    Yep

    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

  19. [...] Top reasons your CSS columns are messed up – Warpspire [...]

  20. [...] 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 [...]

  21. Gravatar
    Marc Mongenet

    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.

  22. Gravatar
    PChere

    May 16th | #

    Amazing advice. Now I know why the sidebar kept falling down for some readers but I never saw it.

  23. Gravatar
    Randy Tayler

    May 16th | #

    Came one day too late; I already went back to tables.

    And man, I’m so glad.

  24. Gravatar
    kalj

    May 16th | #

    Wow thanks captain obvious.

  25. Gravatar
    Rich Webster

    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.

  26. Gravatar
    danish

    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

  27. Gravatar
    Chris Malowany

    May 16th | #

    You have reminded me how much I hate IE

  28. [...] Top reasons your CSS columns are messed up (tags: css webdesign layout) [...]

  29. Gravatar
    David Hucklesby

    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!

  30. Gravatar
    Erika

    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.

  31. [...] Top reasons your CSS columns are messed up – Warpspire Interesting. (tags: css layout ie tutorial) [...]

  32. [...] 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 [...]

  33. Gravatar
    Mathew

    May 17th | #

    This clears up a lot of questions I had. Thanks for the great but simple article

  34. Gravatar
    Ian Ferguson

    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.

  35. [...] Top reasons your CSS columns are messed up – Warpspire (tags: css layout ie) [...]

  36. [...] Top reasons your CSS columns are messed up – Warpspire (tags: css howto troubleshooting web design development) [...]

  37. Gravatar
    dave

    May 18th | #

    i hate css. what a waste of precious time. ill just use tables until there no longer supported.

  38. [...] Top reasons your CSS columns are messed up Explain very clearly why your CSS columns drop in IE, must read! [...]

  39. Gravatar
    Jeth

    May 19th | #

    Thanks! I never knew the solution to my problem could be quite simple. This is really helpful.

  40. [...] your CSS columns look messed up in IE 6? Here are some excellent tips by Kyle Neath on fixing [...]

  41. [...] 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) [...]

  42. Gravatar
    Enrico Teotti

    May 19th | #

    hi mate, nice post! I’m glad somebody finally put on writing the ECWNM (even columns with negative margins) way ;-)

  43. Gravatar
    seo tools

    May 20 | #

    Thanks very much.

  44. Gravatar
    Josh

    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.

  45. Gravatar
    Tyler Thompson

    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.

  46. Gravatar
    Kyle

    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.

  47. Gravatar
    Josh

    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…

  48. Gravatar
    Web Design

    May 22nd | #

    A great refresher on the work arounds for CSS issues. Great post, I’ll use it a reference in the future!

  49. Gravatar
    David

    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

  50. Gravatar
    Will

    May 25th | #

    display: inline was a new one for me, thanks!

  51. Gravatar
    Denver Web Design

    May 26th | #

    Many people new to CSS will struggle with this forever. This is a great tutorial on understanding how CSS works with divs

  52. [...] 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 [...]

  53. Excellent article, well done

  54. Gravatar
    Mark Mackinnon

    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!

  55. [...] CSS Column Fixes [...]

  56. Gravatar
    Joan

    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 :)

  57. [...] 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 [...]

  58. Gravatar
    Reza

    June 16th | #

    Excellent article! thank you very much

  59. [...] 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 [...]

  60. Gravatar
    Shawn Adrian

    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…

  61. [...] 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) [...]

  62. Gravatar
    stu

    July 3rd | #

    nice, i bookmark this and refer next time i get problem!

  63. Gravatar
    Tom

    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;
    }

  64. [...] questo articolo vengono indicate le principali cause degli errori di layout quando si usano i CSS per strutturare il contenuti in [...]

  65. [...] A great article on why your CSS layouts may be going haywire can be found on Kyle Neath’s website Warspire. [...]

  66. Gravatar
    mike

    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 !

  67. Gravatar
    Jennifer

    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!!

  68. Gravatar
    Celina Buy

    July 17th | #

    Thanks for the information. The graphics were a big help to a CSS beginner. Consider yourself Dugg.

  69. Gravatar
    Quevin

    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!

  70. Gravatar
    Web Design

    July 25th | #

    Would be nice to see a php and css version. But overall fairly helpful. Thanks for sharing.

  71. [...] CSS Column Fixes [...]

  72. [...] Top Reasons Your CSS Columns Are Messed Up – Warpspire [...]

  73. Gravatar
    Scarf*oo

    August 19th | #

    A nicely written article, I must say.

  74. Gravatar
    Music Instruments

    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…………..

  75. [...] Top Reasons Your CSS Columns Are Messed Up – Warpspire [...]

  76. Gravatar
    travesti

    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 :)

  77. Gravatar
    HostPipe

    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!

  78. Gravatar
    Patrick

    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

  79. Gravatar
    AlexeyGfi

    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

  80. [...] 18. Top reasons your CSS columns are messed up [...]

  81. Gravatar
    Film Download

    September 24th | #

    Came one day too late; I already went back to tables.

  82. [...] 7. ??????? ??????? ???????????????? ??????????????? ???… [...]

  83. Gravatar
    shaggy

    October 10th | #

    Nice,
    Now just kick the px habit and use % and you’ll have flexible layouts!

  84. Gravatar
    Gece Kahvesi

    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 :)

  85. Gravatar
    Sohbet

    October 11th | #

    Came one day too late; I already went back to tables

  86. Gravatar
    thenetguruz

    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 :)

  87. Gravatar
    Online Money Cheats

    October 18th | #

    Awesome article man. I always had troubles likes that.

    Keep up the good work.

  88. [...] WarpSpire.com – Top reasons your CSS columns are messed up [...]

  89. Gravatar
    Hack

    November 1st | #

    nice, i bookmark this and refer next time i get problem!

  90. [...] 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 [...]

  91. Gravatar
    online Sinema izle

    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!

  92. Gravatar
    City pics

    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

  93. Gravatar
    Endüstri mühendisi

    November 4th | #

    .sidebar{
    float:left;
    margin-left:20px;
    display:inline
    }

  94. Gravatar
    City pictures

    November 4th | #

    I changed:
    * html .columns {height: 1%;}

    to:
    .columns { *height: 1%; }

  95. Gravatar
    Kyle

    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.

  96. [...] Top Reasons Your CSS Columns Are Messed Up – Warpspire [...]

  97. Gravatar
    bryan Adams, Liverpool

    November 18th | #

    fantastic resource. really useful. thanks.

  98. Gravatar
    Bilinmeyeni Bilin

    November 22nd | #

    Nice content thanks…

  99. Gravatar
    Mahbub

    November 24th | #

    Very nice and useful findings to rescue developers from nagging problems.

  100. Gravatar
    stella

    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!!

  101. Gravatar
    sidhu

    December 10th | #

    superb i like it very much,very helpfull

  102. Gravatar
    ivanceras

    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..

  103. [...] 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. [...]

  104. [...] Top Reasons your Columns are messed up [...]

  105. [...] 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. [...]

  106. Gravatar
    metin

    December 21st | #

    thank you dinamikoyun oyun oyunu oyna oyunlar

  107. Gravatar
    metin

    December 21st | #

    thank you oyun oyunlar oyunu dinamikoyun

  108. Gravatar
    travesti

    December 23rd | #

    travesti

  109. Gravatar
    travesti

    December 23rd | #

    travesti

  110. Gravatar
    gay

    December 23rd | #

    gay

  111. Gravatar
    gay

    December 23rd | #

    travesti

  112. Gravatar
    paslanmaz

    December 24th | #

    Ça?da? Paslanmaz olarak paslanmaz metal ve pirinç dekorasyon i?leri ile hizmetinizdeyiz.

            Birbirinden farkl? ürün kategorileri ile siz de?erli mü?terilerimize en üstün ve kaliteli hizmeti vermekten dolay? gurur duyar?z.
    
  113. Gravatar
    full programlar

    February 9th | #

    full programlar-oyun yamalari-dizi arsivi-msn-cep-telefonu-ipod

  114. Gravatar
    harika oyun

    February 11th | #

    thank you

  115. Gravatar
    Bob

    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?

  116. [...] Top reasons your CSS columns are messed up – Warpspire (tags: css) [...]

  117. [...] Top Reasons Your CSS Columns Are Messed Up [...]

  118. [...] Top reasons your CSS columns are messed up – Warpspire (tags: css webdesign design web) [...]

  119. Gravatar
    Steve

    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.

  120. [...] Warpspire | CSS Column Tricks [...]

  121. Gravatar
    Danl

    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

  122. Gravatar
    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!

  123. [...] Top reasons your CSS columns are messed up [...]

  124. [...] Top reasons your CSS columns are messed up [...]

  125. [...] Top reasons your CSS columns are messed up – Warpspire [...]

  126. [...] Source [...]

  127. [...] Top reasons your CSS columns are messed up [...]

  128. Gravatar
    meline

    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!

  129. Gravatar
    site ekle

    March 23rd | #

    i like that the css is best coding web site but some mistake must solution. Anyway… bYe

  130. Gravatar
    assa

    April 1st | #

    asssssssssssssssssssssssssssssss

  131. [...] 7- ??CSS?????????? [...]

  132. [...] Top reasons your CSS columns are messed up [...]

  133. [...] Top reasons your CSS columns are messed up [...]

  134. [...] Top reasons your CSS columns are messed up [...]

  135. [...] Top reasons your CSS columns are messed up [...]

  136. [...] 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. [...]

  137. [...] Top reasons your CSS columns are messed up [...]

  138. [...] Top reasons your CSS columns are messed up [...]

  139. Gravatar
    Edward de Leau

    May 10th | #

    Great listing of tips, I really like the explanations, now I must remember to bookmark this one..,

  140. [...] 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 [...]

  141. Gravatar
    sarki dinle

    May 12th | #

    Top reasons your CSS columns are messed up

  142. [...] Top reasons your CSS columns are messed up [...]

  143. Gravatar
    HawK.TwO

    May 25th | #

    thank you…

  144. [...] [...]

  145. [...] Top reasons your CSS columns are messed up – Warpspire [...]

  146. Gravatar
    Mp3 Dinle

    May 30th | #

    [...] Top reasons your CSS columns are messed up – Warpspire [...]

  147. Gravatar
    ceza

    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 [...]

  148. Gravatar
    yusuf güney

    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. [...]

  149. 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)

  150. [...] Top reasons your CSS columns are messed up [...]

  151. Gravatar
    vancouver web design

    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.

  152. [...] 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 [...]

  153. Gravatar
    Pi TASARIM

    July 16th | #

    Great post. I remember first discovering the float bug.

  154. Gravatar
    ceza

    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. [...]

  155. Gravatar
    bims

    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

  156. [...] 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 [...]

  157. [...] 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 [...]

  158. Gravatar
    izzet

    July 27th | #

    Thanks very much.

  159. Gravatar
    Forum

    July 27th | #

    Thank you very match

  160. Gravatar
    hasfa

    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.

  161. Gravatar
    Doug

    August 31st | #

    Great article, I would have never come up with a negative margin on my own. Thank you!

  162. Gravatar
    eldonito

    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..

  163. Gravatar
    yaz?l?m

    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

  164. [...] Top reasons your CSS columns are messed up [...]

  165. Gravatar
    muzik dinle

    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

  166. [...] Top reasons your CSS columns are messed up [...]

  167. Gravatar
    Daniellin

    October 23rd | #

    your website does not Support Chinese………

    well …your article is extremely useful…

  168. [...] Top reasons your CSS columns are messed up Pourquoi vos colonnes CSS ne régissant pas comme vous le désirez (solutions) [...]

  169. [...] good. Or, you could just use templates. Continue reading » · Written on: 10-24-09 · No [...]

  170. [...] Top reasons your CSS columns are messed up – Warpspire  [...]

  171. [...] Top reasons your CSS columns are messed up [...]

  172. [...] Top reasons your CSS columns are messed up [...]

  173. [...] Top reasons your CSS columns are messed up Pourquoi vos colonnes CSS ne régissant pas comme vous le désirez (solutions) [...]

  174. Gravatar
    tuncays

    November 4th | #

    te?ekkürler güzel

  175. Man, wish I’d found this when I first started out! Cheers for sharing.

  176. [...] 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” [...]

  177. Gravatar
    Tema indir

    December 9th | #

    Hii thanks you…
    Great post. I remember first discovering the float bug. Drove me bonkers!!!

  178. Gravatar
    jon

    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)

  179. Gravatar
    Nefr3t

    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)

  180. Gravatar
    wais

    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

  181. Gravatar
    mp3 dinle

    December 20 | #

    thanks for the summary

  182. Gravatar
    muzik dinle

    December 23rd | #

    thanks for information. great works.

  183. Gravatar
    sefa k?l?ç

    December 26th | #

    Oh very nice. thank you warpspire team.

  184. Gravatar
    toner

    December 30th | #

    Thank you very successful and useful site I have received the necessary information …

  185. Gravatar
    Dinle

    January 2nd | #

    Thank you very successful and useful site I have received the necessary information …

  186. [...] Top reasons your CSS columns are messed up – Warpspire good wordpress look (tags: reference design webdesign) [...]

  187. [...] Top reasons your CSS columns are messed up [...]

  188. Gravatar
    hayaliniz

    January 7th | #

    thanky

  189. Gravatar
    trv ajans

    January 8th | #

    very nice. thanks…

  190. Gravatar
    Klip izle

    January 9th | #

    thank you admin. very good post.

  191. Gravatar
    escort bayan

    January 9th | #

    Thank you very successful and useful site I have received the necessary information …

  192. Gravatar
    CSS??20????Bug??? | Web??

    January 10th | #

    [...] 7- ??CSS?????????? [...]

  193. Gravatar
    trv ajans

    January 13th | #

    very nice. thanks.

  194. Gravatar
    Favori partner Escort

    January 14th | #

    very nice. thanks.

  195. [...] 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 [...]

  196. Gravatar
    Steven Fauconnier

    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 :)

  197. Gravatar
    Sunny Singh

    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.

  198. Gravatar
    David Watson

    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. :]

  199. [...] Top reasons your CSS columns are messed up – Link. [...]

  200. Gravatar
    CarbonXPdigger

    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.

  201. [...] 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 [...]

  202. Gravatar
    escort bayan

    January 31st | #

    Thanks for a great article! Learnt something I didn’t know!

  203. Gravatar
    Andrew

    February 7th | #

    These are some tricky tricks,nice to see somebody shared them!

  204. [...] 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 [...]

  205. Gravatar
    Andrew Odendaal

    February 24th | #

    Helpful stuff!
    Keep up the good work!

  206. Gravatar
    Oleg

    March 2nd | #

    Thenks, very nice

  207. thanks you nice web

  208. Gravatar
    hipnoz meditasyon

    March 8th | #

    tenx admin very good blog

  209. [...] ??CSS?????????? [...]

  210. Gravatar
    istanbul travestileri

    March 11th | #

    thanks again

  211. Gravatar
    travesti

    March 11th | #

    thx :x

  212. Gravatar
    ankara travestileri

    March 11th | #

    travesti

  213. Gravatar
    izmir travestileri

    March 11th | #

    thanks it is good blog

  214. Gravatar
    bursa travestileri

    March 11th | #

    ursite wowww

  215. Gravatar
    travestiler

    March 11th | #

    thank you for your site

  216. Gravatar
    escort travestiler

    March 14th | #

    thnks admin

  217. Gravatar
    antalya travestileri

    March 14th | #

    thks for links

Make a Comment

don’t be afraid, it’s just text

Comments are parsed with Markdown. Basic HTML is also allowed.