Avoiding Excess Margin on Repeating Columns

Avoiding Excess Margin on Repeating Columns

January 6th, 2009

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.

View Demo

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!

View Demo

Similar Posts:

• Smart Columns w/ CSS & jQuery
• Liquid + Fixed Two Column Lists with CSS
• Tips for Developing Semi-Liquid Layouts
• Simple Tabs w/ CSS & jQuery
• Simple Toggle with CSS & jQuery

Did You Enjoy This Post?

Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.

Bookmark or Share this Post!

• 
• 
• 
• 
• 
• 

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.

10 Responses to “Avoiding Excess Margin on Repeating Columns”

1. Jan 7th, 2009 @ 6:26 am Swizec

   first-child IS supported by all major browsers.

   last-child isn’t since it’s a CSS3 thing

2. Jan 7th, 2009 @ 10:37 am Jacob

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

3. Mar 20th, 2009 @ 11:31 am Jacques

   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.

4. Apr 8th, 2009 @ 2:42 pm Chris

   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

5. May 11th, 2009 @ 9:35 pm chirag

   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

6. May 11th, 2009 @ 9:50 pm Soh

   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~

7. May 13th, 2009 @ 4:43 am chirag

   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

8. Oct 5th, 2009 @ 11:01 am Barton

   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.

9. Nov 10th, 2009 @ 6:41 am Dogan

   Thank you so much Soh…
   This tutorial saved my life =)

10. Jan 20th, 2010 @ 3:40 pm Shaggy

    ie6 is a major piece of crap. and will be 10 years old next year. I am dropping support and so should you.

Speak Your Mind…