Ik ben weer eens op een probleempje gestuit in css. Ik heb onderstaande code :

css :

#container_details {
	width:567PX;
	border:1px solid;
	margin:0 auto;
}
#details_51 {
	width:51px;
float:left;
border:1px solid;
}
#details_61 {
	width:61px;
	float:left;
	border:1px solid;
}
#details_71 {
	width:71px;
	float:left;
	border:1px solid;
}


html :

<div id="container_details">
    <div id="details_61"><B>Pakket:</B></div>
    <div id="details_61"><B>Threads:</B></div>
    <div id="details_61"><B>Snelheid:</B></div>
    <div id="details_61"><B>Retentie:</B></div>
    <div id="details_51"><B>SSL:</B></div>
    <div id="details_61"><B>Prijs per maand:</B></div>
    <div id="details_61"><B>Prijs per kwartaal:</B></div>
    <div id="details_71"><B>Prijs per half jaar:</B></div>
    <div id="details_61"><B>Prijs per jaar:</B></div> 
</div>


De bovenstaande code wordt met php een aantal keer herhaald met andere data erin. Dit werkt goed tot op het moment dat de hoogte van 1 div hoger is. Vindt het een beetje moeilijk uit te leggen maar dit plaatje spreekt boekdelen denk ik.

http://www.foto-hosting.nl/viewer.php?id=115045css.jpg

Zoals je daar kan zien gaat het goed tot "15mbit after hour" deze div is hoger waardoor de div die eigenlijk onder "15mbit after hour" moet komen "25mbit" nu naast de "15mbit after hour" komt te staan. Met het meegeven van een hoogte zou dit probleem opgelost zijn maar dit wil ik niet omdat alle div's een andere hoogte hebben. Weet iemand wat de oplossing hiervoor is ? Alvast bedankt !!
Hier mag je gewoon een table voor gebruiken..
Ja oke maar ik zou het liever gewoon in css houden. Hoe zou ik het dan kunnen oplossen ?
Hier een table helemaal gemaakt met css, is nog mooi gelukt ook. Tables hoeven niet perse lelijk of slecht te zijn, je moet ze alleen niet gebruiken voor je layout. :)

Check de css hier.

Ziet er idd. niet verkeerd uit. Alleen blijf ik me afvragen of ik dit "kleine" probleempje niet kan oplossen ? Want de rest klopt allemaal al dus zou het liever zo houden als het kan :)
Dit idee wat je nu hebt gebruikt werkt alleen maar als je nog een div voor iedere kolom maakt en daar dan in naar beneden werkt, ook dan zul je het niet voor elkaar krijgen om de rijen van de divs op elkaar te krijgen. Divs zijn geen tables dus die moeten hun werk ook niet proberen te doen.

Ik weet dat er iets bestaat als "display: table", maar dit werkt niet in IE. (Dit zorgt er voor dat divs zich gaan gedragen als een table.)

Edit: Je gebruikt overigens meerdere keren een id="" die hetzelfde is, dit kan niet! Id's zijn voor elementen die je eenmaal gebruikt, als je een selector meerdere keren wilt gaan gebruiken, gebruik class="" dan.
Thanks voor je hulp. Heb het allemaal netjes opgelost met tabellen :)

Reageren