Comments on: Avoiding Excess Margin on Repeating Columns

By: Soh

Soh — Mon, 24 May 2010 15:17:25 +0000

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

By: Airoschou

Airoschou — Mon, 24 May 2010 07:13:34 +0000

Ie6 need add “display: inline”

By: Shaggy

Shaggy — Wed, 20 Jan 2010 23:40:30 +0000

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

By: Dogan

Dogan — Tue, 10 Nov 2009 14:41:15 +0000

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

By: Barton

Barton — Mon, 05 Oct 2009 19:01:26 +0000

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.

By: chirag

chirag — Wed, 13 May 2009 12:43:00 +0000

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

By: Soh

Soh — Tue, 12 May 2009 05:50:08 +0000

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~

By: chirag

chirag — Tue, 12 May 2009 05:35:43 +0000

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

By: Chris

Chris — Wed, 08 Apr 2009 22:42:36 +0000

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

By: Jacques

Jacques — Fri, 20 Mar 2009 19:31:12 +0000

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.