divs naast elkaar zetten

Door Andy V op 21-10-2012 01:16 gewijzigd op 21-10-2012 01:24

17.645 views

Hey,

Ik was net een layout aan het maken, alles is gelukt zoals ik het wou alleen 1 dingetje zit niet goed en dat is het content gedeelte, waar ik eigenlijk 3 divs naast elkaar wil dus links, midden, rechts waarvan de middelsde div zo breed mogelijk moet zijn en de andere twee zouden links/rechts tegen het scherm moeten staan maar dat lukt mij niet kan iemand me hier mee helpen?

dit is het stukje met de divs:


            <div id="divContentWrapper">
                <div id="divContent">
                    <div id="divContentLeftColumn">
                        <div id="divMenuLeft">
                            <ul>
                                <li><a href="index.html">About</a></li>
                                <li><a href="Resume.html">Resume</a></li>
                                <li><a href="Portfolio.html">Portfolio</a></li>
                                <li><a href="contact.html">contact</a></li>
                            </ul>
                        </div>
                    </div>
                    <div id="divContentCenterColumn"></div>
                    <div id="divContentRightColumn"></div>
                </div>
            </div>

en hier is de css:



#divContentWrapper {
    width: 100%;
    background: #0F0;
    min-width: 600px;
}

#divContent {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
}

#divContentLeftColumn {
    float:left;
    width: 200px;
    background:#F00;
    height: 600px;
}

#divContentCenterColumn {
    float:left;
    min-width: 600px;
    margin: 0px auto;
    background:#000;
    height: 600px;
    overflow:hidden;
}
#divContentRightColumn {
    float:right;
    width: 200px;
    background:#F00;
    height: 600px;
}

Ik heb mijn layout geupload zodat jullie weten hoe het er nu uit ziet:

Wouter J

21-10-2012 09:07

#left -> float: left;
#right -> float: right;
#content -> float: left;

En dan de eventuele achtergrond van de content meegeven aan de container/wrapper. Voorbeeld: http://jsbin.com/aqaqay/1/edit

Eddy E

21-10-2012 11:46

Nadeel als de inhoud te breed wordt: http://jsbin.com/aqaqay/2/

Let wel dat ik de breedte van de dingen even liquid heb gemaakt (dwz: percentage met min-/max-width).

Frank Nietbelangrijk

21-10-2012 12:33

Nadeel is dan dat bij een smalle breedte de rechter div naar beneden verplaatst wordt. Al bij al heb ik toen maar gekozen voor een vaste breedte die in het midden wordt uitgelijnd zoals dit forum. Overigens kan het (nog steeds) met een table met drie kolommen. Maar nogmaals - mijn mening - neem een vaste breedte dat scheelt een hoop gezeur.

Misschien wel een leuk draadje: Hoe maak jij je content indeling.

Eddy E

21-10-2012 12:58

Eigenlijk zou het zo moeten zijn dat de content als eerste komt.
Daarna pas een menu/left/right/aside etc.
Dat kan allemaal prima met position: absolute;, maar daar kleven heel wat nadelen aan.

Wouter J

21-10-2012 13:29

Eddy, ik zie geen enkele reden om de content als eerst in de code te moeten plaatsen. Ik raad je zelfs aan om in de code dezelfde volgorde als je op het scherm ziet (van links naar rechts en boven naar onder) aan te houden.

Frank, je zou eventueel met absolute en relative posities kunnen werken: http://jsbin.com/aqaqay/6/edit

Andy V

21-10-2012 13:32

het lukte me gisteren wel om links en rechts tegen het scherm te krijgen maar ik wil dan dat de middelste div de lege ruimte opvult dus als het scherm 1900x1080px is moet de content 1500px breed zijn en als het scherm maar 1024 breed is zou de content 624px breed moeten zijn en ik zou willen dat dit zich vanzelf aanpast en daar zit ik eigenlijk mee want als ik hem op "min-width:600px;" zet dan word hij niet groter dan 600px als ik er een "float:left;" bij zet en als ik die "float:left;" weg haal dan gaat de rechter div onder de content staan

Frank Nietbelangrijk

21-10-2012 13:55 gewijzigd op 21-10-2012 13:58

Hee Wouter,

Dat is m helemaal. Volgens mij is dat ook wat Andy zoekt. Ik heb hem in mijn examples directory opgeslagen.
Altijd handig ;-)

<?php
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<style id="jsbin-css">

#wrapper {
min-width: 500px; /* geef altijd een minimale width mee */
height: 200px;

position: relative; /* om absolute te kunnen positioneren */
}
#left, #right, #content {
position: absolute;
height: 100%;
}

#left {
width: 100px;
background: #c33;

left: 0;
}
#right {
width: 100px;
background: #33c;

right: 0;
}
#content {
left: 100px;
right: 100px;
}

</style>

</head>
<body>
<div id=wrapper>
<div id=left>
<h3>Left</h3>
</div>
<div id=content>
<h2>Content</h2>
<p>Heel wat mooie content waar we een hele lange zin van maken.</p>
</div>
<div id=right>
<h3>Right</h3>
</div>
</div>
</body>
</html>
?>

Andy V

21-10-2012 13:57

Ja dat is inderdaad wat ik zocht, het ziet er nu veel beter uit :) Bedankt wouter.

[size=xsmall]Toevoeging op 21/10/2012 14:05:53:[/size]

Ik heb er toch nog een extra wrapper tussen de wrapper en de kolommen gelaten om de hoogte te regelen anders was 1 kolom hoog en dan had ik 2platte kolommen met 0px hoogte.

de html is dus niks aan veranderd,
en dan is dit de css:


/** Content **/

#divContentWrapper {
    background: #333;
    min-width: 1007px;

    position: relative; /* om absolute te kunnen positioneren */
}

#divContentLeftColumn, #divContentCenterColumn, #divContentRightColumn {
    position: absolute;
    height: 100%;
}

#divContent {
    min-height: 400px;
}

#divContentLeftColumn {
    width: 200px;
    left: 0;
    background:#999;
}

#divContentCenterColumn {
    left: 200px;
    right: 200px;
    background:#000;
}
#divContentRightColumn {
    width: 200px;
    right: 0;
    background:#999;
}

Eddy E

21-10-2012 14:13

Wouter J op 21/10/2012 13:29:36

Eddy, ik zie geen enkele reden om de content als eerst in de code te moeten plaatsen. Ik raad je zelfs aan om in de code dezelfde volgorde als je op het scherm ziet (van links naar rechts en boven naar onder) aan te houden.

Frank, je zou eventueel met absolute en relative posities kunnen werken: http://jsbin.com/aqaqay/6/edit

Dit had te maken met SEO. Hoewel die wel het een en ander kunnen filteren.
Maar wat te denken aan schermlezers? Moeten die elke keer het menu voorlezen?

Andy V

21-10-2012 14:53 gewijzigd op 21-10-2012 14:55

Ik heb mijn pagina nu wat aangepast, ik heb er een footer aan toegevoegd dat is allemaal gelukt enzo maar als je het schermpje in de hoogte smaller maakt zou de footer beneden moeten blijven dat doet hij ook maar de footer gaat dan mee met het scherm en als je de onderkant van je browser dan bijna helemaal naar boven doet kom hij al over de header en staat de content onder de footer..

Reageren

Inloggen om te reageren