Mon, 2010-03-29 09:36
Appologizes if this one has already been covered, but I'm close to deadline...
I have a div with a defined width of 714px where I output a not defined number of list items in an unordered list. I need to float these list items next to each other and break on every three items.
Result should be list items with a width of 222px with a right-margin of 24px, but doing this makes the last item break as there's no room for a right-margin of this object.
So basically code is:
<div> <ul> <li></li> <li></li> <li></li> ... <li></li> </ul> </div>
I could use a negative margin of 24px on the div and set the left-margin to 24px while setting right-margin to 0, but it seems to quirky and IE won't cope with it.
So any suggestions on how to do this? I know naming every three list items with whatever class name could work out, but I'm trying to prevent that as I then need to modify code and it could cause problems elsewhere this same list is being used. So basically I want to make magic by only using css! 
Any help highly appreciated!
Mon, 2010-03-29 10:07
#1
Your math is as bad as mine : )
Your container is 714px. So why are li items of 222px getting 24px of margin? That adds up to 738px. Float drop should occur in every browser.
A margin of 16px fits exactly, however. Did you try that? Of course, the ul may not have any sidepadding or side margins, and you did remove any browser-default margin or padding from the ul and li's, correct?
ul {
width: 714px; (not needed if this is already on the div)
margin: 0;
padding: 0;
}
li {
float: left;
width: 222px;
margin: 0 16px 0 0;
padding: 0;
}
(I don't believe you have to be explicit with the padding on the li's but I dunno the rest of your code so I'm just being careful with an example here).
IE6's double margin bug shouldn't appear here since the margin's not in the direction of the float, but if you do see doubled margins in IE6 only then of course you know to add display: inline after the float: left line.
If 16px isn't quite safe in all browsers you can even go down to 14px and this may still look spaced-out enough.
However, what if the text in the li's is longer than 222px? Your li's text will wrap and the height will increase. This may cause float snag (the next floats in line don't go all the way to the left... instead they hit the hanging bottom of the too-tall li on the line above and stop there).
Mon, 2010-03-29 13:03
#2
Nope, my math is fine!
Thanks for your reply! I think you mentioned the real problem which is that I only want margin-right of 24px for the firs two list items while the last one should have no margin at all. This is what's causing me problems...
So the math should be 222px + 24px + 222px + 24px + 222px = 714px!
Mon, 2010-03-29 14:38
#3
Got it working
Needs some quirking, but setting the margin-right to -24px on the parent ul seems to do the trick in most browsers.
Tue, 2010-03-30 07:42
#4
That should work
Should work in everyone but IE6... I think you're relying on browser properly dealing with overflow... IE6 would I believe stretch the container, even with the negative right margin. However, you may not be supporting that one.
There's another option, something called nth-child, however it's not reliably cross-browser (but could conceivably be used to have no right margin on every third li).
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo