This post originated from an RSS feed registered with Python Buzz
by Phillip Pearson.
Original Post: Non-trivial lists of boxes, with CSS
Feed Title: Second p0st
Feed URL: http://www.myelin.co.nz/post/rss.xml
Feed Description: Tech notes and web hackery from the guy that brought you bzero, Python Community Server, the Blogging Ecosystem and the Internet Topic Exchange
This has been pissing me off all day. I'm trying to do a SNS-style box full of faces with "nice" XHTML/CSS.
AFAIK the most semantic way to do this is as a list, so I started out using a <ul> with a rule like ul li { display: inline }, only this gets really confused when you try to put <div> or <p> elements inside a list item. I was hoping that each <li> would act as a block and allow me to put block elements inside, but it seems that instead, block elements trump the inline-ness and display as they would inside an ordinary <li>.
Giving up on that, I went back to the "ordinary CSS way" of doing this sort of thing - lots of floated divs. The first problem is that when you have a bunch of floated divs inside an unfloated div, all the floated divs drop out the bottom. The solution to this in my case is to put a cleared div at the end of the parent div (<div>... lots of floated divs...<div style="clear:left"></div></div>), although it it seems that it's possible to clear floats without this extra div.
The next problem is that not all the images are the same size. When you use float: left on lots of images, what happens is that the browser lines up images from the left, then starts from the next line when it runs out of space. Only, if the images don't all have the same height, when it encounters a small image that will fit below the rightmost image on a higher-up line, it will push it in there. This results in rather more images clustered on the right-hand side of the screen than expected (you can see this in action on my coffee.gen.nz user page - scroll down to the bottom). I killed that by wrapping each set of three images inside a separate div.
So now it finally looks fairly nice, although I feel that the amount of extra markup required to fix all the little formatting quirks sort of defeats the purpose of using CSS in the first place.
Can any CSS wizards give me a hint as to how to achieve the look I want without having to hack like this? Ideally I'd be able to give a div a width and height, but tell it to display inline. I thought this is what display: inline-block was for, although for me, in both IE7 and FF1.5, that just seems to behave exactly the same way as display: block, for divs at least. width and height are respected, and boxes stack up vertically.
AHA - spartanicus has made some progress here. His code, if you add #gallery span p{display:block} into the CSS, lets you do pretty much what I'm talking about, and it looks good in IE. In Firefox it's a bit unpredictable still.
Previous Topic
