Avoiding Excess Margin on Repeating Columns
Blog » CSS/XHTML » Avoiding Excess Margin on Repeating ColumnsAvoiding Excess Margin on Repeating Columns
Creating columns in CSS is not very hard to achieve but when working with a dynamic site and if the CMS does not allow you to easily modify each column accordingly, you end up with a set of excess margin. Below is a common example of what I’m talking about.

Normally you can just specify the last column to take away the excess margin, but what if you were working in a system where it didn’t allow you to easily customize each column in the html or the columns were being displayed dynamically?
The Solution
By wrapping the unordered list and hiding the excess margin, we are able to go around this issue.

HTML
Wrap the unordered list with another div and specify the container width. The trick is to add an overflow:hidden; to hide the excess 10px margin to the right.
<div class="container"> <ul class="col3"> <li> <h2>Column 1</h2> </li> <li> <h2>Column 2</h2> </li> <li> <h2>Column 3</h2> </li> </ul> </div>
CSS
Now calculate the padding and margin as it fits within your column. If you were to calculate the max width of 970px for a three column layout:
(Max Width + Right Margin) / # of Columns – (L and R Padding + Right Margin) = Column Width
(970px + 10px) / 3 – (40px +10px) = 276px
.container {
margin: 0 auto;
width: 970px;
overflow: hidden;
}
ul.col3 {
width: 980px;
margin: 20px 0;
padding: 0;
list-style: none;
float: left;
}
ul.col3 li {
float: left;
background: #fff;
width: 276px;
padding: 10px 20px;
margin: 5px 10px 5px 0;
}
Conclusion
This is just a ‘work-around’ trick I use when trying to avoid excess margins on repeating columns. It would be ideal to use the :first-child and :last-child pseudo-classes in these situations, but until its supported by all major browsers, I felt this was simple enough to use. If you have any better solutions or techniques, please let me know!
Similar Posts:
Tags: Column Layouts, CSS Bugs
This entry was posted on Tuesday, January 6th, 2009 at 12:15 am and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.






first-child IS supported by all major browsers.
last-child isn’t since it’s a CSS3 thing
@swizec IE6 is a major browser. first-child is not supported in IE6.
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
Good article by the way, I usually hack mine up individually, but this is a good way for dynamic columns.
Or simply use a negative margin on the container div. In your example, that would be .container {margin-left: -10px}. Works like a charm in all modern browsers, including IE6.
usually what i do is give all of the items the margins say margin-left:10px and then give the first item a class of .first since that is semantic anyways until css3 takes over and add a margin:0; to the .first class, problem solved without worrying about the last item if you don’t know how many there will be. personally i don’t like the overflow:hidden method.
just me 2cents
Hi soh
This nice post but your code is not working in ie as well as ff some space rest on right side but your demo it’s wokring cool so plz change it’s needful
Thank you
Hey Chirag, are you saying the demo page works but the sample code does not? Can you show me a URL of your test page? Its probably a conflicting css property on your end, that is my assumption~
Untitled Document
.container {
margin: 0 auto;
width: 970px;
overflow: hidden;
}
ul.col3 {
width: 980px;
margin: 20px 0;
padding: 0;
list-style: none;
float: left;
background:#000
}
ul.col3 li {
float: left;
background: #fff;
width: 276px;
padding: 10px 20px;
margin: 5px 10px 5px 0;
background:#f00
}
Column 1
Column 2
Column 3
Great, and practical tutorial.
Does the tutorial still work if the container was 100 percentage and the box widths specified as a percentage?
Thanks,
Barton.
Thank you so much Soh…
This tutorial saved my life =)
ie6 is a major piece of crap. and will be 10 years old next year. I am dropping support and so should you.