[css] Problemen met layout

[Eswip]

beste allemaal,

Ik zit met een vreemd probleem, waar ik gewoon maar niet uit kom, en super vaag vindt. Ik zal jullier eerst de html file even geven:

code:

<div id="container">
   <div id="header"></div>
   Blaat
   <div id="content_left"></div>
   <div id="content_mid"></div>
   <div id="content_right"></div>
   Blaat
</div>

En dan hier de css:

code:

#container {
 background: #fff;
 width: 800px;
 vertical-align: top;
 position: relative;
 margin: 0px auto 0px auto;
 padding: 0px;
 border: 1px solid #b8b8b8;
 text-align: left;
}

#header {
 background: #fff url('../gfx/header.jpg') center center no-repeat;
 width: 792px;
 height: 105px;
 margin: 2px;
 padding: 1px;
 border: 1px solid #b8b8b8;
}

#content_left {
 width: 260px;
 margin: 2px;
 float: left;
}

#content_mid {
 width: 260px;
 float: left;
 margin: 2px;
}

#content_right {
 width: 260px;
 margin: 2px;
 float: left;
}

Wat is nu het geval... Hij geeft de header mooi in de container weer.. maar de andere 3 divs, komen ONDER de container te staan... De 2x blaat, die komen echter weer WEL in de container cell te staan...

Kortom, hij zet alles netjes in mun container cell, behalve de 3 div'jes... Iemand enig id??

[Verwijderd]

Lees even het Visual Formatting Model van de CSS 2.1 specificatie en dan met name het Float gedeelte. Een float is niet in de flow van het document. Dat verklaart alles. Lees bovenstaande referentie en alles zal je duidelijk worden. Mocht het dan nog niet duidelijk zijn dan moet je even gillen, dan zal ik het uitleggen.

[Eswip]

Heb het stuk over floates door gelezen, maar kom er nog niet uit.. Ik neem aan dat ik ergens het clear element moet gebruiken? Maar waar dan? Als ik hem in mun container zet dan maakt dat niets uit..

dus bij deze... *gil*...

[Boelie-Boelie]

www.quirksmode.org/css/clearing.html

[Eswip]

Boelie-Boelie schreef op zondag 29 januari 2006 @ 18:43:
www.quirksmode.org/css/clearing.html

Thnx, dat werkt.. Alleen 1 klein ding... ik heb bij mijn content_left, mid en right cellen ook de margin op 2 staan, alleen werkt dit niet.. is hier een simpele oplossing voor?

[Eswip]

Ik heb het volgende probleem...

ik heb deze pagina:
http://moxlinux.student.utwente.nl/~eswip/project/test1.html

In firefox is het goed, daarbij is er netjes overal 2px margin.. maar in IE doet hij helemaal links een margin van 4 px. Zet ik de margin op 0, dan zet hij hem gewoon helemaal tegen die kant aan.

Om de een of andere reden maakt IE aan de linkerkant van 2px 4px ofzo.. ik snap er echt helemaal niets van.

[crisp]

double margin bug

[Eswip]

crisp schreef op donderdag 02 februari 2006 @ 16:12:
double margin bug

Mijn held!!!!

[Eswip]

Volgende probleem..

Zoals je kan zien hier zitten de images niet helemaal lekker in de headers van de kleine content vakjes.

Ik heb de volgende code gebruikt:

code:

.content_head {
 height: 22px;
 width: 100%;
 color: #fff;
 font-family: tahoma, verdana, arial, sans-serif;
 font-weight: bold;
 font-size: 12px;
 line-height: 22px;
 text-align: left;
 /*overflow: hidden;*/
}

.content_head img {
 float: right;
 margin: 0px;
 border: 0px;
}

Dit werkt echter niet. Ik had het eerst andersom, de text rechts en het plaatje links, dat werkte wel..