PDA

Volledige versie bekijken : Div in div probleem


Hobbes2002
%Europe/Berlin %382 %2007, 10:10
Beste forumers,

ik zit al een dikke dag te "prutsen" met een stylesheet en html pagina met DIVs in DIV's. Krijg het niet voor elkaar. :S

De bedoeling is dat er een pagina ontstaat met daarin 3 kolommen van 220 pixels (20 pixels ruimte tussen de kolommen) met daarin per kolom de mogelijkheid om ala startpagina blokjes te maken met per blokje een kop en een opsomming van de links.

Nu krijg ik het niet voor elkaar om 3 kolommen naast elkaar te krijgen m.b.v. onderstaande code. Wat doe ik verkeerd?
Dank jullie voor de reacties!

** Update **
Ben nog een tikkie verder gekomen, maar heb nog een paar problemen:
- de kolommen verspringen (links staat links top = goed, midden staat in het midden, maar onder links, rechts staat rechts top = goed)
- krijg de kop niet strak tegen het blok met de links


CSS:
#i_left_complete {
float:left;
border-right:2px solid #E2E2E2;
padding:0 9px 0 9px;
text-align: justify;
width:701px;
line-height:130%;
position:relative;
}

.startlinks {
color: #000;
width: 220px;
z-index: 0;
float: left;
border: solid 1px #FF0000
}

.startrechts {
color: #000;
width: 220px;
float: right;
border: solid 1px #FFFF00;
}

.startmidden {
width: 220px;
margin-left: 240px;
padding-right: 20px;
border: solid 1px #FF00FF;
}



HTML:

<div id="i_left_complete">

<!-- KOLOM LINKS -->
<div class="startlinks">

<p class="startboxkopL">MakelaarsL1</p>
<h6 class="startboxL">Leeuwis Makelaardij (Groningen)<br/>
Stad en Ommeland (Groningen)<br/>
Makelaardij Andrea Schut (Groningen)<br/>
Makelaardij Groningen (Groningen)<br/>
TeamMakelaar (Groningen)<br/>
Zeeven Makelaardij (Groningen)</h6>
<BR>
<p class="startboxkopL">MakelaarsL2</p>
<h6 class="startboxL">Leeuwis Makelaardij (Groningen)<br/>
Stad en Ommeland (Groningen)<br/>
Makelaardij Andrea Schut (Groningen)<br/>
Makelaardij Groningen (Groningen)<br/>
TeamMakelaar (Groningen)<br/>
Zeeven Makelaardij (Groningen)</h6>

</div>

<!-- KOLOM RECHTS -->
<div class="startrechts">

<p class="startboxkopL">MakelaarsR1</p>
<h6 class="startboxL">Leeuwis Makelaardij (Groningen)<br/>
Stad en Ommeland (Groningen)<br/>
Makelaardij Andrea Schut (Groningen)<br/>
Makelaardij Groningen (Groningen)<br/>
TeamMakelaar (Groningen)<br/>
Zeeven Makelaardij (Groningen)</h6>
<BR>
<p class="startboxkopL">MakelaarsR2</p>
<h6 class="startboxL">Leeuwis Makelaardij (Groningen)<br/>
Stad en Ommeland (Groningen)<br/>
Makelaardij Andrea Schut (Groningen)<br/>
Makelaardij Groningen (Groningen)<br/>
TeamMakelaar (Groningen)<br/>
Zeeven Makelaardij (Groningen)</h6>

</div>

<!-- KOLOM MIDDEN -->
<div class="startmidden">

<p class="startboxkopL">MakelaarsM1</p>
<h6 class="startboxL">Leeuwis Makelaardij (Groningen)<br/>
Stad en Ommeland (Groningen)<br/>
Makelaardij Andrea Schut (Groningen)<br/>
Makelaardij Groningen (Groningen)<br/>
TeamMakelaar (Groningen)<br/>
Zeeven Makelaardij (Groningen)</h6>
<BR>
<p class="startboxkopL">MakelaarsM2</p>
<h6 class="startboxL">Leeuwis Makelaardij (Groningen)<br/>
Stad en Ommeland (Groningen)<br/>
Makelaardij Andrea Schut (Groningen)<br/>
Makelaardij Groningen (Groningen)<br/>
TeamMakelaar (Groningen)<br/>
Zeeven Makelaardij (Groningen)</h6>

</div>


</div>

Ben erg benieuwd naar jullie reactie en opmerkingen.

Thanx, Marc



Dank je wel!

r4vi4n
%Europe/Berlin %502 %2007, 13:03
Ik zou er een wrapper omheen zetten, die margin 0 auto meegeven (zodat de wrapper altijd in het midden staat).
Dan de divs in de goede volgorde zetten:
div-links
div-midden
div-rechts
en alles floaten naar links.

probeer dat eens.