[CSS] positioneren met vaste grootte

Door Robin de Vries op 30-08-2009 12:03

1.400 views

Ik heb een design, waar het content deel gecentreerd moet zijn. Normaal gesproken doe ik dat met margin-left:auto; margin-right:auto; Maar omdat er nog wat haken en ogen aan het design zitten moeten de 2-variabele-zijkanten ook apart op te maken zijn. In html-tabellen gaat dit vrij simpel:


<table border="0" width="100%">
<tr>
	<td>test</td>
	<td width="960">test2</td>
	<td>test3</td>
</tr>
</table>

maar als ik dit in een nette css-opmaak probeer te zetten, lukt het niet echt.
css:


body{
	background:		#fff;	
}

#left{
	float:left;
	width:auto;
	clear:none;
	border: 1px dashed red
}

#main{
	width:960px;
	clear:none;
	margin:0;
	margin-left:auto;
	margin-right:auto;
	border: 1px dashed red
}

#right{
	float: right;
	clear:none;
	width:auto;
	border: 1px dashed red;

}

html:


<div id="left">links</div>
<div id="main">main</div>
<div id="right">right</div>

Hoe moet de css-code worden aangepast zodat het toch nog zoals de html-tabel wordt?
(voorbeeldje css code: http://www.smcextra.com/site/?t=smcextra_new )

M Milo

30-08-2009 12:12

Als je dan een container div maakt waar left, main, right inzit.. en dan die main gewoon centreert.


<?php
echo '<div class="container">';
  echo '<div class="left">links</div>';

  echo '<div class="main">main</div>';

  echo '<div class="right"></div>';
echo '</div>';
?>

en dan css

[code]
body {
text-align: center;
}
.container {
width: 800px;
margin: 0 auto;
text-align: left;
}
.left {
width: 200px;
float: left;
}
.main {
width: 400px;
}
.right {
width: 200px;
float: right;
}
[code]

of begrijp ik je niet??

R Robin de Vries

30-08-2009 12:16

main heeft een vaste grootte. Left en right moeten de rest v/d ruimte opvullen.
En met jouw code heb ik hetzelfde als met de mijne, 'right' verschuift 1 regel naar beneden :S

M Milo

30-08-2009 13:24

aha..., sorry dat zou ik niet weten moet je even googlen..

R Robin de Vries

30-08-2009 13:56

tja googelen op wat?

Weet iemand anders een manier. Anders ben ik bang toch tabellen te moeten gebruiken...

Reageren

Inloggen om te reageren