[CSS] Krijg layout maar niet goed

[Verwijderd]

Ik ben al lang bezig met een layout voor een CMS die ik maar niet goed krijg.
De bedoeling is dat je bovenaan een header div krijgt, met een vaste hoogte. Breedte is over het hele scherm.
Dan komt er links onder de header het menu met een vaste breedte. De hoogte is afhankelijk van de inhoud van het menu.
Dan komt er rechts van het menu de content. Deze moet zich aanpassen aan de rest van de breedte van de website, en de hoogte is afhankelijk van de inhoud. Rechts van het menu komt het tips gedeelte met een vaste breedte en de hoogte is weer variabel.
Onder deze 3 divs komt een footer te staan met een vaste hoogte en de breedte van het scherm.

Als ik de content div (tussen menu en de tips div) 100% als width geeft, pakt hij 100% van het scherm en niet wat er nog over is. Als ik i.p.v. de 3 divs 1 grote div maak met padding 300 aan de linker- en rechterkant, werkt het in principe. De menu en de tips div positioneer ik dan absoluut. Het probleem is dan dat ik de footer er niet meer onder krijg!

Ik wil deze layout maken zonder tabellen. Moet toch mogelijk zijn lijkt me?

code:

html,body {
margin: 0;
padding: 0;
}

#container {
width: 100%;
height: 100%;
}

#header {
position: relative;
height: 200px;
border: 1px solid red;
}

#content_container {
position: relative;
padding: 0 320px 0 320px;
}

#menu {
position: absolute;
top: 0px;
left: 0px;
width: 280px;
padding: 10px;
border: 1px solid yellow;
}

#content {
padding-top: 10px;
}

#tips {
position: absolute;
top: 0px;
right: 0px;
width: 280px;
padding: 10px;
border: 1px solid purple;
}

#footer {
clear: both;
padding: 10px;
border: 1px solid blue;
}

De html ziet er ongeveer zo uit:

code:

<div id="container">
  <div id="header"></div>
  <div id="content_container">
    <div id="menu"></div>
    content blabla
    <div id="tips"></div>
  </div>
  <div id="footer"></div>
</div>

Ik hoop dat het zo een beetje duidelijk is.

[Grijze Vos]

[google=three column css liquid]

Eerste hit.

[ Voor 94% gewijzigd door Grijze Vos op 19-02-2010 16:47 ]

[Verwijderd]

Hehe, die zocht ik. Thanks! Kan slotje op

[Flowmo]

In welke browsers wil je het werkend hebben? Ook IE6? Anders kan je met position absolute een heel eind komen, maar niet op de manier zoals je het nu toepast.

Neem 3 divs: #header, #content_pane en #footer

In #content_pane zet je je #menu en #tips met position absolute links en rechts, maar gebruik dan ook top:0 en bottom:0 en een min-height (min-height maak je de minimale hoogte van je #content div). Maak dan een nieuwe div #content waar je al je content in zet en positioneer deze gewoon met padding / margin.

Stel dat #content uitrekt en dus #content_pane meerekt, dan zorgen top:0; en bottom:0; ervoor dat #tips en #menu ook meeschalen met de volledig hoogte.

Gebruik waar je wilt (#content bv.) ook overflow-y:scroll, dan krijg je een verticale scrollbalk als je dat per se wilt.

Zet je #footer dan als laatste en dan zou deze gewoon moeten clearen en onderaan moeten staan. Desnoods gebruik je position:fixed en bottom:0. dan staat ie constant onderaan.

Edit: die eerste hit bij Google maakt gebruik van faux columns. Op zich geen probleem, alleen zijn de kleuren van je kolommen niet meteen via CSS aan te passen... Verder prima optie.

[ Voor 8% gewijzigd door Flowmo op 19-02-2010 16:59 ]

[Verwijderd]

Thanks, als ik niet uit die liquid columns kom zal ik het proberen. IE6 ga ik echter niet meer aan beginnen...

[BtM909]

Verwijderd schreef op vrijdag 19 februari 2010 @ 16:50:
Hehe, die zocht ik. Thanks! Kan slotje op

Waar heb je dan in hemelsnaam op gezocht om dit niet te vinden

[RobIII]

Verwijderd schreef op vrijdag 19 februari 2010 @ 16:50:
Hehe, die zocht ik. Thanks! Kan slotje op

Een slotje is niet nodig op een topic als je je oplossing hebt. Zie daarvoor ook onze faq betreffende topiceinde.

[Verwijderd]

BtM909 schreef op vrijdag 19 februari 2010 @ 17:03:
[...]

Waar heb je dan in hemelsnaam op gezocht om dit niet te vinden

Het probleem was juist dat ik niet wist waar ik op moest zoeken... Niet alleen gezocht maar ook veel geprutst eigenlijk

RobIII schreef op vrijdag 19 februari 2010 @ 17:37:
[...]

Een slotje is niet nodig op een topic als je je oplossing hebt. Zie daarvoor ook onze faq betreffende topiceinde.

Ok

[Verwijderd]

Flowmo schreef op vrijdag 19 februari 2010 @ 16:53:
In welke browsers wil je het werkend hebben? Ook IE6? Anders kan je met position absolute een heel eind komen, maar niet op de manier zoals je het nu toepast.

Neem 3 divs: #header, #content_pane en #footer

In #content_pane zet je je #menu en #tips met position absolute links en rechts, maar gebruik dan ook top:0 en bottom:0 en een min-height (min-height maak je de minimale hoogte van je #content div). Maak dan een nieuwe div #content waar je al je content in zet en positioneer deze gewoon met padding / margin.

Stel dat #content uitrekt en dus #content_pane meerekt, dan zorgen top:0; en bottom:0; ervoor dat #tips en #menu ook meeschalen met de volledig hoogte.

Gebruik waar je wilt (#content bv.) ook overflow-y:scroll, dan krijg je een verticale scrollbalk als je dat per se wilt.

Zet je #footer dan als laatste en dan zou deze gewoon moeten clearen en onderaan moeten staan. Desnoods gebruik je position:fixed en bottom:0. dan staat ie constant onderaan.

Edit: die eerste hit bij Google maakt gebruik van faux columns. Op zich geen probleem, alleen zijn de kleuren van je kolommen niet meteen via CSS aan te passen... Verder prima optie.

Nog een vraagje, werkt dat ook als de linkerkolom of de rechterkolom langer wordt als de content? Rekken de content en de andere kolom dan ook mee?

Ik heb die van de liquid columns nu namelijk werkend door al die irritante paddings en positions weg te halen (daarvoor werkte het ook al, maar ik vind het maar irritant). Als nu het menu langer wordt dan de content, rekt de content niet mee, en vice versa

[ Voor 8% gewijzigd door Verwijderd op 19-02-2010 20:00 ]

[pieturp]

Faux columns

[Verwijderd]

Het wil nog niet echt lukken. Ik heb even een afbeelding van de layout geupload zodat ik beter kan laten zien wat ik bedoel. Klik!

Zoals ik al zei hebben de menu en de tips (linker- en rechterkolom) altijd een vaste breedte. De middelste rekt zich uit over de ruimte die nog over is. Nou is denk ik het moeilijkste de 2 borders, die 2 vage grijze lijnen. Deze bestaan elk uit 3 afbeelding. Een middelstuk dat uitrekbaar is, en een onder- en bovenstuk. Het makkelijkst is denk ik om deze 3 in 1 div te plaatsen met een achtergrondkleur, met daarin 2 divs (boven- en onderstuk).

Als het menu langer wordt dan het middelstuk, moet de lijn net zo lang worden als het menu. Als het middelstuk langer wordt dan het menu, moet de lijn net zo lang worden als het middelstuk. De footer blijft altijd onder de 3 kolommen.

Ik heb al veel dingen geprobeerd, bijvoorbeeld het middelstuk naast het menu plaatsen, dan een negatieve margin-right van 300px, en dan de rechterkolom float right. Irritant is dan dat de rechterkolom onder het middelstuk blijft! Als ik het middelstuk dan een float left geef verliest hij zijn uitrekkende breedte...

Wie o wie kan me helpen?

EDIT: Ik denk dat het niet mogelijk is, daarom heb ik maar genoegen genomen met een div in de linkerkolom die op float right staat en een div in de rechterkolom die op float left staat. Deze divs functioneren dan als de border. Als ik nu echter in de middelste kolom een clear both doe (ook al staat deze in een aparte div) komt alles onder de clear onder de linker- en rechterkolom te staan, waardoor er een groot wit gat komt... Hoe kan dat? Ik clear hem toch binnen een div, dan hoeft hij toch niet alle divs van de pagina te clearen?

[ Voor 18% gewijzigd door Verwijderd op 20-02-2010 20:05 ]