[CSS] 2 divs naast elkaar in div

[DP Kunst]

ik heb al ik weet niet wat geprobeerd, al andere topics doorgelezen maar ik kom er maar niet uit.

mijn probleem is het volgende. ik ben een site aan het maken die er ongeveer zo uitziet:

code:

      Header
Menu   |     Inhoud
      Footer

HTML:

    <div id="totaal">
        <div id="header">
        </div>
        <div id="middle">
            <div id="menu">
            waarom wil het nou maar niet lukken om dit divje aan de linker kant te krijgen, tussen de 2 lijntjes
            </div>
            <div id="content">
            en dan dit divje aan de rechterkant tussen de 2 lijntjes
            </div>
        </div>
        <div id="footer">
        </div>
    </div>

nou is het dus de bedoeling dat de 2 divjes binnen div middle naast elkaar komen, maar ik krijg het maar niet voor elkaar. ik kan ze geen standaard hoogte geven, want ze rekken mee met de inhoud. daardoor kan ik dus niet de content div absoluut positioneren, want de afmeting verschilt steeds.

ik heb het al eens eerder gedaan, toen lukte het wel met align: left; en align:right;

ik heb nu dit in mn css staan:

Cascading Stylesheet:

body {
    background-color:lightgrey;
}


div#totaal {
    position: relative;
    margin: -10 auto;
    width: 960px;
    height: 600px;
}

div#header {
    width: 960px;
    height: 155px;
    position: relative;
    margin: 0 auto;
    background: url('images/layout/header.png') no-repeat;
}

div#middle {
    width: 960px;
    position: relative;
    margin: 0 auto;
    background: url('images/layout/middle.png') repeat-y;
}

div#menu {
    align:left;
    position: relative;
    left: 0px;
    width: 150px;
    margin: 0px 0px 0px 20px;
    border: 1px solid black;
}

div#content {
    align:right;
    position: relative;
    right: 0px;
    width: 700px;
    margin: 0px 20px 0px 0px;
    border: 1px solid green;
}

div#footer {
    width: 960px;
    height: 26px;
    position: relative;
    margin: 0 auto;
    background: url('images/layout/footer.png') no-repeat;
}

ik heb al van alles geprobeerd met float:left / right, position: absolute / relative, display:inline, align:left / right maar het wil maar niet lukken. ze blijven strak onder elkaar staan

iemand enig idee hoe ik ze nu naast elkaar krijg ?
zo ziet de site er nu uit: klik

[Verwijderd]

align?

doe eens float en dan allebei left

[ Voor 28% gewijzigd door Verwijderd op 13-10-2005 17:37 ]

[chris]

je zou #menu en #content position: absolute; mee kunnen geven.

[Verwijderd]

floats moeten dit zeker kunnen oplsosing.

Cascading Stylesheet:

div#menu { 
    position: relative; 
    left: 0px; 
    width: 150px; 
    margin: 0 0 0 15px; 
    padding:0;
    border: 1px solid black; 
    float:left;
} 

div#content { 
    position: relative; 
    float:left;
    left:35px;
    width: 700px; 
    margin: 0; 
    padding:0;
    border: 1px solid green; 
} 

[DP Kunst]

float werkt ook niet. dan komen ze wel op hun plek, maar de footer schuift aan omdat de middle div niet meerekt met menu of content...

Verwijderd schreef op donderdag 13 oktober 2005 @ 17:37:
align?

doe eens float en dan allebei left

jah, vroeger deed k altijd <div align="left"> enz, en dan ging die naar links...

[ Voor 48% gewijzigd door DP Kunst op 13-10-2005 17:53 ]

[Verwijderd]

DaNiEl KuNsT schreef op donderdag 13 oktober 2005 @ 17:52:
float werkt ook niet. dan komen ze wel op hun plek, maar de footer schuift aan omdat de middle div niet meerekt met menu of content...

met dat stukje wat ik net aangeef, werkt het echt wel....

[danslo]

Kweet dat het eerder gezegd is maar hier een werkend stukje met floats:

http://85.10.202.25/test.html

edit : Ahh, zie nu ook dat FF probleempjes geeft idd.

[ Voor 22% gewijzigd door danslo op 13-10-2005 18:27 ]

[Wmm]

DaNiEl KuNsT schreef op donderdag 13 oktober 2005 @ 17:52:
float werkt ook niet. dan komen ze wel op hun plek, maar de footer schuift aan omdat de middle div niet meerekt met menu of content...
[...]

jah, vroeger deed k altijd <div align="left"> enz, en dan ging die naar links...

Het werkt wel, in IE that is. In Mozilla Firefox schuift het idd aan.
Zet eens

HTML:

<br clear="all">

voor je footer div. Dan werkt het ook in Mozilla. Nadeel is dat je er in IE een lege enter door krijgt voor je footer div (in Mozilla niet). Ik zou echter geen andere oplossing weten (onlangs zelf ook nog hetzelfde probleem gehad.

[Verwijderd]

Check die shit:

http://www.alistapart.com/articles/negativemargins

Op deze site staan nog meer interessante artikelen over degelijk webdesign.

[Boelie-Boelie]

Twee kolommen met floats:
http://www.456bereastreet...tandards/csslayout/2-col/

Twee manieren om floats te clearen:
http://www.positioniseverything.net/easyclearing.html

[Pendaco]

je kan voor die footer dan toch een 'clear:boath' opgeven, dan zal die er als het goed is gewoon onder vallen in plaats van tegen die middle div aan schurken

edit:
yooo heeft er iemand een spuitje numero 11 over . boelie boelie geeft m hierboven ook al aan

[ Voor 30% gewijzigd door Pendaco op 13-10-2005 21:28 ]

[hannos]

Ik heb even een voorbeeldje gemaakt, bedoel je zoiets: http://www.hannos.nl/dev/divtest/ ?

//uitleg:

- ik heb gewoon position relative, drie divs onder elkaar: header, main en footer
- centreren dmv left: 50% en margin-left: - (1/2)*(breedte div)
- main bevat menu en content beide float: left
- main heeft overflow: auto

[ Voor 58% gewijzigd door hannos op 13-10-2005 21:51 ]

[DP Kunst]

jah!!.nu werkt het. het enige probleem was de overflow: auto; waardoor die klein bleef

[hannos]

DaNiEl KuNsT schreef op donderdag 13 oktober 2005 @ 22:35:
jah!!.nu werkt het. het enige probleem was de overflow: auto; waardoor die klein bleef

Mja zonder die eigenschap krijg je in firefox hele rare dingen terwijl internet explorer er wel iets normaals van weet te maken, maar goed IE maakt van de gekste code nog wat normaals. Op die manier leer je natuurlijk nooit netjes programmeren.