Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Help: DIV Issue

  1. #1
    New Coder
    Join Date
    Jul 2004
    Location
    Utah, USA
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help: DIV Issue

    Could someone please look at this page and tell me by the two product divs are overlapping. I have placed the second after the first in the code, but for some reason the second one is flowing into the first. Thanks.

    http://www.rapiddeploymentinc.com/products.html

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Clearing

    Try clearing the product div: "clear: both;".
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Jul 2004
    Location
    Utah, USA
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ronaldb66
    Try clearing the product div: "clear: both;".
    Thanks for the reply, but that made things worse. It pushed both items down the page.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    I guess the second div still tries to float around the first image.
    Insert another div after each text with class="clear" (or what name you like) and write
    Code:
    .clear {clear: left;}
    into the CSS.

  • #5
    New Coder
    Join Date
    Jul 2004
    Location
    Utah, USA
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK, I added that class and the divs. I'm getting closer, but it's still not working correctly. The second product is further down the page than it's suppose to be.

  • #6
    New Coder
    Join Date
    Sep 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I took your code:
    Code:
        <div class="bodyContent">
          <h3>Our Products </h3>
          <div class="product"><img src="images/bag_001.jpg" alt="" width="175" height="131" class="productImage" />All in one bag 24” long, 12” in height high, and approximately 6” wide (when storing a standard patrol rifle and 1” ceramic plates)</div>
          <div class="clearProduct"></div>
          <div class="product"><img src="images/bag_001.jpg" alt="" width="175" height="131" class="productImage" />All in one bag 24” long, 12” in height high, and approximately 6” wide (when storing a standard patrol rifle and 1” ceramic plates)</div>
        </div>
    and changed the <div class="clearProduct"></div> to two simple breaks with a non breaking space in between. see what you think
    Code:
        <div class="bodyContent">
          <h3>Our Products </h3>
          <div class="product"><img src="images/bag_001.jpg" alt="testbag" width="175" height="131" class="productImage" />All in one bag 24? long, 12? in height high, and approximately 6? wide (when storing a standard patrol rifle and 1? ceramic plates)</div>
          <br />&nbsp;<br />
          <div class="product"><img src="images/bag_001.jpg" alt="testbag" width="175" height="131" class="productImage" />All in one bag 24? long, 12? in height high, and approximately 6? wide (when storing a standard patrol rifle and 1? ceramic plates)</div>
        </div>
    Last edited by friscofrankie; 01-24-2006 at 08:35 PM.

  • #7
    New Coder
    Join Date
    Jul 2004
    Location
    Utah, USA
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Those two breaks actually put me back where I started, basically. Thanks anyway. I did try putting more than two items and everything from the second on seems to look right. It's just the big gap between the first and second I can't figure out.
    Last edited by silverskymedia; 01-25-2006 at 02:14 AM.


  •  

    Posting Permissions

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