I'm designing an image gallery with multiple categories on the same page. I love Nathan Smith's http://sonspring.com/journal/hoverbox-image-gallery CSS-only solution... no javascript, etc. It was only designed for single-category views as it functions using an unordered list with float:left That's where the problem is... i'm using multiple lists to separate the pictures into categories, but because of the float property, the category lables are shoved off to the right of the pictures, which run into each other. Here's the example gallery for hoverbox, which looks like what I have: http://host.sonspring.com/hoverbox/ The only difference is I've got 3 unordered lists for the three categories... right now, the first label is on top, the other two just chill out to the right. <p>, <br /> and separate divs just run together, likely from the float:left property. Any suggestions?
by 'label' do you mean the part he has in that example of a h1 "hoverbox image gallery"? If so, just set it to clear:both; Do you have a link to YOUR CODE - trying to diagnose a problem without code is like trying to diagnose brain cancer over the phone.
Well, I've found a few things out: 1) don't code when you haven't slept. you forget silly things like clear 2) deathshadow should be a brain surgeon 3) i also found a different solution for anyone who cares... make a 1 by 500 px .gif and throw it in between categories. can't float around the whole freakin' page But yes, that was exactly what I was looking for. Thank you deathshadow! Edit: btw, my source code isn't online yet and putting what is essentially identical to the link didn't seem prudent at the time. especially now that i know what i did wrong XD
Deathshadow would be the first brain surgeon to do it by feel. After he diagnoses the cancer over the phone. Did you just say you're using a spacer gif? *choking sounds*... Sure, you can float the whole page-- lots of us do that. It's called "float abuse" and we do it : ) If all your floats are in a float, you can clear each one afterwards without messing up the page.
i've switched over to clear:both instead of the border gif. much more sensible oh, and the whole page isnt floated, just the pictures