html css wrapper div not working_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-08 15:02 出处：网络

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

相关专题：css wrapper

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;.