[CSS] Div rechts uitlijnen

Door Citroen Anoniem Graag op 02-01-2007 23:18

7.779 views

Hallo PHPers,

Ik heb besloten om de overstap te maken van tabellen naar div-jes, daarom ben me maar eens gaan verdiepen in css.
Ik probeer een heel standaard layout te maken.
Ik heb een div hoofdscherm, waar alles in komt te staan, daarin heb ik een div links, en een div rechts om een twee-kolommen layout te creëren.
Dit lukt maar gedeeltelijk, de div hoofdscherm doet het prima, de div links eveneens maar de div rechts krijg ik niet aan de rechter kant.

Kan iemand mij helpen? Of heeft iemand een heel simpel 2 kolommen layout klaar liggen dat ik kan gebruiken om te kijken hoe het wel moet?

De code is misschien ook wel handig ;)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ne">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>{titel}</title>
<style type="text/css">
<!--
body {	
	margin:0px;
	padding:0px;
}

.hoofdscherm {
	position:absolute;
	width:85%;
	margin-left:7.5%;
	margin-top:5px;
	background-color:#FF0000;
}

.links {
	position:relative;
	height:100%;
	width:20%;
	background-color:#990000;
}

.rechts {
	position:relative;
	height:100%;
	width:80%;
	background-color:#CCFF33;
}
-->
</style>
</head>

<body lang="nl">
<div class="hoofdscherm">
	<div class="links">
	Links
	</div>
	<div class="rechts">
	Rechts
	</div>	
</div>
</body>
</html>

Groetjes

Freek--

Kalle P

02-01-2007 23:24

http://www.w3schools.com/css/pr_class_float.asp

[google]2 column layout[/google]

- Jim -

02-01-2007 23:24

Maak gebruik van float:left|right binnen style:

<html>
<body>
<div style="float:left">
div-left
</div>

<div style="float:right">
div-right
</div>

</body>
</html>

Citroen Anoniem Graag

02-01-2007 23:34

Die float had ik ook net gevonden, maar nu wil ik dat beide kolommen even groot zijn, dus dat de kleinste mee rekt met de ander, daarom staat dat ook in de div hoofdscherm.
Maar dat werkt dan niet meer...

[edit]
$Jim: Ik lees je onderstaande post en ik bedoel de height
[/edit]

- Jim -

02-01-2007 23:35

je width in percentages(%) ?????

- -

02-01-2007 23:46

Volgens mij moet zoiets werken, anders zal ik even opzoeken hoe ik het ook al weer altijd deed.

<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>

CSS:


div.left
{
float: left;
width: 20px;
padding: 3px;
}
div.right
{
margin-left: 26px; /* width div.left + 2 * padding div.left */
}

Kalle P

02-01-2007 23:49

[google]faux columns[/google]

@herjan
dit zorgt er niet voor dat de ene meeloopt met de andere, oftewel even langen height.

Tenzij je een vaste hoogte invoert is dit alles niet nodig.

- -

02-01-2007 23:56

Dat loste ik volgens mij op door div.container een achtergrondafbeelding te geven van 1px hoog en die een repeat-y te geven. Vervolgens gaf ik dan nog een achtergrondkleur aan div.container, die dan geldt voor div.right. Zo loopt het netjes door.

- Jim -

03-01-2007 00:01

div.left
{
float: left;
width: 25%;
z-index: 2;
}

div.right
{
margin-left: 26px;
width: 75%;
z-index: 2;
}

Citroen Anoniem Graag

04-01-2007 20:14

@Jim, dit zorgt er niet voor dat de ene kolom meeloopt met de andere kolom. Als je in de div links of recht een paar enters plaatst zie je wat ik bedoel.

- Jim -

04-01-2007 20:22

Als je de hoogte van de divs bedoel vrees ik dat je dat niet met CSS kan doen, maar zal je iets met javascript moeten doen denk ik.

Reageren

Inloggen om te reageren