clear: both; nu merge in FireFox

raynor009 · May 29, 2014

HTML:

<!DOCTYPE html>

<!-- 

*Div pagina: latime=465 inaltime=455
-->

<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>The Wasteland 2014</title>
 </head> 

 <body>
     <div id="wrapper" align="center">
         <div id="wrapper_inner">
             <div id="headerContainer"></div>
             <div id="bodyContainer">
              <div id="leftColumn"></div>
              <div id="rightColumn"></div>
               <div class="clear"></div>
             </div>
             <div id="footerContainer"></div>
         </div>
        </div>         
 </body>

 </html>

CSS

 body{
    margin: 0px;
    padding: 0px;
    }

clear{
display: block;
} 

 #wrapper{
    width: 100%;
    }

 #wrapper_inner{
     width:800px;
     height:200px;
}

 #headerContainer{
     idth:800px;
     height:200px;
     background-color: red;
}

 #bodyContainer{
     width:800px;
     height:200px;
     background-color: grey;
}

 #leftColumn{
width: 395px;
height: 400px;
float: left;
background-color: green;
}

 #rightColumn{
width: 395px;
height: 400px;
float: right;
background-color: orange;
}

 #footerContainer{
     width:800px;
     height:200px;
     background-color: black;
}



/*width: 465px; 
height: 455px;*/

Cum as putea sa repar problema?

Practic footerContainer este suprapus de leftColumn si rightColumn cand trebuia sa fie sub ele si nu stiu ce sa fac :/

Edited May 29, 2014 by raynor009

Gio33 · May 29, 2014

position: absolute; la footer

Apropo, in css class se defineste cu . in fata iar id cu #, la clear ai uitat un . in fata.

raynor009 · May 29, 2014

Mersi mult de raspuns. Rezultatul final trebuie sa fie asta

Acuma problema ii ca footer suprapune alea doua column. Stiam ca trebuia sa pun punct dar eu am urmat tutorialul la sange :)) si nu mi-am dat seama.

Gio33 · May 29, 2014

Scoate atunci position, pune display: inline-block; la footer, si muta-i div-ul mai sus in div-ul cu id wrapper_inner

Si vezi ca trebuie asa: .clear {clear: both;} , nu display block

Edited May 29, 2014 by Gio33

raynor009 · May 30, 2014

Da merge.. oarecum. Mersi mult de ajutor.

aceveve · May 30, 2014

O metoda mai buna ar fi sa nu mai folosesti clear: both. Foloseste "overflow: hidden" pentru containerul parinte pentru care vroiai sa faci clear: both. Uite codul modificat de mine: Edit fiddle - JSFiddle

P.S. intotdeauna cu overflow:hidden folosesti position:relative

Daca ai nelamuriri da un semn.

Aripipevant · June 3, 2014

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

Si adauga ca semn de carte: A new micro clearfix hack – Nicolas Gallagher

Sign In

clear: both; nu merge in FireFox

Recommended Posts

raynor009

Gio33

raynor009

Gio33

raynor009

aceveve

Aripipevant

Join the conversation

Browse

Activity

Pages