Tutorials

Latest Word » Tutorials » Avoiding Excess Margin on Repeating Columns
Avoiding Excess Margin on Repeating Columns

Avoiding Excess Margin on Repeating Columns

Tags:

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.

Uneven Columns with CSS

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.

Uneven Columns with CSS

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!

Related Posts

Author Bio

My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!

You can learn more about me or Twitter  Follow me on twitter for more updates and resources!

Did You Enjoy This Post?

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

+ Add Comment12 Peeps Have Spoken Their Minds...

  1. Swizec

    first-child IS supported by all major browsers.

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

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

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

  10. Shaggy

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

  11. Airoschou

    Ie6 need add “display: inline”

  12. Soh

    You typically would. but not in this example. we are floating list items.

Speak Your Mind...

Post HTMLNeed to Post HTML Code? Use Postable to post code friendly html. *Wrap all html code in <pre></pre> tags.
Post HTMLNeed to Keep Updated with Comments? Subscribe to comments now.

CSS Gallery