html css wrapper div not working
i have the following web page layout.. What im failing to understand is why the content div is displaying outside of its parent wrapper div on the right hand side..
Code as follows and thanks for any help..
@charset "utf-8"; /* CSS Document */
* { margin: 0; padding: 0; }
html, body { height: 100%; }
body { padding-top: 10px; background: url(../images/background.jpg) no-repeat center top;; }
div#wrapper { margin: auto; height: auto; width: 978px; min-width: 978px; min-height: 100%; margin: 0 auto -4em; }
div#header { height: 196px; }
#navigation { list-style: none; margin: 0; padding: 0; height: 69px; }
#navigation li { float: right; }
#navigation li a { display: block; width: 140px; text-align: center; color: red; font-size: 120%; height: 69px; }
#navigation li a:hover { background:url(../images/menu_red_bg.jpg);
color: yellow; }
div#content { width: 978px; background-color:#39F; margin-top: 80px;
overflow:auto; padding-bottom: 150px; padding-left: 50px; padding-right: 50px; }
div#footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear: both; padding: 5px; }
.leftCol { float: left; }
.rightCol { float: right; }
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper">
<div id="header">Header</div> <div id="menu">
<ul id="navigation">
<li><a href="">Contact Us</a></li>
<li><a href="">Recommends</a></li>
<li><a href="">Todays Travel Deals</a></li>
<li><a href="">Home</a></li>
</ul> </div>
<div id="content">
<div class="leftCol">
<h2>Who we are...</h2>
<P>
Enim ad minim veniam, quis nostrud e开发者_开发百科xerci tation
ullamcorper suscipit nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in in
vulputate velit esse molestie consequat.
Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim
placerat facer possim assum. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit.
</P>
</div>
<div class="rightCol">
<h2>Who we are...</h2>
<P>
Enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in in
vulputate velit esse molestie consequat.
Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim
placerat facer possim assum. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit.
</P>
</div>
<center><img src="images/dealoftheday.jpg" width="800" height="285" alt="Deal of the Day" /></center> </div> </div> <div id="footer"> <hr /> <img src="images/abta_logo.gif" width="171" height="74" alt="ABTA Logo" />
<img src="images/worldchoice.gif" width="254" height="83" alt="World Choice Logo" /> </div> </body> </html>
Put one more div to the wrapper after the two floating elements (.leftCol, .rightCol), and set it to clear: both;.
加载中,请稍侯......
精彩评论