2 divs naast elkaar met padding en width in %

Status
Niet open voor verdere reacties.
S

simon911

Gebruiker
Lid geworden
18 feb 2012
Berichten
61
Hallo allemaal,

Ik probeer mijn left-column div met 10px padding met een width van 30% naast een div te zetten met de content div met 10 px padding met een width van 70%.
Maar dit werkt dus niet door de padding.

css.PNG

Hier is mijn CSS:

Code: 
body{
padding: 0px;
margin: 0px;
}

#container {
    position: relative;
    width: 100%;
	background-color: yellow;
}

#header {
    position: relative;
    height: 50px;
    padding: 10px;
	background-color: green;
}


#left {
    position: relative;
    height: 200px;
    padding: 10px;
	width: 30%;
	background-color: red;
	float: left;
	display: block;
}

#right {
    position: relative;
    height: 200px;
    padding: 10px;
	width: 70%;
	float: right;
	background-color: black;
	display: block;
}

Kunnen jullie helpen? :)
 
zoiets bedoel je ?
http://jsfiddle.net/5qLWQ/

als je een padding gebruikt probeer dan altijd een inner div aan te maken.
En als je een column/row wilt maak dan eerst een div class aan met width 100%, zodat alles wat daar in rond zweeft weet wat het moet doen.
 
Om zo min mogelijk html en css te krijgen, ga ik even wat slopen. ;)

Zoals 't ie nu is, kan de <div id="container"> en ook de <div class="column"> gemist worden: jsfiddle.net/5qLWQ/1/.
Toelichting:
  • De #header heeft geen opgegeven breedte, en wordt dus schermbreed; de padding wordt hier vanzelf aangebracht.
  • De leftcolumn en de rightcolumn hebben samen 30%+70%=100% breedte van het omvattende element; dat is de <body> die hier ook schermbreed is; dat gaat dus altijd goed, want via de inner-div's wordt de padding geregeld.
Vervolgens kunnen ook de {position: relative} en de {display: block} gemist worden: jsfiddle.net/5qLWQ/2/.
Toelichting:
  • Zo lang er op hogere niveaus geen speciale position's gebruikt worden, staan de onderliggende elementen altijd vanzelf relatief t.o.v. het omvattende element.
  • Een <div> heeft uit zichzelf al een block-karakter, dat hoeft er niet bij.
Als er iets met de totale breedte moet gebeuren, dan kan dat vastgeknoopt worden aan de <body>: jsfiddle.net/5qLWQ/3/.
Toelichting:
  • Omdat alles binnen de <body> zit, past alles zich automatisch aan (ook hier is geen #container nodig; d.w.z. alleen wel een #container nodig als je Internet Explorer 5.5 en eerder wilt ondersteunen).
  • De <body> kan desgewenst ook een background (color en/of img) krijgen. Moet de <body> smaller zijn dan het scherm en de background naast de body afwijkend ingekleurd worden, dan kan dat met de background (color en/of img) van de <html> geregeld worden.
:)
 
ah, bedankt!
Hij doet het nu!

Maar nu heb ik nog een vraagje:
Ik heb nu left div en de right op min-height: 300px gezet.
Maar als de right div langer wordt dan 300px, wordt de linker div niet langer.
En dat is heel lelijk.
Hier een screenshot:
minheight.PNG

kunnen jullie helpen?
 
Ik heb de oplossing al :P
Gewoon de body background/color dezelfde kleur doen als de left div :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan