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 3 of 3
  1. #1
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts

    Floating away...

    How can I get my divs (with red borders for clarity) to stack beneath each other properly? In other words, how do I get the div to surround the horizontal rule beneath each picture on the right? The text and tables are floated left; the images and rules are floated right. Any ideas would be helpful. Thanks!

    Site: http://www.imageworksdisplay.com/tobacco/index.php

    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <title>ImageWorks Display | Tobacco Fixtures and Accessories | Wood Pack Fixtures</title>
    
    <link href="main.css" rel="stylesheet" type="text/css"/>
    
    <!--[if IE 6]>
    <link href="ie6.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    
    <!--[if IE]>
    <link href="ie.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    
    <script type="text/javascript" src="justify.js"></script>
    
    </head>
    
    <body>
    
    <div id="container">
      
     <div id="content">
     
     <div id="topnavunderlay">
      <img src="grey1.png" alt="topnav" title=""/>
     </div>
     
    <!-- Common Menu Start -->
     
     <div id="pulldown1">
    
      <ul>
       <li><a class="notactive">Wood Fixtures</a>
        <ul>
         <li><a href="#">Pack Fixtures</a></li>
         <li><a href="#">Carton Fixtures</a></li>
         <li><a href="#">OTP Fixtures</a></li>
        </ul>
       </li>
      </ul>
      
      <ul>
       <li><a class="notactive">Metal Fixtures</a>
        <ul>
         <li><a href="#">Pack Fixtures</a></li>
         <li><a href="#">OTP Fixtures</a></li>
        </ul>
       </li>
      </ul>
     
      <ul>
       <li><a class="notactive">Lighted Metal Fixtures</a>
        <ul>
         <li><a href="#">Pack Fixtures</a></li>
         <li><a href="#">OTP Fixtures</a></li>
        </ul>
       </li>
      </ul>
      
      <ul>
       <li><a class="notactive">Accessories</a>
        <ul>
         <li><a href="#">For Wood</a></li>
         <li><a href="#">For Metal</a></li>
         <li><a href="#">For Lighted Metal</a></li>
        </ul>
       </li>
      </ul>
    
     </div>  
    
    <!-- Common Menu End -->
    
     <div id="sideline">
     </div>
    
     <div id="logo">
      <img src="iw3.gif" alt="logo" title=""/>
     </div>
    
     <div id="cart">
    
      <div id="cartheader">
       <h3>Shopping Cart</h3>
      </div>
    
      <div id="cartitems"> Shopping cart items go here.  This box expands
      and contracts as necessary to contain the items within.  Shopping cart
      items go here.  This box expands and contracts as necessary to contain
      the items within.
      </div>
     
      <form action="#">
       <p class="submit"><input type="submit" value="Checkout"/></p>
      </form>
     
     </div>
     
    <!-- Catalog Area Start -->
     
     <div id="catalogcontainer">
      
      <h1>Wood Pack Fixtures</h1>
      
      <div class="horizontalrule"></div>
      
      <div class="catalogitem">
      
      <h2>2ft Low Profile</h2>
      
      <img class="rightjustify" src="WoodPack2ftLP.gif" alt="Wood Pack 2ft
      LP" title=""/><p>Increase the visibility of your tobacco products with
      our popular free-standing cigarette merchandisers. Cabinet can sit on
      the floor or be placed on top of your back bar counter.  The 2' Wood
      Low Profile Fixture includes (8) tobacco pusher shelves, (6) pricers
      and small and large flip signs as shown.</p>
     
      <table>
       <tr>
        <td class="tablebold">Item</td>
        <td>8002</td>
       </tr>
       <tr>
        <td class="tablebold">Item Description</td>
        <td>2' LP Wood Pack Fixture</td>
       </tr>
       <tr>
        <td class="tablebold">Number of Shelves</td>
        <td>8</td>
       </tr>
       <tr>
        <td class="tablebold">Facings per Shelf</td>
        <td>9</td>
       </tr>
       <tr>
        <td class="tablebold">Total Facings</td>
        <td>72</td>
       </tr>
       <tr>
        <td class="tablebold">Outside Dimensions</td>
        <td>H: 53.25" W: 24.25" D: 12.75"</td>
       </tr>
      </table>
      
      <div class="horizontalrule"></div>
      
      </div><div class="catalogitem">
      
      <h2>3ft Low Profile</h2>
      
      <img class="rightjustify" src="WoodPack3ftLP.gif" alt="Wood Pack 3ft
      LP" title=""/><p>Increase the visibility of your tobacco products with
      our popular free-standing cigarette merchandisers. Cabinet can sit on
      the floor or be placed on top of your back bar counter.  The 3' Wood
      Low Profile Fixture includes (8) tobacco pusher shelves, (6) pricers
      and small and large flip signs as shown.</p>
      
      <table>
       <tr>
        <td class="tablebold">Item</td>
        <td>8003</td>
       </tr>
       <tr>
        <td class="tablebold">Item Description</td>
        <td>3' LP Wood Pack Fixture</td>
       </tr>
       <tr>
        <td class="tablebold">Number of Shelves</td>
        <td>8</td>
       </tr>
       <tr>
        <td class="tablebold">Facings per Shelf</td>
        <td>14</td>
       </tr>
       <tr>
        <td class="tablebold">Total Facings</td>
        <td>112</td>
       </tr>
       <tr>
        <td class="tablebold">Outside Dimensions</td>
        <td>H: 53.25" W: 35.625" D: 12.75"</td>
       </tr>
      </table>
      
      <div class="horizontalrule"></div>
      
      </div><div class="catalogitem">
      
      <h2>4ft Low Profile</h2>
      
      <img class="rightjustify" src="WoodPack4ftLP.gif" alt="Wood Pack 4ft
      LP" title=""/><p>Increase the visibility of your tobacco products with
      our popular free-standing cigarette merchandisers. Cabinet can sit on
      the floor or be placed on top of your back bar counter.  The 3' Wood
      Low Profile Fixture includes (8) tobacco pusher shelves, (6) pricers
      and small and large flip signs as shown.</p>
      
      <table>
       <tr>
        <td class="tablebold">Item</td>
        <td>8004</td>
       </tr>
       <tr>
        <td class="tablebold">Item Description</td>
        <td>4' LP Wood Pack Fixture</td>
       </tr>
       <tr>
        <td class="tablebold">Number of Shelves</td>
        <td>8</td>
       </tr>
       <tr>
        <td class="tablebold">Facings per Shelf</td>
        <td>19</td>
       </tr>
       <tr>
        <td class="tablebold">Total Facings</td>
        <td>152</td>
       </tr>
       <tr>
        <td class="tablebold">Outside Dimensions</td>
        <td>H: 53.25" W: 47.25" D: 12.75"</td>
       </tr>
      </table>
      
      </div>
      
     </div>
     
    <!-- Catalog Area End -->
     
    </div>
    
    </div>
    
    </body>
    </html>
    Relevant CSS:

    Code:
    * { 
    	margin:0px; 
    	padding:0px; 
    	border:0px; 
    }
    
    html{
    	font-size:100%
    }
    
    body{
    	background-color:#333;
    	font-family:arial, verdana, sans-serif;
    	width:100%;
    	height:100%;
    	position:absolute;
    }
    
    #container{
    	position:absolute;
    	width:1000px;
    	left:50%;
        margin-left:-500px;
    }
    
    #container img.underlay{
    	position:absolute;
    	right:0px;
    	top:0px;
    	z-index:0;
    }
    
    #content {
    	position:absolute;
    	top:20px;
    	left:0px;
    	width:1000px;
    	height:1500px;
    	background-color:#fff;
    }
    
    /* ---- Logo ---- */
    
    #logo{
    	position:absolute;
    	top:20px;
    	margin-left:25px;
    	z-index: 2;
    }
    
    #logo img{
    	width:200px;
    	height:82px;
    }
    
    /* ---- Structural Lines ---- */
    
    #sideline{
    	position:absolute;
    	height:100%;
    	border-right:5px #333 solid;
    	left:250px;
    	top:0px;
    	z-index:1;
    }
    
    /* ---- Catalog Area ---- */
    
    #catalogcontainer{
    	position:absolute;
    	height:900px;
    	width:719px;
    /*	border:1px #666 solid; */
    	left:266px;
    	top:60px;
    }
    
    .catalogitem{
    	display:block;
    	border:1px #f00 solid;
    	margin-bottom:20px;
    }
    
    img.rightjustify{
    	float:right;
    	border:1px #666 solid;
    	margin:0 0 0 10px;
    }
    
    h1 {
    	text-align:center;
    }
    
    h2 {
    	margin:10px 0 10px 0;
    }
    
    .horizontalrule {
    	border-top:1px #666 solid;
    	width:100%;
    	float:right;
    	margin:10px 0 10px 0;
    }
    
    table {
    	margin:10px 0 10px 0;
    	border:1px #666 solid;
    	padding:10px;
    }
    
    td {
    	padding:0 10px 0 0;
    }
    
    td.tablebold {
    	font-weight:900;
    }

  • #2
    Regular Coder logictrap's Avatar
    Join Date
    Apr 2008
    Posts
    155
    Thanks
    11
    Thanked 3 Times in 3 Posts
    Try this:
    Code:
    .horizontalrule {
        border-top:1px #666 solid;
        width:100&#37;;
        float: none;
        margin-top: 10px;
        margin-right: 0;
        margin-bottom: 10px;
        margin-left: 0;
        clear: both;
    }

    Which came first - the chicken or the egg? The egg... [ticket closed]
    If a tree falls... does it make a sound? Yes.............. [ticket closed]

  • Users who have thanked logictrap for this post:

    BoldUlysses (05-13-2008)

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Almost! The horizontal rule was up against the bottom of the right-floated image (which the margin setting didn't affect), so I gave the rule a height (20px) and set the border to the bottom to space it off the image.

    Thanks!


  •  

    Posting Permissions

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