Practical CSS Layout Tips, Tricks, & Techniques

by Mark Newhouse

22 Reader Comments

Back to the Article
  1. Hi Mark,

    Just wanted to thank you for your excellent article about replacing tables with CSS for photo thumbnails. It was exactly what I wanted.

    However, in testing it worked fine in a simple example, but when I moved it into my site it didn’t go so well. (The old table based pages are online).

    It started doing very strange things for example: When I hit refresh the text above the main div blocks gets wiped out. Resizing the window slightly restores is. Hitting f5 kills it again. To be this sounds very much like a browser bug, but I’m using the latest IE on XP.

    The example given seems to work well if you have margins or any other stuff around your page, but if you use a 3 coloumn layout like mine (check my site) the black border of the frame runs at times under the edge of the thumbnails during resize operations. You can see an example of my 3 coloumn layout at my site, and if you go to photos you’ll see the table structure I am trying to replace.

    Anyway, this is an old article, and not sure if you are able to respond to this, but if you are, and you have time to help me out, I’d love to send you an example of what isn’t working just to check if I am not going insane… My backup plan is to go back to tables – I did really want to make a good go at converting my photo skin (the one you see at the site) into pure CSS before I release it.

    Mark

    Copy & paste the code below to embed this comment.
  2. I looked at this demo 2 days ago on the old site…like the new look! But it broke your lovely demostration. Now the images don’t wrap.

    Copy & paste the code below to embed this comment.
  3. Using the sample code for layout out thumbnails in an auto-resizing way, I noticed that if one image’s caption extends to a second (or third) line under the image the wrapping doesn’t handle it well.

    Is there a way to make this technique smarter about the height differences of the DIVs ?

    Copy & paste the code below to embed this comment.
  4. Hi,

    I’ve been trying use this example to display photo thumbnails in 3 columns and 4 rows. It works, but in IE6 and NS6 there is extra space under each row. Even if I set all margins and padding to zero there is space under each row. In Opera5 and Mozilla Firebird 0.7 everything displays perfectly. You can view a test page I’ve been working on at the url below:

    http://www.xcelco.on.ca/~aross/demo/css_test2.html

    It may be a small thing, but it still bothers me and you really notice it with smaller thumbnails. I never had this problem with tables and I’d really appreciate any advice you can offer.

    Thanks,

    Andrew

    Copy & paste the code below to embed this comment.
  5. Based on my experiments the photo album divs require having an explicit width set in order to work properly.

    Copy & paste the code below to embed this comment.
  6. The test on the excelco.on.ca site above works for me on IE6. On Firebird 0.7 the images float against the right border of each box they are contained in.

    Copy & paste the code below to embed this comment.
  7. I’m using the form example that he gave, and the result of the text next to the textarea is all the way at the bottom of the textarea, instead of at the top, like in said example.  I’ve examined the css and all, and found nothing different, doctype is appropriate as well.

    anyone have this problem? and any insight on a solution?

    Copy & paste the code below to embed this comment.
  8. Everyone seems to be hyping standards-compliant, semantically valid markup.  Every so often, though, we see something like this: use of the span tag with class attribute when a tag was specifically designed for this: label.  Why?

    I’ve found < label > to be a good tag for this.  I just link it to the form element with the “for” attribute, style it a little (I make it a block element so it’s on the line above the form input method), and I’m good to go with better markup than before.  It also helps voice browsers tell users how better to access form elements.  A link to some < label > information:

    http://htmlhelp.com/reference/html40/forms/label.html

    Copy & paste the code below to embed this comment.
  9. I’ve been looking for a way to align the <input> element to the bottom of the label <div>. The situation I’m trying to design for is when a label breaks to two lines, I’d like to allow the <input> field to appear at the bottom of label.

    Example of what I want to do:

    Field
    Label : <input here>

    What happens now is :

    Field   <input here>
    Label :

    Copy & paste the code below to embed this comment.
  10. I wanted to try your gallery code using inheritance.  So, instead of :

      div.float

    I used
      div.container>div
    unfortunately, the browser acted as if the container div was empty.  Even the spacer fix wouldn’t work.  As a matter of fact, it only worked if I made spacer into a instead of a <div>.  Does anyone know why??

    Copy & paste the code below to embed this comment.
  11. 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

    Copy & paste the code below to embed this comment.
  12. 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?

    Copy & paste the code below to embed this comment.
  13. your tip made my migraine go away.  thanks!

    Copy & paste the code below to embed this comment.
  14. 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!

    Copy & paste the code below to embed this comment.
  15. I floated the <dt>‘s left.  This lined up the label and the input on the same line.

    Copy & paste the code below to embed this comment.
  16. 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.
  17. 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.

    Copy & paste the code below to embed this comment.
  18. 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.

    Copy & paste the code below to embed this comment.
  19. 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.
  20. 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?

    Copy & paste the code below to embed this comment.
  21. Exactly what I needed. Three strikes in one article. Thank you!

    Michael

    Copy & paste the code below to embed this comment.
  22. Thank you so much for this article.  I especially appreciated the inclusion of so many concrete examples.

    Copy & paste the code below to embed this comment.