CSS - două coloane de lățime egală

Am un layout pe trei coloane: col1, col2, col3. În coloana 2, aș vrea să prezint elementele pe două coloane de lățime identică și mai multe rânduri. Conținutul îl iau dinamic dintr-o bază de date și nu am cum să știu dinainte câte coloane o să am. CSS-ul actual arată așa:

body {
	margin: 0;
	padding: 0;
	font-family: verdana, sans-serif;
	font-size:80%;
	line-height: 120%;
	background:  #fff;
	color: #000;
	}
#header {
	margin: 0;
	padding: 2em 4em;
	}
#middle {
	margin: 0;
	padding: 0;
	}
#col1 {
	float: left;
	width: 20%;
	}
#col2 {
	float: left;
	width: 60%;
	}
#col3 {
	float: left;
	width: 20%;
	}	
[color="#FF0000"]#col4
{
	float: left;
	width: 50%;
	}[/color]

#menubox {
	float: left;
	width: 100%;
	margin-bottom: 1em;
	background: silver;
	}
	
.box {
	margin: 0 0.2em 0.2em 0.2em;
	padding: 1em 1em 1em 1em;
	background: #fff;
	}

.par {
	margin: 0 0.2em 0.2em 0.2em;
	padding: 1em 1em 1em 1em;
	background: #eeeeee;
	border: 1px dotted #cccccc;
	font: .8em/1.2em verdana, sans-serif;
	}
.impar {
	margin: 0 0.2em 0.2em 0.2em;
	padding: 1em 1em 1em 1em;
	background: #cccccc;
	border: 1px dotted #eeeeee;
	font: .8em/1.2em verdana, sans-serif;
	}
.admin{
	margin: 0 0.2em 0.2em 0.2em;
	padding: 1em 1em 1em 1em;
	background: #ffffff;
	border: 2px solid #ffcc00;
	font: .8em/1.2em verdana, sans-serif;
	}
#col1 .box {
	margin-left: 4em;
	padding: 0em 0em 0em 0em;
background-color: silver;
	}
#col1 ul {
	margin: 0;
	padding-left: 0.3em;
	list-style: none;
}
 #col1 li {
	display: inline;
}
#col2 ul {
	margin: 0;
	padding-left: 0.3em;
	list-style: none;}
 #col2 li {
	margin: 0px 0px 0px 10px;
	list-style: square inside;
}
#col3 .box {
	margin-right: 4em;
	}

h1, h2, h3, h4, h5, p, ul {
	margin: 0;
	padding: 0em 0.1em 0.5em 0.1em;
	}
p, ul {
	font: .9em/1.5em verdana, sans-serif;
	}
pre {
	margin: 0em 2em 1em 2em;
	padding: .5em 1em;
	font: .9em/1.2em monospace;
	}
ul {
	list-style: none;
	}
#col1 a {
	background-color: silver;
	border-bottom: 1px solid #393939;
	color: #fff;
	display: block;
	margin: 0.1em;
	padding: 0px 0px;
	text-decoration: none;
}

#col1  a:hover {
	background-color: #DCDCDC;
	color: #fff;
} 

#col1 active a {
	background: #000000;
	color: #FFFFFF;
}
.clear {
	clear: both;
	font-size: 1px;
	line-height: 0;
	margin: 0;
	padding: 0;
	}
#footerwrap {
	margin: 2em 0;
	padding: 0 7em;
	}
#footer {
	font-size: .9em;
	margin: 0;
	padding: .3em 1em;
	}
.box, pre, #footer {
	border: 1px dotted #aaa;
	}

/* Begin CSS Drop Down Menu */
#menuh-container
	{
	position: relative;		
	}

#menuh
	{
	font-family: verdana, sans-serif;
	width:100%;
	float:left;
	margin:0em 0em;
	margin-top: 0;
	margin-right: 4em;
	}
		
#menuh a
	{
	text-align: left;
	display:block;
	white-space:nowrap;
	margin:0;
	padding: 0.3em;
	}
	
#menuh a, #menuh a:visited	/* menu at rest */
	{
	color: white;
	background-color: silver;
	text-decoration:none;
	}
	
#menuh a:hover	/* menu at mouse-over  */
	{
	color: white;
	background-color: #DCDCDC;
	}	
			
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	background-image: url(navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}
#menuh a.top_parent_simple, #menuh a.top_parent_simple:hover  /* attaches down-arrow to all top-parents */
	{
	}
	
#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
	{
	background-image: url(nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}

#menuh ul
	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:9em;	/* width of all menu boxes */
	}

#menuh li
	{
	position:relative;
	min-height: 1px; 	/* Sophie Dennis contribution for IE7 */
	vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
	}

#menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	}

#menuh ul ul ul
	{
	top:0;
	left:100%;
	}

div#menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

Am încercat să pun col4, așa cum este mai sus, dar nu mi le distribuie, ci le pune tot una sub alta pe dimensiunea #col2.

Layoutul vine cam așa:

<div id="content">
<div id="header">
	conținutul headerului
<div id ="menubox">
	<div id="menuh-container">
		<div id="menuh">
			meniul
	</div> 	<!-- end the menuh-container div -->  
</div>	<!-- end the menuh div --> 
</div>	<!-- end the menubox div --> 
</div> <!-- end the header div --> 


<div id="middle"> <!-- starts middle div --> 
<div id="col1">

<!-- This is the navigational box-->
		<div class="box">
	
</div> <!-- end the navigational box div --> 
</div> <!-- end the left column div --> 
	
<div id="col2">
<div class="box">
<div id="Col4"><div class="box">
conținut coloană 1 rând1
</div></div>
<div id="Col4"><div class="box">
conținut coloană 2 rând1
</div></div>

<div id="Col4"><div class="box">
conținut coloană 1 rând n
</div></div>
<div id="Col4"><div class="box">
conținut coloană 2 rând n
</div></div>
		</div> <!-- end column 2 box div --> 
	</div> <!-- end col 2 div --> 
	<div id="col3">
<div class="box">
conținut coloană 3
</div>
		<div class="clear"><!-- clear the mess so we have a nice footer --></div> 
</div> <!-- end the middle div --> 


<div id="footerwrap">
	<div id="footer">
	</div> <!-- END footer -->
</div> <!-- END footerwrap -->
</div> <!-- END content -->

Cum reușesc să fac #col4 să se așeze în forma două coloane/n rânduri? Dacă numărul de boxuri este impar, atunci creez din cod unul dummy ca să iasă egale.

Edited by zaboss, 28 January 2008 - 11:28.

cred ca mai degraba dai un url.... mi-e foarte greu sa urmaresc ce anume vrei sa faci tu acolo si nu prea am timp....

in principiu ce vrei tu se face cam asa: 3 float-uri left + un bg pe container ca sa dea impresia de coloane egale... should be simple enough, si se va extinde (sau va da impresia ca se extinde) dupa cea mai lunga coloana dintre cele 3 (fara a sti in prealabil care dintre ele e mai lunga). Cam asta e solutia generala.

Edited by xnoise, 28 January 2008 - 12:08.

Atașat este schema. În forma actuală am funcțional layoutul pe 3 coloane. Mă interesează doar aranjamentul în interiorul coloanei 2.
 SCHEMA_LAYOUT.png   37.81K   23 downloads

cand listezi row-urile, setezi un counter. daca respectivul counter incepe de la 0, atunci toate coloanele cu counter par vor fi in stanga, toate cu counter impar vor fi in dreapta. Daca vrei 3 coloane, creezi regulile matematice de detectie al tipului coloanei, si o afisezi ca atare. e pretty simple.

pai in coloana 2, la fiecare div din ala mic ii dai float:left iar dupa 2 div-uri consecutiva bagi un <br style="clear:both;"/>

again, on Jan 28 2008, 12:29, said:

Am:

#col4
{
	float: left;
	width: 50%;
	}

am pus <br style="clear:both;"/> la fiecare 2 divuri, dar tot una sub alta se așează, pe toată lungumea coloanei 2.

pai daca nu le declari inaltime (egala) n-au cum sa fie asezate exact cum vrei tu (si anume sa ia inaltimea automat in functie de coloana din stanga
ps: nu trebuie sa exagerezi cu div-urile
acolo e bun si un tabel