SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard LiquidReflex's Avatar
    Join Date
    Aug 2003
    Location
    Minnesota
    Posts
    1,861
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Clearing each div row (product display)

    I'm still getting used to CSS when it comes to e-commerce / product display websites and am having an issue with one I'm working on right now.

    Basically I want to display 3 products in each row and stack the rows on top of each other. This works great for the most part, but the moment one of the products / descriptions is lower than another it causes the div below it to shift right (because it hasn't cleared).

    I've tried setting "clear: left" but doing so will cause it to clear the left column (which I obviously don't want to happen).

    Example of the problem
    Here is the CSS file

    Perhaps I'm not setting up the div's properly, or there's a better way to stack them ... I don't know. I've always used tables for this purpose but I'm trying to get away from them as much as possible.

    Any help or suggestions would be greatly appreciated.

    Thanks!
    Kevin Hauge : Modern Leaf Design : Follow Us on Facebook
    Client Axis v.08 - client / project management script

  2. #2
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not entirely certain the exact result you're trying to get. But have you tried "clear:both;" ? I guess there are a couple of ways to fix the problem. I believe the "correct" way to do it would be to set the #nav and the #series divs to "float:left;" and set the margin to 0 (I think you had the margin set to 215px on the left side for #series). After you do that if you add "clear:both;" to the .series_list class it should all pop into place. Remember that IE handles margin and padding differently than other standard compliant browsers, so check and make sure it still looks ok.

    Hope this helps.
    -Leo
    Graphic Artist and Web Developer
    AYCOM Consulting

  3. #3
    SitePoint Wizard LiquidReflex's Avatar
    Join Date
    Aug 2003
    Location
    Minnesota
    Posts
    1,861
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That did the trick actually. I just added a float: left to the leftnav and got rid of the margin (guess the way I had it wasn't the "correct" way). Once I changed that, I could add the clear: both and it would stay on the right side of the nav (instead of below it).

    Thanks again!
    Kevin Hauge : Modern Leaf Design : Follow Us on Facebook
    Client Axis v.08 - client / project management script


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •