[CSS] 2 div's naast elkaar

[T i M]

Ik heb 2 div's naast elkaar gezet, dit gaat allemaal prima. Aan de linkerkant heb ik een menu, en aan de rechterkant heb ik een soort van box waar text in moet komen. Die box en het menu zijn beide een plaatje. Als deze naast elkaar staan dan doet IE vaag en FF vaag. Als ik overflow: hidden, erin zet dan doet FF precies wat ik wil, zoals het hoort. Maar IE die doet niet wat ik wil.

Mijn HTML code

HTML:

<div id="main">
    <div id="main_left">
           <div id="menu_left"></div>       
    </div>
<div id="main_right"></div>
    <div id="content_block_top"></div>
</div>

Cascading Stylesheet:

#main {
    width: 800px;   
    background-color: #FFFFFF;
    padding-top: 5px;       
}
#main_left {            
    width: 207; 
    float: left;        
}
#main_right {           
    width: 593;
    float: right;               
}
#menu_left {
    width: 207px;
    height: 256px;
    background-image: url(../images/layout/menu.png);
    overflow: hidden;   
}
#content_block_top {
    width: 588px;
    height: 5px;
    background-image: url(../images/layout/content_block_top.png);      
}

Het zal waarschijnlijk erg "dom" in elkaar zitten, maar ik ben pas een week bezig met CSS. Ik heb hieronder 2 plaatjes neergezet wat het resultaat is van bovenstaande code.

Dat je aan de rechterkant alleen de bovenste 5px van de box ziet, komt omdat ik alleen nog maar het bovenste stukje erin heb gezet .

IE:


FF:

[Depress]

beide afbeeldingen zijn het zelfde...

[T i M]

Depress schreef op maandag 28 augustus 2006 @ 20:58:
beide afbeeldingen zijn het zelfde...

Nu niet meer...

[Onbekend]

HTML:

<div id="main">
    <div id="main_left">
           <div id="menu_left"></div>       
    </div>
<div id="main_right">  </div>------------------> Moet deze </div>
    <div id="content_block_top"></div>
</div>   <--------------------- niet hier ?

[T i M]

Oeps

HTML:

<div id="main">
    <div id="main_left">
        <div id="menu_left"></div>      
    </div>
    <div id="main_right">
        <div id="content_block_top"></div>
    </div>
</div>

Zo moet ie. Als iemand nog tips heeft om het wat netter op te maken dan hoor ik het heel graag!

[ Voor 15% gewijzigd door T i M op 28-08-2006 21:32 ]

[Verwijderd]

Ik heb wel een tip voor je. Wanneer je begint met het opmaken van een CSS layout is het altijd handig om met kleuren te werken in plaats van meteen met plaatjes en achtergronden aan de slag te gaan. Op deze manier kun je veel beter controleren wat je opmaak doet en hoe deze wordt uitgelijnd. In jouw CSS ziet het er namelijk zo uit:

Cascading Stylesheet:

#main {
    width: 800px;    
    background-color: red;
    padding-top: 5px;        
}
#main_left {            
    width: 207;    
    float: left;        
}
#main_right {            
    width: 593;
        background-color: blue;
    float: right;                
}
#menu_left {
    width: 207px;
    height: 256px;
    background-color: green;
}
#content_block_top {
    width: 588px;
    height: 5px;
    background-color: yellow;
}

En nu ziet het HTML document er zo uit en kun je dus zien wat je document doet en beter omschrijven wat je probeert te doen. Voor mij is het namelijk niet duidelijk wat je wil bereiken (maar dat kan natuurlijk ook aan mij liggen )

[iworx]

Cascading Stylesheet:

#main {
    width: 800px;   
    background-color: #FFFFFF;
    padding-top: 5px;       
}
#main_left {            
    width: 205px;   
    float: left;        
}
#main_right {           
    margin-left: 210px;
       width: 100%;
       background-image: url(../images/layout/content_block_top.png) top left no-repeat;
}

#menu_left {
    width: 207px;
    background-image: url(../images/layout/menu.png);   
}

Dit helpt je weer een stukje verder -- maar je opzet zit helemaal fout. Je mag die achtergrond nooit volledig laten. Als je echt verder wil in CSS based design --> Koop dan het boek van Simplebits (http://www.simplebits.com) Bulletproof webdesign.

[ Voor 7% gewijzigd door iworx op 29-08-2006 14:42 ]

[XWB]

Boek ziet er op het eerste zicht goed uit. Worden IE6 problemen ook besproken?