In this post I want to reply to a frequently asked question that I receive from my readers about how to distribute horizontally a certain number of elements within a main container using CSS. This problem is not particularly complex and can be solved simply using the CSS selector :first-child.
Before to proceed I suggest you to download my CSS 2 Visual Cheat Sheet for a practical reference guide to CSS 2 properties that can help you understand concepts illustrated in this post. The picture below illustrates an example of horizontal distribution:
This is the HTML code you can use to define the structure of your document:
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
In order to distribute horizontally the three elements contained into the wrapper we have to use some lines of CSS code. At first sight, a practical solution could be to define a class (.section), with the properties width and margin-right set to a specific value, and apply it to each <div> element contained into the wrapper. The problem is the right margin of the last <div> element that exceeds the width of the wrapper:
This is a problem because web browsers render the page in this way:
The last <div> layer is moved below. The question is: How can you remove the external margin of the last element without using a different CSS class with the property margin-right sets to 0?
Solution
As I said at the beginning of this article, the simplest solution is to use the CSS selector :first-child and invert the position of the margin from right to left. :first-child allow you to get an element that is the first child of another element. In this way the selector allows you to remove the left margin easily.
The first step is to define the wrapper using the following CSS code:
#wrapper{
width:320px;
height:60px;
background:#EFEFEF;
}The following code define the class.section to apply to each element within the main wrapper.
.section{
border:solid 1px #999;
float:left;
height:58px;
margin-left:10px;
width:98px;
}In this example I used fixed values for the properties width and margin-left but you can also use relative value (percentage). Now we have to remove the left margin adding the following code:
#wrapper div:first-child{margin-left:0px;}Browsers interpret the previous line in this way: get the first <div> element contained into the element with ID=wrapper and set the property margin-left to 0. And this is the result:
The only advice is the following: IE 6 doesn’t support the selector :first-child. You can use conditional comments to define a specific CSS file for IE6 and add a new class (for example .section-first) with the same properties of the class .section but the property margin-left sets to 0.
Anyway, this is a good tutorial for using selector :first-child.
But for this case, I prefer to create a id for first section to satisfy IE6, rather than use conditional comments to define a specific CSS for IE6.
Well, you could sove it with jquery for IE6 specific, running the jquery code only if its a IE6 browser. But yeah, its to bad this selectors arent supported in IE6, but then again its 8 years old.
Great! But, how you can do that inside a loop?
Thanks, Antonio. Good and clear explanation. :first-child and :last-child are very useful when designing a dynamic site (loops).
Yes, I agree with you. The only thing I hate is that both these selectors are not supported by IE 6.
cool but it’s suit in all platform?
cool technique, now I won’t create a separate class.
Lovely. But why use float:left; as opposed to display:inline-block?
Unless I’m mistake, inline-block is not universally supported http://www.quirksmode.org/css/display.html#t03
any hosted demos?
thanks. i am trying to understand this.
very nice tutorial : )
This is a very nice usage of the first-child selector. I’ll keep this in mind.
I always use multiple classes. The advantage of this technique is that you only have to define it once and you can use it on different elements through the whole site.
Ciao Antonio.
Notizia utile, come sempre.
Arrivederci.
(I am French and my Italian is old. I try to be minimalist not to say stupidities.)
This is such an elegant and practical solution. Thanks for sharing, Antonio. :)
can be the other solution
#wrapper div:lst-child{margin-right:0px;} for first Wrapper so
this is good example for İE6 ‘s don’t see the child selectors …
thanks Antonio (::
This can be done without using :first-child selector, so it works even in IE6.
How? Set the left margin on the LIs and negative left margin of the same size on the UL. That way the last item won’t have any right margin and the left margin of the first item is hidden.
What I do, instead of using :first-child is to use a negative margin on the wrapper element.
And then adding that margin to the width of the wrapper element.
Then the left margin on the first element will be counterbalanced by the negativ margin.
Because we are floating left, and adding left margin we also have to set the wrapper element, and the section element to display: inline;
Noone else using this method?
I’m curious as to why you (if you do) prefer this technique to using the :last-child selector to null the margin-right?
It may be because :first-child works in IE7/8, while :last-child doesn’t.
Me also i prefer to ad a class “first” to it, does the same and less IE specific code, in any case IE specific stylesheet are anyway big in most of my websites…. i hope that there will be soon a plugin or anything that everybody want, but don’t work on IE6 maybe this how they will update and we finally can forget about that IE Nightmare.
IE6 is almost dead: according to the W3C browsers statistic it was at 12% in september:
http://www.w3schools.com/browsers/browsers_stats.asp
Maybe we can start to think less about IE6 compatibility. I hope that in 2010 we can consider IE6 a old nightmare…
Besides Microsoft wanting to support it until 2014 and large companies not upgrading their employees browsers.
:(
12% isn’t almost dead, unfortunately.
Good post to illustrate the use if :first-child. When I first saw the post subject, I thought you gonna (re)explain the good use of …., but I was mistaken :)
Nice explanation. It’d be great when we can all use this but having to add the extra class for IE6 means you might as well just ignore the first-child rule and stlye the class up allowing a little bit more free space in your CSS file.
What about:
You can do this and more with elastic css framework, take a look http://elasticss.com
It’s beautiful that with the so many major establishments dropping support for IE6, we can finally use such useful pseudo-classes with confidence and without hacks.
Thanks for the tut, Antonio.
I simply have a class named .last which has margin-right:0; Simple as that and it can work multiple times on the page if I need it to, and works great in all browsers including IE6 which is very much alive and kicking.
Try telling a client their website doesn’t have to work properly in IE6 and see what they have to say about it.
I agree very much so, I also use the class “last: on the last element, for the time being, I would love to be able to use all the pseudo classes, but IE6 is still very much alive and kicking….
Great solution! Thanks Antonio!
there’s no point in using first-child if you’re gonna support IE6
Very informative article. I will have to experiment with this technique on my next project!
I was really wondering since you guys already put so much effort into dd such step by step guides, why not compile them into an ebook and sell or distribute for free? this might help you differentiate from the others by putting up a blog post. :) my 2 cents
As a HTML/CSS coder I must notice you about another bug, which will appear in IE6. Cos you are using float left together with margin-left, IE6 will induce a “double margin bug”! No mather if in std. or quirks mode. To solve this, please add “display:inline;” to the .section element.
That’s an amazing Tutorial… Thanks a lot
Instead of using first-child (ie6 will fail and conditional comments sucks, hehe) just use text-indent:-10px in your external wrapper.
Anyway, great post!
Regards,
Dom
studying…thanks!
Gracias….voy aprendiendo….
nice writeup. what did you use to make the illustrations?
I use PowerPoint for mac.
Why use selectors that IE 6 doesn’t support when you could add an additional class to the first element to obtain the same effect. Moreover, horizontally distributing elements inside a parent div is a simple issue if the elements are static, fixed width (even if some are larger then others). The problem comes when the number of elements and their width varies. How do you fix that?
‘cos ie6 is dead!
It sucks you need to add a lot of useless classes just to kick IE6 into gear.
Also, when more browsers support it, you could use :last-child here. Unfortunately though, only the very latest browsers support it.
Why do not use a margin: 0 10px; only on the middle element ?
Because if you have more then 3 elements it’s a problem! :)
Its nice!!
But if the section extends in the next line what can we do???
I mean 6 section 3 in a row. and the second one??
Antonio,
You should write a book! You have the answers to all my css questions in one place!!! All the books that I have read on it aren’t as good as your tutorials.
grazie,
Marcelo
Hi, better is operating on left margins. In this case :first-child is not required.
Css may look like this:
wrapper { margin-left:-10px}
sections { margin:left 10px}
Results be the same, but it is working in IE 6
Well done. I have no idea that use :first-child can help. Thanks.