I’m also using this code. it’s excellent for divs that have the same height. but, as darien notes above, if the divs each have different amounts of content—and therefore the divs have different heights—the wrapping breaks.
there is an example of this ‘malfunction’ in a site that mark newhouse refers to from his site: http://www.janneland.co.nz/current.html
mark newhouse’s site: http://realworldstyle.com/thumb_float.html
thanks in advance to anyone who can help me resolve this.
Great article! Lots of good info. Re: layout of forms, I like the idea but the layout doesn’t look that great if viewed without stylesheets… I tried this and it seems to work: I used a definition list inside my form. I gave the <dl> an id of “webform” and used contextual selectors to define style. I put the label tags in the <dt> tags and the inputs in the <dd> tags. I floated the <dd>‘s left and set a static width. This lined things up well, then when viewed without stylesheets, each input was below the respective label and indented. But from a standards perspective, is this “technically” compliant? Any thoughts? Thanks!
I have to agree with Jeff Walden on the comment about the <label> element. It is far more appropriate to use this element than using <span> and is able to be styled to achieve the same effect, as well.
Copy & paste the code below to embed this comment.
Brennan Todd
This is in part a response to Jeff Walden’s comment regarding using the label tag to denote a label… as other’s have noted, he’s right. Using a label for this is more correct. However, I have run into a small snag with that, floating a label tag in NN4.8 causes it to disappear completely. The simple fix was to wrap the label tag in a span, and float the span instead – which puts us back where we started. My second solution removed the Float entirely, and used a PRE tag, which just seems just as wrong for the same reasons; semantics. I don’t WANT to preformat anything! But I DO want labels on left, inputs on right; and I want semantically correct, valid code.
Copy & paste the code below to embed this comment.
Andrew
haikal, i like you suggestion as it avoids extraneous div’s. i’ve noticed that safari and older mozilla ignore width declarations on an inline div. this makes a thumbnail list with different size thumbnails very messy. is there a way around this?
22 Reader Comments
Back to the ArticleBrad Noble
I’m also using this code. it’s excellent for divs that have the same height. but, as darien notes above, if the divs each have different amounts of content—and therefore the divs have different heights—the wrapping breaks.
there is an example of this ‘malfunction’ in a site that mark newhouse refers to from his site: http://www.janneland.co.nz/current.html
mark newhouse’s site: http://realworldstyle.com/thumb_float.html
thanks in advance to anyone who can help me resolve this.
brad
Haikal
I just discovered that if I have a series of img’s with “display: inline”, I get similar results, and more predictable.
Screenshot at http://www.deviantart.com/view/4174081/
Thoughts?
e. rader
your tip made my migraine go away. thanks!
Derek
Great article! Lots of good info. Re: layout of forms, I like the idea but the layout doesn’t look that great if viewed without stylesheets… I tried this and it seems to work: I used a definition list inside my form. I gave the <dl> an id of “webform” and used contextual selectors to define style. I put the label tags in the <dt> tags and the inputs in the <dd> tags. I floated the <dd>‘s left and set a static width. This lined things up well, then when viewed without stylesheets, each input was below the respective label and indented. But from a standards perspective, is this “technically” compliant? Any thoughts? Thanks!
Derek
I floated the <dt>‘s left. This lined up the label and the input on the same line.
Karl Groves
I have to agree with Jeff Walden on the comment about the <label> element. It is far more appropriate to use this element than using <span> and is able to be styled to achieve the same effect, as well.
Nicolas Hoizey
I’ve tried to include the thumbnails method described here in the content div of a 3 floating columns layout, and it breaks with IE.
The layout code is from the following page:
http://css.maxdesign.com.au/selectutorial/tutorial_intro.htm
Here are both my examples:
http://www.gasteroprod.com/tests/3col_gal/example1.html
http://www.gasteroprod.com/tests/3col_gal/example1.html
Both work well with Firebird, but the second breaks with IE6 because the spacer div also clears the left column !
Any help would be appreciated… :)
Regards,
Nicolas.
Nicolas Hoizey
In previous post, the URLs are of course the following:
http://www.gasteroprod.com/tests/3col_gal/example1.html
http://www.gasteroprod.com/tests/3col_gal/example2.html
Sorry.
Brennan Todd
This is in part a response to Jeff Walden’s comment regarding using the label tag to denote a label… as other’s have noted, he’s right. Using a label for this is more correct. However, I have run into a small snag with that, floating a label tag in NN4.8 causes it to disappear completely. The simple fix was to wrap the label tag in a span, and float the span instead – which puts us back where we started. My second solution removed the Float entirely, and used a PRE tag, which just seems just as wrong for the same reasons; semantics. I don’t WANT to preformat anything! But I DO want labels on left, inputs on right; and I want semantically correct, valid code.
Andrew
haikal, i like you suggestion as it avoids extraneous div’s. i’ve noticed that safari and older mozilla ignore width declarations on an inline div. this makes a thumbnail list with different size thumbnails very messy. is there a way around this?
Michael
Exactly what I needed. Three strikes in one article. Thank you!
Michael
David
Thank you so much for this article. I especially appreciated the inclusion of so many concrete examples.