[HTML/CSS2.1] padding wil niet werken in lay-out...

[Verwijderd]

Hallo,

Ik ben bezig met het maken van mijn website, nu is de layout zo goed als af.
Maar nu wil ik mijn tekst ongeveer 1% van mijn kantlijn afhebben ik heb de volgende CSS code:


CSS:

#container {
margin: 0px auto;
width: 800px;
height: auto;
border: 1px #000 solid;
background-color: #fff;
z-index: 1;
}

#header
{
height: 200px;
width: 800px;
background-image: url("images/header.png");
z-index: 2;
}

#menu
{
background-image: url("images/buttons/Menu_Bg.png");
height: 40px;
width: 800px;
z-index:3;
}

#content
{
position: relative;
width: 100%;
height: auto;
z-index: 4;
padding-left:1%;
padding-right: 0%;
float: clear;
}

#footer
{
background-color: #000;
color: #fff;
clear: both;
text-align: right;
padding-right: 1%;
z-index: 5;
}


mijn resultaat is dat de Container div uitrekt hoe kan ik er voor zorgen dat de container DIV niet uitrekt?! dat de breedte 800px blijft?

bij voorbaad dank

[Fuzzillogic]

Voorbaad

Maar lees je eens in in het box-model. Je geeft je content een width van 100%, plus daarbij(!) nog een padding van 1%. Daarmee wordt deze breder dan de parent! Je content zal neem ik aan een block-element zijn. Haal width dan gewoon weg.

En waarvoor gebruik je z-index?

[jbdeiman]

De content div kan je een padding-left van bijvoorbeeld 10px meegeven.De breedte heb je nu op 100% staan. Uit de opbouw van je CSS maak ik op dat de content div ook in de container div staat. Die is 800px breed. Wegens het Box-model zou je dus beter een width van 790px en de padding-left van 10 px mee kunnen geven aan je content div.

Waarom die z-index gebruikt weet ik ook niet precies, dat is hier volgens mij helemaal niet nodig, omdat er geen overlappende elementen zijn.

[Verwijderd]

Thx! probleem was makkelijker dan ik dacht heb al echt aan alles gedacht wat ik kon bedenken...

probleem is opgelost nogmaals bedankt.