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
    Join Date
    Jun 2008
    Posts
    130
    Thanks
    23
    Thanked 1 Time in 1 Post

    Problem with div placement

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


    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:
    Code:
    
    .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:
    Code:
    <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>

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    put this in the box that contains it


    Code:
    clear:both;
    does that work?

  • Users who have thanked jcdevelopment for this post:

    yankeeschick (07-08-2008)

  • #3
    Regular Coder
    Join Date
    Jun 2008
    Posts
    130
    Thanks
    23
    Thanked 1 Time in 1 Post
    yes - thank you!


  •  

    Posting Permissions

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