[HTML/CSS] Div order probleem

Ik ben bezig met een website welke alleen maar uit DIVS moet gaan bestaan. Op zich lukt het me aardig alleen ik stuit op een probleem.

Op de volgende screenshot is te zien hoe Internet Explorer zijn DIVS neerzet als de site is geladen en ik alles selecteer. Het probleem is dat de groene DIV container te ver uitrekt. IE en ook Firefox plaatsen de DIVS gewoon onder elkaar terwijl dat niet moet. Dat is dus ook de reden dat de container DIV te ver uitrekt.



Ik ben dus op zoek gegaan op GoT en Google hoe ik de DIVS netjes onder elkaar krijg zodat de container DIV niet uitrekt maar nog steeds geen fatsoenlijke oplossing.

Hieronder nog even de CSS code:
code:

#sitecontainer {
    position:relative;
    width:809px;
    height:auto;
    top: 0px;
    left: 20%;
    background-color: #CFDD7B;
}
#logo {
    position:relative;
    width:226px;
    height:87px;
    z-index:1;
    background-image: url(../img/logo.jpg);
    background-repeat: no-repeat;
    top: 20px;
    left: 2%;
}
#witknopje {
    position:relative;
    width:20px;
    height:8px;
    z-index:4;
    left: 152px;
    top: 5px;
    background-image: url(../img/wit-knopje.gif);
    background-repeat: no-repeat;
}
#bagsknop {
    position:relative;
    width:97px;
    height:41px;
    z-index:3;
    left: 165px;
    top: -14px;
    background-image: url(../img/knop_bags.gif);
    background-repeat: no-repeat;
}
#home_button {
    position:relative;
    width:80px;
    height:41px;
    z-index:5;
    left: 265px;
    top: -55px;
}
#shop_button {
    position:relative;
    width:80px;
    height:41px;
    z-index:5;
    left: 348px;
    top: -96px;
}
#contact_button {
    position:relative;
    width:80px;
    height:41px;
    z-index:5;
    left: 431px;
    top: -137px;
}
#content {
    position:relative;
    width:705px;
    height:auto;
    z-index:2;
    left: 6%;
    top: -152px;
    background-color: #FFFFFF;
}

HTML bitte...

code:

<div id="sitecontainer">
    <div id="logo"></div>
    <div id="witknopje"></div>
    <div id="bagsknop"></div>
    <div id="home_button"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','img/button_home_mouseover.gif',1)"><img src="img/button_home.gif" alt="Home - Eyes On" name="Home" width="80" height="41" border="0"></a></div>
    <div id="shop_button"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Webshop','','img/button_webshop_mouseover.gif',1)"><img src="img/button_webshop.gif" alt="Webshop - Eyes On" name="Webshop" width="80" height="41" border="0"></a></div>
    <div id="contact_button"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','img/button_contact_mouseover.gif',1)"><img src="img/button_contact.gif" alt="Contact - Eyes On" name="Contact" width="80" height="41" border="0"></a></div>
    <div id="content">&nbsp;
      <p>&nbsp;</p>
    </div>
</div>
</div>

Komt het niet doordat je de boel relative plaatst?
Al geprobeerd om alles wat in de container zit, absolute te plaatsen?

<span> voor de knoppen in plaats van <div>

of display:inline in je CSS

addit: daarbij moet je dan wel een div om de menuknoppen heen plaatsen om 't netjes te krijgen.

benoni wijzigde dit bericht 24-10-2007 15:22 (40%)

quote:

NitroX infinity schreef op woensdag 24 oktober 2007 @ 15:17:
Komt het niet doordat je de boel relative plaatst?
Al geprobeerd om alles wat in de container zit, absolute te plaatsen?

Dat geeft het zelfde weer. Dus dat is het niet...

edit;

In firefox doet ie het wel maar in IE dus niet. Daar blijft dus alles nog ondermekaar staan.

WiNlUx wijzigde dit bericht 24-10-2007 15:31 (15%)

Vind het div-gebruik een beetje zwaar overdreven. Ik bedoel, stylesheet en div layout in tegenstelling to tables is prima, maar je kunt het overdrijven.

Bijvoorbeeld:
Maar vna de menu knoppen een <ul><li></li></ul> Veel duidelijker en makkelijker.
Zelfs open-klappende menu onderdelen kun je prima en mooi werkelijk maken met nested ULs en LIs, en css uiteraard.
Grote knop links boven hoeft echt geen div te zijn. Gewoon een <a href> met <img>

Gebruik eens float:left; op je elementen, dan moet alles netjes naast elkaar komen in plaats van naast elkaar als het goed is. Wel moet je dan oppassen met je uitlijning zoals je nu doet in left: 348px; en top: -96px; Dat kan ook veel sjieker!

Dit neigt een beetje naar: http://www.rikkertkoppes.com/thoughts/smurf-language/

Gewoon tags gebruiken waar ze voor bedoeld zijn is zoveel netter. Alles maar in divs prakken is nou ook weer niet de bedoeling.

quote:

InZane schreef op donderdag 25 oktober 2007 @ 09:12:
Dit neigt een beetje naar: http://www.rikkertkoppes.com/thoughts/smurf-language/

Gewoon tags gebruiken waar ze voor bedoeld zijn is zoveel netter. Alles maar in divs prakken is nou ook weer niet de bedoeling.

Sweet. Mooie pagina. Ik moet dit zo vaak uitleggen, handige link. Maar, <map>? Dat is toch voor image maps? Wat is de semantische waarde hiervan? Ik zou zeggen <div>...maar ach, het is geen division of the page zoals op een ander onderwerp waar ik actief in ben werd verteld.

De relatieve button divs blijven block elementen, dus inline maken óf absolute neerzetten óf left floaten (dat is denk ik de beste optie hier).

Het verhaal over map dan ook maar (weer):
http://www.rikkertkoppes.com/thoughts/map-element/