html enveloppe css div Je n'ai pas travailler

la mise en page web suivante .. Quelle im ne pas comprendre est pourquoi le div de contenu affiche en dehors de son emballage parent div sur le côté droit ..html enveloppe css div Je n'ai pas travailler

code comme suit et merci pour toute aide ..

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

Source

2010-07-25 Lee

Mettez un plus div au wrapper après que les deux éléments flottants (.leftCol, .rightCol) et définissez-le sur clear: both;.

Source

2010-07-25 22:45:53 cypher

Salut là, cela n'a pas affecté: s .. Je pense que le problème réside avec le remplissage sur le contenu div .. Le chevauchement semble être égal à celui de gauche + padding droite .. J'étais sous l'hypothèse le remplissage ne modifiera pas les dimensions d'un élément. – Lee

Bon alors, commencez par valider votre code. Par exemple, dans XHTML 1.0, il n'y a pas d'élément central. – cypher

html enveloppe css div Je n'ai pas travailler

Répondre

Questions connexes