HTML-оболочка CSS не работает - PullRequest
Новая
       16

HTML-оболочка CSS не работает

1 голос
/ 26 июля 2010

У меня есть следующий макет веб-страницы. Что я не понимаю, так это то, почему div с содержимым отображается вне его родительского div-обертки с правой стороны.

Код следующий, и спасибо за любые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>

1 Ответ

2 голосов
/ 26 июля 2010

Поместите еще один div в wrapper после двух плавающих элементов (.leftCol, .rightCol) и установите его в clear: both;.

...