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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    advert banner dragging main container down!

    hello guys,

    maybe a simple fix for the pros out there but i'm just starting out and hoping for a quick simple fix for my problem, my problem is, i've semi-designed a basic layout and then i tried to add two containing advert divs on either side on my layout which are nested within the wrapper div, but when doing so, it drags my main content div below the ends of my advert div!

    here is my html source:

    Code:
    <div id="wrapper">
    		<div id="advert1">
            </div><!--advert1-->
            <div id="advert2">
            </div><!--advert2-->
    			<div id="container">
                   <div id="headercontainer">
                   			<div id="Hleft">
                            </div><!---hleft--> 
                            <div id="Hright">
                            </div><!---hright-->
                   </div><!--headercontainer-->
                   <div id="navigation">
                   </div><!--navigation-->
                   <div id="message">
                   </div><!--message-->
    			   <div id="quicklist">
    			   </div><!--quicklist-->
    			   <div id="col1">
    						   <div id="box1">
    						   </div><!--box1-->
    						   <div id="box2">
    						   </div><!--box2-->
    						   <div id="box3">
    						   </div><!--box3-->
    			   </div><!--col1-->
                   <div id="col2">
    						   <div id="box4">
    						   </div><!--box4-->
    						   <div id="box5">
    						   </div><!--box5-->
    						   <div id="box6">
    						   </div><!--box6-->
    			   </div><!--col2-->
    	
    			 </div><!---container-->
    </div><!---wrapper--->
    and my CSS..

    Code:
     * {
    	padding: 0px;
    	margin: 0px;
    }
    #wrapper {
    	height: 1200px;
    	width: 1200px;
    	background-color: brown;
    	margin: 0 auto;
    	border: 0px;
    }
    #container {
    	height: 1200px;
    	width: 940px;
    	background-color: lime;
    	margin: 0 auto;
    	border: 0px;
    }
    #headercontainer {
    	height: 120px;
    	width: 940px;
    	border: none;
    	background-color: #fff;
    }
    #Hleft {
    	float: left;
    	height: 120px;
    	width: 440px;
    	border: none;
    	background-color: pink;
    
    }
    #Hright {
    	float: right;
    	height: 120px;
    	width: 500px;
    	border: none;
    	background-color: grey;
    }
    #navigation {
    	clear: both;
    	width: 940px;
    	height: 30px;
    	border: none;
    	background-color: black;
    	margin: 0 auto;
    
    }
    #advert1 {
    	height: 600px;
    	width: 120px;
    	border: thin solid black;
    	float: left;
    }
    #advert2 {
    	height: 600px;
    	width: 120px;
    	border: thin solid black;
    	float: right;
    }
    #message {
    	height: 185px;
    	width: 400px;
    	border: none;
    	background-color: pink;
    	margin-left: 25px;
    	margin-top: 25px;
    	float: left;
    }
    #quicklist {
    	height: 185px;
    	width: 200px;
    	border: none;
    	background-color: brown;
    	float: left;
    	margin-left: 150px;
    	margin-top: 25px;
    
    }
    #col1 {
    	height: auto;
    	width: 750px;
    	border: thin solid black;
    	float: left;
    	margin-top: 25px;
    	margin-left: 25px;
    }
    #col2 {
    	height: 170px;
    	width: 750px;
    	border: thin solid black;
    	margin-top: 25px;
    	margin-left: 25px;
    	float: left;
    
    }
    
    #box1 {
    	height: 160px;
    	width: 175px;
    	border: thin solid black;
    	float: left;
    	margin-left: 25px;
    
    }
    #box2 {
    	height: 160px;
    	width: 175px;
    	border: thin solid black;
    	float: left;
    	margin-left: 25px;
    
    }
    #box3 {
    	height: 160px;
    	width: 175px;
    	border: thin solid black;
    	float: left;
    	margin-left: 25px;
    
    }
    can someone help me out here? many thanks

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    How wide is your wrapper?? 1200px right?

    How wide is your container?

    Then how wide are your Hright and Hleft divs?

    Box Model explains why this wont work.
    Teed


  •  

    Posting Permissions

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