Problema divuri cu float

Sunt nou pe acest forum si va salut pe toti cu mult respect.

Problema mea am cautat-o pe acest forum si mai sunt decat 2 topicuri cu acceasi tema dar cred eu, cu problema diferita la mine...
Vreau sa creez 2 divuri in continutul paginii unul langa celalalt folosind float : left si un width de 900px. Ambele divuri apartin in CSS astfel :
.wrapper .main_container #div1left / #div2right. Problema este ca atunci cand le dau float la cele doua ID-uri imi ies pur si simplu din ambele clase, ca si cum nu ar mai apartine de .main_container... si automat trebuie sa dau bordura/bg, bla bla... atributele astea dandu-le in prealabil la ambele clase...

Daca n-ati inteles nimic o sa pun codul mai jos si HTML si CSS... poate va convingeti

HTML :

<div class="wrapper">
	<div class="banner">
		
		<div id="logo">
		<img src="images/imagini_noi/sigla_store.jpg" alt="Store Exim Romania" />
		</div>
		<div id="flash">
		</div>
		<div id="certificate">
		<img src="images/imagini_noi/iso9001.jpg" alt="Iso 9001" />
		<img src="images/imagini_noi/iqnet.jpg" alt="IqNET" />
		</div>
		
	</div><!--end banner-->
	
	<div id="meniu">
	</div><!--end meniu-->
	
	<div class="main_container">
		<div id="div1left">
		</div>
		
		<div id="div2right">
		
		</div>
	</div>
	
</div><!--end wrapper-->

CSS:

.wrapper {
	margin: auto;
	height: auto;
	width: 900px;
	border: 1px solid #000;
	background-color: #FFF;
}

.wrapper .banner #logo {
	float: left;
	height: auto;
	width: 300px;
}

.wrapper .banner #flash {
	float: left;
	height: 100px;
	width: 350px;
}
.wrapper .banner #certificate {
	float: left;
	height: 100px;
	width: 250px;
}
.wrapper #meniu {
	height: 35px;
}
.wrapper .banner {
	margin: auto;
	height: 105px;
	width: 900px;
}
.wrapper .main_container {
	margin: auto;
	width: 900px;
}
.wrapper .main_container #div1left {
	float: left;
	width: 500px;
}
.wrapper .main_container #div2right {
	float: left;
	width: 400px;
}

Ideea este ca vreau ca div1left sa fie de 500px si right de 400px , ambele insumand width-ul wrapper-ului adica de 900px.... practic vreau 2 coloane, dar nu vreau sa iasa din ambele clase ca asa isi pierd din atributele care le-am definit in wrapper si main_container ( border, bg..) fara sa mai fiu nevoit sa le specific si la aceste divuri... Daca dau la toate div-urile float:left atunci e ok, main_container inghite divurile si wrapper-ul la fel, dar vreau sit-ul meu sa fie centrat. Si nu vreau sa specific inaltimea , vreau sa merg doar pe auto...

Sper ca am fost destul de explicit... Va salut, stima si numai bine !

 cretzu_2488, on May 12 2009, 10:41, said:

Problema ta este alta, nu ce ai descris acolo. Mi-a luat ceva timp sa inteleg ce vrei... A trebuit sa construiesc pagina sa vad in browser ce si cum.
Deci: Tu vrei ca border-ul negru si background-ul de la wrapper sa se intinda odata cu cele doua coloane div1left si div2right. Banuiesc ca despre asta e vorba.

Problema ta este ca cele doua div-uri au float, pe cind ascendentii lor (wrapper si main_container) nu au. Trebuie sa bagi la cap ca un container cu float este scos din flow-ul normal a documentului si parintele lor nu poate sa se extinda ca sa il cuprinda. Pentru a remedia asta, ori mai faci un div in jurul lor, si care sa aibe float, latimea de 900px , border si background. In felul asta obtii ce vrei.

Soluitia mai eleganta este sa fortezi un clear:both dupa cele doua div-uri cu float. Asta se obtine daca parintele lor (main_container) are niste definitii mai speciale (cauta in google 'clearfix css', ca sa intelegi mai bine). Eu iti scriu aici codul de care ai nevoie ca sa functioneze cum vrei, dar du-te si cauta in google ce ti-am scris, ca sa si intelegi de ce.

Ca sa functioneze codul asta, adauga clasa .clearfix la .main_container. Asa o sa ai <div class="main_container clearfix">
As fi putut sa definesc .maincontent, insa .clearfix mai poate fi refolosit in site, pe cind .maincontent nu.

In plus, poate resetezi si tu margin si padding * {margin:0;padding:0}, ca sa fii consistent in browsere.

Iata codul css:

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix{
	display: inline-block;
}
 
html[xmlns] .clearfix{
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

Edited by Jumping Jack, 12 May 2009 - 13:31.

gata am rezolvat, imi pare rau ca nu am fost destul de explicit dar ma bucur ca m-ai ajutat si ai inteles problema mea.

am facut ceva mai simplu, am cautat cum ai zis si am aplicat in div-ul parinte (main_container) in CSS clear:both si overflow:hidden si asta a rezolvat tot...

Multumesc mult, puteti inchide topicul.