raynor009 Posted May 29, 2014 Report Share Posted May 29, 2014 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Gio33 Posted May 29, 2014 Report Share Posted May 29, 2014 position: absolute; la footerApropo, in css class se defineste cu . in fata iar id cu #, la clear ai uitat un . in fata. Quote Link to comment Share on other sites More sharing options...
raynor009 Posted May 29, 2014 Author Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Gio33 Posted May 29, 2014 Report Share Posted May 29, 2014 (edited) Scoate atunci position, pune display: inline-block; la footer, si muta-i div-ul mai sus in div-ul cu id wrapper_innerSi vezi ca trebuie asa: .clear {clear: both;} , nu display block Edited May 29, 2014 by Gio33 Quote Link to comment Share on other sites More sharing options...
raynor009 Posted May 30, 2014 Author Report Share Posted May 30, 2014 Da merge.. oarecum. Mersi mult de ajutor. Quote Link to comment Share on other sites More sharing options...
aceveve Posted May 30, 2014 Report Share Posted 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 - JSFiddleP.S. intotdeauna cu overflow:hidden folosesti position:relativeDaca ai nelamuriri da un semn. Quote Link to comment Share on other sites More sharing options...
Aripipevant Posted June 3, 2014 Report Share Posted 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 Quote Link to comment Share on other sites More sharing options...
