CODEWITHSUNDEEP
htmlcsswrapper
Lee
Lee

Reputation: 5936

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

Upvotes: 1

Views: 1745

Answers (1)

cypher
cypher

Reputation: 6992

Put one more div to the wrapper after the two floating elements (.leftCol, .rightCol), and set it to clear: both;.

Upvotes: 2

Related Questions