3 colomns layout probleem

**michiel v** · 22-08-2009, 22:09

Hallo,

Bij het basen van een layout voor mezelf, zit ik met het volgende probleem:
Ik heb een drie-koloms layout, waarvan 2 kolommen met fixed width, en één met min-width.
Die laatste moet verschillen in resoluties opvangen door groter te worden.
Dit lukt eigenlijk allemaal wel, maar alleen mag die laatste kolom niet breder worden gemaakt door de tekst die erin komt. De text moet normaal afgebroken worden, zonder dat die iets aan de breedte van de kolom doet.
Ik heb al naar de css 'white-space' optie gekeken, maar dat hielp niet.
Heeft iemand een oplossing voor dit probleem?

Alvast bedankt

**radule vucetic** · 23-08-2009, 20:10

Origineel gepost door michiel v

Hallo,

Bij het basen van een layout voor mezelf, zit ik met het volgende probleem:
Ik heb een drie-koloms layout, waarvan 2 kolommen met fixed width, en één met min-width.
Die laatste moet verschillen in resoluties opvangen door groter te worden.
Dit lukt eigenlijk allemaal wel, maar alleen mag die laatste kolom niet breder worden gemaakt door de tekst die erin komt. De text moet normaal afgebroken worden, zonder dat die iets aan de breedte van de kolom doet.
Ik heb al naar de css 'white-space' optie gekeken, maar dat hielp niet.
Heeft iemand een oplossing voor dit probleem?

Alvast bedankt

Probeer dan vaste breedte te gebruiken voor die laste kolom.

**Tjerk de Heer** · 24-08-2009, 10:47

Met een vaste breedte zal die kolom niet meer meelopen met een veranderende resolutie ;)

Probeer dit eens als je wilt:

test.html:

Code:

<html>
<head>
    <title>Kolommen Test</title>
    <link rel="stylesheet" href="test.css" type="text/css" />
</head>

<body>
    <div id="kolom1"></div>
    <div id="kolom2"></div>
    <div id="fluid">
        <div id="kolom3"></div>
    </div>
</body>
</html>

test.css:

Code:

#kolom1 {
    height: 400px;
    float: left;
    width: 10em;
    padding: 0;
    background-color: green;
}

#kolom2 {
    height: 400px;
    float: left;
    width: 10em;
    padding: 0;
    background-color: blue;
}

#fluid {
    margin: 0 0 0 20em;
    padding: 0;
}

#kolom3 {
    height: 400px;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: yellow;
}

Getest in FireFox3 en werkt daar zoals je het beschrijft. Voorzien van wat basiskleuren en een bescheiden hoogte zodat je het in je browser gelijk kunt ontleden.

Het idee is dat je de derde kolom naar rechts verplaatst (de linker marge van #fluid is gelijk aan de breedte van #kolom1 en #kolom2) en vervolgens met 100% breedte de rest van de pagina laat vullen.

Wil je een tweede vloeibare kolom bijplaatsen om wat voor reden dan ook is dat zo gepiept. Even in de .html een #kolom4 div aanmaken direct onder #kolom3 en in de .css gewoon het blokje #kolom3 kopieren, plakken en #kolom4 van maken. En dan natuurlijk nog even de breedte aanpassen in de .css zodat de breedtes van #kolom3 en #kolom4 bij elkaar opgeteld weer 100% is.

Ik hoop dat je er wat mee kunt en als anderen een beter oplossing weten hoor ik het ook graag.

**René Vennik** · 24-08-2009, 11:14

Je kan het volgens mij ook oplossen door de kollomen absolut te positioneren.
Volgens mij moet dit lukken (heb het niet getest):

html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<div id="kolom1"></div>
<div id="kolom2"></div>
<div id="kolom3"></div>

</body>
</html>

css:

Code:

*{ margin: 0; padding: 0; }

#kolom1, #kolom3{
position: absolute;
left: 0;
top: 0;
width: 200px;
}

#kolom2{
position: absolute;
top: 0;
left: 200px;
right: 200px;
}

#kolom3{
right: 0;
}

**michiel v** · 24-08-2009, 19:53

Bedankt voor de reactie's.
Met absolute positioning heb ik nog nooit gewerkt, dus dat kon ik zelf niet maken.
Ik ga de 2 bovenstaande code's uitproeren, en ik post wel als het gelukt is.
Ik denk dat ik nu wel verderkom, bedankt!

3 colomns layout probleem