...

View Full Version : Problem with div placement



yankeeschick
07-08-2008, 09:40 PM
I have 3 divs next to each other - I used the "float:left" - and I'm trying to put one underneath the three, but it is floating to the top. Here's the pic (I do not have a URL because it's not live yet):
http://yankees-chick.com/messedup.gif

behind the "hot buys" and the box next to it you can see an image hiding. I want that one to be underneath the extraextra/topwholesalers/calendar boxes.

Here is the css:




.wrapper_hotbuys {
float:left;
width:507px;
}

.hotbuys_top {
width:507px;
height:48px;
background-image: url(tthome-images/hotbuys_top.gif);
background-repeat:no-repeat;
}

.hotbuys_middle {
width:504px;
height:172px;
background-image: url(tthome-images/hotbuys_middle.gif);
background-repeat:repeat;
}

.hotbuys_bottom {
width:504px;
height:44px;
background-image: url(tthome-images/hotbuys_bottom.gif);
background-repeat:no-repeat;
}

.wrapper_farright {
float:left;
width:256px;
}

.farright {
width:256px;
height:263px;
background-image: url(tthome-images/farright.gif);
background-repeat:no-repeat;
}



.wrapper_extra {
float:left;
width:348px;
padding-top:10px;
}

.extra_top {
width:348px;
height:55px;
background-image: url(tthome-images/extra_top.gif);
background-repeat:no-repeat;
}

.extra_middle {
width:348px;
background-image: url(tthome-images/extra_middle.gif);
background-repeat:repeat;
}

.extra_bottom {
width:348px;
height:20px;
background-image: url(tthome-images/extra_bottom.gif);
background-repeat:no-repeat;
}

.category4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000066;
border: 0px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
padding-bottom:3px;

}

.wrapper_topwholesalers {
float:left;
width:216px;
padding-top:10px;
}

.topwholesalers_top {
width:216px;
height:35px;
background-image: url(tthome-images/topwholesalers_top.gif);
background-repeat:no-repeat;
}

.topwholesalers_middle {
width:216px;
background-image: url(tthome-images/topwholesalers_middle.gif);
background-repeat:repeat;
}

.topwholesalers_bottom {
width:216px;
height:10px;
background-image: url(tthome-images/topwholesalers_bottom.gif);
background-repeat:no-repeat;
}


.wrapper_calendar {
float:left;
width:203px;
padding-top:10px;
}

.calendar_top {
width:203px;
height:34px;
background-image: url(tthome-images/calendar_top.gif);
background-repeat:no-repeat;
}

.calendar_middle {
width:203px;
background-image: url(tthome-images/calendar_middle.gif);
background-repeat:repeat;
}

.calendar_bottom {
width:203px;
height:18px;
background-image: url(tthome-images/calendar_bottom.gif);
background-repeat:no-repeat;
}

.wrapper_ttselect {
width:730px;
padding-left:20px;
}

.ttselect {
width:730px;
height:144px;
background-image: url(tthome-images/tt_select.gif);
background-repeat:no-repeat;
}

And the HTML:

<div class="wrapper_hotbuys">
<div class="hotbuys_top"></div>
<div class="hotbuys_middle">

</div>
<div class="hotbuys_bottom"><p class="category2">&nbsp;&nbsp;<a href=""><img src="tthome-images/one.gif"></a>&nbsp;&nbsp;<a href=""><img src="tthome-images/two.gif"></a>&nbsp;&nbsp;<a href=""><img src="tthome-images/three.gif"></a>&nbsp;&nbsp;<a href=""><img src="tthome-images/four.gif"></a>&nbsp;&nbsp;<a href=""><img src="tthome-images/five.gif"></a>&nbsp;&nbsp;&nbsp;<a href=""><img src="tthome-images/back.gif"></a>&nbsp;<a href=""><img src="tthome-images/big_triangle.gif"></a>&nbsp;<a href=""><img src="tthome-images/next.gif"></a></p></div>
</div>

<div class="wrapper_farright">

<div class="farright">
<p class="ads" align="center">
<img src="tthome-images/rgriley3.gif"><br><br>
<img src="tthome-images/wholesaleclothing2.gif"><br><br>
<img src="tthome-images/rgriley4.gif"><br><br></p>
</div>

</div>


<br>
<div class="wrapper_extra">
<div class="extra_top"></div>
<div class="extra_middle">
<p class="category4">test test<br>
test test<br>
test test<br>
test test</p>
</div>
<div class="extra_bottom"><p class="category4" align="right"><a href="#">more Wholesale News >></a></p></div>
</div>


<div class="wrapper_topwholesalers">
<div class="topwholesalers_top"></div>
<div class="topwholesalers_middle">
<p class="category4">test test test test test test test test test<br>
test test test test test test<br>
test test test test test test<br>
test test test test test test test test</p></div>
<div class="topwholesalers_bottom"></div>
</div>

<div class="wrapper_calendar">
<div class="calendar_top"></div>
<div class="calendar_middle"><p class="calendar"><img src="tthome-images/calendar.gif"><br>
<b>April 8, 2008</b></p>
</div>
<div class="calendar_bottom"></div>
</div>

<br>
<div class="wrapper_ttselect">
<div class="ttselect"><p class="category4">test</p></div>

</div>

jcdevelopment
07-08-2008, 09:46 PM
put this in the box that contains it




clear:both;


does that work?

yankeeschick
07-08-2008, 09:50 PM
yes - thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum