4 div's op verschillende positie in andere div

Status
Niet open voor verdere reacties.
T

tvoorbij

Gebruiker
Lid geworden
20 apr 2005
Berichten
65
Hallo, ik heb een content div waarin ik 4 div's (globaal) naast elkaar wil zetten.

Ik plaats de content div relative zodat deze de goede plek op de layout vindt.
Als ik de andere div's plaats ook relative moet ik met negatieve waardes werken op de hoogte goed te krijgen. (feitelijk minus de hoogte van de vorige div) anders komt hij eronder.

Is er een makkelijke manier om de vier div's exact een positie te geven binnen de content div of was mijn manier de enige goede manier?

Ik hoop dat ik mij duidelijk heb gemaakt. De content div is overigens op deze pagina niet echt nodig maar gebruik ik voor de positie op volgende pagina's.

Bij voorbaat dank voor enige suggesties.
 
las je met css werkt

kun je postion mee geven grote breeddte lengte

padding-left:200px;
padding_top:200px;
hight:50px;
withd:50px;
 
Ik heb dit nu en dat werkt maar vind het niet fraai. Deze pagina wordt in een index geladen als php en zit dan in een container-div.

<body>
<div style="position:relative; width: 220px; height: 560px; left: 0px; top: 1px;" id="voetbal"></div>
<div style="position:relative; width: 220px; height: 549px; left: 240px; top: -459px;" id="school"></div>
<div style="position:relative; width: 220px; height: 510px; left: 480px; top: -1087px;" id="aboutme"></div>
<div style="position:relative; width: 220px; height: 553px; left: 720px; top: -1618px;" id="piano"></div>
</body>

Volgens mij moet er een "nettere" manier zijn. Of eventueel een tabel waarin ik de div apart in een vak zet.
 
Hallo, ik heb nog wat gestoeid en kwam met deze oplossing:

<div style="width: 180px; height: 458px; float:left" id="voetbal"></div>
<div style="width: 180px; height: 449px; float:left; margin-top:98px; margin-left:20px" id="school"></div>
<div style="width: 180px; height: 417px; float:left; margin-top:18px; margin-left:20px" id="aboutme"></div>
<div style="width: 180px; height: 404px; float:left; margin-top:66px; margin-left:20px" id="piano"></div>
<div style="width: 180px; height: 455px; float:left; margin-left:20px" id="contact"></div>

In mijn ogen overzichtelijker met geen "rare" grote negatieve getallen voor de positie. Had nooit zo gekeken naar "float" maar dit geeft mij nu dan toch de voordelen die ik nodig had.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan