...

View Full Version : Floating away...



BoldUlysses
05-13-2008, 09:03 PM
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:


<!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:


* {
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;
}

logictrap
05-13-2008, 09:31 PM
Try this:
.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;
}

BoldUlysses
05-13-2008, 09:45 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum