treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

I've got a floating issue.

  • brianatlarge
    Permalink to comment #
    Website: http://www.studentseatfree.com/brian

    I'm having an issue with getting some stuff floated correctly. The blue box with the red border should be right under the navbar and to the left of the rectangle ad. I've tried several different methods for clearing my float but I can never get it to go up past the rectangle ad. It's so simple, I just can't figure it out!

    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>
    	<title>Students Eat Free - Exclusive Discounts</title>
    	<meta http-equiv=\"Content-type\" content=\"text/html; charset=UTF-8\"/>
    	<link rel=\"stylesheet\" href=\"sef_style.css\" type=\"text/css\" media=\"screen\"/>
    	<link rel=\"icon\" href=\"favicon.ico\" type=\"image/x-icon\"/>
    </head>
    	<body>
    	<!--Copyright 2008 StuckPixel Studio LLC & Jaree Marketing LLC-->
    		<div id=\"topbar\">
    			<div id=\"sort-area\">
    				Sort by: <select name=\"sort_type\">
    					<option value=\"restaurant_name selected\">Restaurant Name</option>
    					<option value=\"restaurant_type\">Restaurant Type</option>
    					<option value=\"discount_type\">Discount Type</option>
    				</select>
    				<input type=\"submit\" value=\"Sort\"/>
    			</div>
    			<div id=\"search-area\">
    				<input type=\"text\" name=\"search_query\" value=\"<?php echo stripslashes($_GET['search_query']); ?>\"/>
    				<input type=\"submit\" value=\"Search\"/>
    			</div>
    			<div style=\"clear:both\"></div>
    		</div>
    		<div id=\"side-background\">
    			<div id=\"wrapper\">
    				<div id=\"content\">
    					<img id=\"logo\" src=\"images/sef_logo.png\" alt=\"logo\"/>
    					<a href=\"\">
    						<img id=\"leaderboard\" src=\"images/leaderboard.jpg\" alt=\"leaderboard\"/>
    					</a>
    					<div style=\"clear:both\"></div>
    					
    					<!-- Navigation Bar-->
    					<ul id=\"nav\">
    						<li id=\"exclusive_button\"><a href=\"#\">Exclusive Coupons</a></li>
    						<li id=\"regular_button\"><a href=\"#\">Regular Discounts</a></li>
    						<li id=\"advertise_button\"><a href=\"#\">Advertise</a></li>
    						<li id=\"contact_button\"><a href=\"#\">Contact</a></li>
    					</ul>
    					<!-- END Navigation Bar-->
    					
    					<a href=\"\"><img id=\"rectanglead\" src=\"images/rectangle.jpg\" alt=\"rectangle\"/></a><div style=\"clear:both\"></div>
    					<a href=\"\"><img id=\"skyscraperad\" src=\"images/skyscraper.jpg\" alt=\"skyscraper\"/></a>
    					
    					<div id=\"listings\">
    						<div class=\"coupon\">
    							<div class=\"couponlogo\"><img src=\"images/po-boy-express.jpg\" alt=\"logo\"/></div>
    							<div class=\"restname\">Jimbo's Pizza Shop</div>
    							<div class=\"description\">Free Chick-fil-A Chicken Sandwich with purchase of med Waffle Fries and med Coke.</div>
    						</div>
    					</div>		
    				</div>
    			</div>
    			<br/>
    			<div id=\"footer\">
         			<div id=\"copy\">
            			<div id=\"copy-list\">
         					<ul>
    							<li>Copyright &copy; 2008 StuckPixel Studio, LLC. and Jaree Marketing, LLC. &nbsp;&nbsp;&nbsp;All Rights Reserved.</li>
    							<li><a href=\"index.php\">Exclusive Deals</a></li>
    							<li><a href=\"search.php\">Regular Discounts</a></li>
    							<li><a href=\"advertise.php\">Advertise</a></li>
    							<li><a href=\"Contact.php\">Contact</a></li>
    						</ul>
    					</div>
    				</div>
            	 </div>
    		</div>
    	</body>
    </html>


    CSS:

    * { margin: 0; padding: 0; }

    body {height: 100%; font-family:Helvetica Arial, Verdana, Courier;}

    #wrapper {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -25px; /* the bottom margin is the negative value of the footer's height */ }

    #side-background {background-image:url(images/side-background.png); background-position:bottom left; background-repeat:no-repeat; min-height:1001px; height:1001px; padding-top:10px;}
    #content {margin:0 auto; width:1000px;}
    #topbar {background-image: url(images/top_green.jpg); background-repeat:repeat-x; min-height:74px; height:74px;}

    #logo {float:left; display:inline;}
    #leaderboard {margin-top:25px;}

    #sort-area {width:300px; margin-left: 10px; float:left; display:inline; margin-top:15px;}
    #search-area {float:right; width:220px; display:inline; margin-top:15px;}


    /*Navigation Bar*/

    ul#nav {list-style-type: none; overflow: hidden; width:742px; margin:0 auto; cursor:pointer;}

    #exclusive_button {background-image:url(images/navbar.jpg); width:223px; height:37px; min-height:37px; }
    #exclusive_button:hover {background-image:url(images/navbar.jpg); width:223px; height:37px; min-height:37px; background-position:0px 37px;}

    #regular_button {background-image:url(images/navbar.jpg); width:232px; height:37px; min-height:37px; background-position: -223px 0px; margin-left: 223px; margin-top: -37px;}
    #regular_button:hover {background-image:url(images/navbar.jpg); width:232px; height:37px; min-height:37px; background-position: -223px 37px; margin-left: 223px; margin-top: -37px;}

    #advertise_button {background-image:url(images/navbar.jpg); width:158px; height:37px; min-height:37px; background-position: -455px 0px; margin-left: 455px; margin-top: -37px;}
    #advertise_button:hover {background-image:url(images/navbar.jpg); width:158px; height:37px; min-height:37px; background-position: -455px 37px; margin-left: 455px; margin-top: -37px;}

    #contact_button {background-image:url(images/navbar.jpg); width:129px; height:37px; min-height:37px; background-position: -613px 0px; margin-left: 613px; margin-top: -37px;}
    #contact_button:hover {background-image:url(images/navbar.jpg); width:129px; height:37px; min-height:37px; background-position: -613px 37px; margin-left: 613px; margin-top: -37px;}

    ul#nav li a {position: absolute; text-indent: -9000px;}

    /*END Navigation Bar*/

    #rectanglead {float:right; margin-top:10px; width:300px;}
    #skyscraperad {float:right; margin:10px 70px 0 0; width:160px;}


    /*Listings*/

    #listings {background-color: red; width:680px; margin:10px 0 0; padding:5px;}
    .coupon {background-color: blue; width:680px;}
    .couponlogo {float:left; display:inline; width:100px; height:100px; min-height:100px; vertical-align: middle;}
    .restname {}
    .description {}


    /*END Listings*/


    /*Footer*/

    #footer {height: 25px; background-color:#daf2c8;}

    #copy-list {text-align: center; font-size: 12px; color: #781a0c; margin-top:10px;}
    #copy-list ul, #copy-list li {display: inline; margin: 0; padding: 10px 10px 0 5px;}
    #copy-list a {color: #781a0c; margin-top:10px;}

    /*END Footer*/


    img {border:0}


    Thanks!
  • chriscoyier
    Permalink to comment #
    I think clearing the float is your problem, you should clear it AFTER the "listings" not before. Since you cleared it before, it's pushing it down past the last floated object.
Add a Comment