[DIVs] Divs gaan over elkaar heen lopen

[Speedener]

Ik werk nu al jaren met div's maar soms gaat het toch niet helemaal lekker en krijg ik ruzie met die div's. Vandaag ook het geval.

De website waar ik mee bezig ben heeft een header, een center met links de content en rechts het menu, en een footer.

Voorbeeldje (orgineel kan ik niet laten zien ivm content van de site ):

Cascading Stylesheet:

div#cont_center { //container voor blauw en groen
    position: relative;
    text-align: left;
}
div#content { //blauw
    width: 630px;
}
div#right_menu { //groen
    position: absolute;
    top: 0px;
    right: 7px;
    width: 110px;
}
div#bottom { //rood
    position: relative;

    width: 754px;
}

Als de text in het groene gedeelte korter blijft dan in het blauwe gedeelte gaat het prima. Als het groene gedeelte langer wordt gaat het rood overlappen. Want rood blijft onder het blauwe gedeelte hangen.

Wat ik dus wil is dat het rode gedeelte pas begint als blauw en groen afgelopen zijn.

als ik het volgende in de content class gooi dan gaat het wel goed:

Cascading Stylesheet:

    min-height: 3200px;
    _height: 3250px;

Maar als het groene gedeelte op een andere pagina dan weer korter is heb je een heel stuk wit.

Ik heb ook met float gespeeld maar ook daar ging vanalles mis.

Hoe kan ik dit oplossen, ik neig terug te stappen naar good-old tables

[ Voor 5% gewijzigd door Speedener op 27-07-2006 13:33 ]

[Verwijderd]

Je kunt Faux Columns gebruiken.
Dan worden beiden kolommen even lang, en kan de footer er makkelijk onder.

[remcotolsma]

Speedener schreef op donderdag 27 juli 2006 @ 13:32:
Ik werk nu al jaren met div's maar soms gaat het toch niet helemaal lekker en krijg ik ruzie met die div's.

Wel bijzonder dat iemand die al jaren met div's werkt zo iets niet kan oplossen, maar goed. Even zoeken op google naar '2 column layout'...

http://www.456bereastreet...tandards/csslayout/2-col/
http://www.456bereastreet...ayout/2-col/finished.html

[Boelie-Boelie]

Ik vind floats juist wel handig, misschien helpt een goed tutorial:
- 456 Berea Street: Simple 2 column CSS layout (net te laat)
- Max Design: Sample CSS page layouts (met tutorials)

[Speedener]

Bedankt voor jullie hulp, ik ben een heel eind gekomen.

Nu zit ik met het volgende: Het lijkt erop dat header tags (h3) heel irritant zijn bij een float situatie. Kan dat kloppen? De h3 komt dan pas na het floatende blok. Hoe kan ik dit oplossen?

[Verwijderd]

Speedener schreef op donderdag 27 juli 2006 @ 16:04:
Bedankt voor jullie hulp, ik ben een heel eind gekomen.

Nu zit ik met het volgende: Het lijkt erop dat header tags (h3) heel irritant zijn bij een float situatie. Kan dat kloppen? De h3 komt dan pas na het floatende blok. Hoe kan ik dit oplossen?

Het is erg lastig om te begrijpen wat je bedoeld zonder code.
Kun je de (opgeschoonde) bestanden niet even online zetten?

[Speedener]

Even wat screenshots, het ziet er op dit moment in firefox zo uit:

Het zou er zo uit moeten zien (in IE ziet het er ook al zo uit):


Ik heb hiertop ook de faux-columns methode toegepast.
Het rechtermenu is een div. En de rest (rechter gedeelte) is een andere div die float naar links.
.submenu is een h3 header en precies op dat punt springt het na het floatgedeelte.

Ik heb de floats ook omgegooit, zodat het menu de float is. Dan ontstaat het zelfde gebeuren met de .other en/of .search by letter.

[Rowanov]

In jouw geval is de div waar je h3 in zit, of je header zelf te breed. Dit is een veel voorkomend iets met floats in een container; als ze opgeteld breder zijn dat de container (marges inbegrepen), gaat de laatste float naar de volgende regel. Als je de h3/div minder breed maakt werkt het wel. Ander mogelijk aspect waar het fout gaat, is je doctype. Gebruik een volledig doctype, zonder lege regels er boven.

Voor het vervolg op GoT: zonder code wordt het helemaal niets, plaatjes zeggen niet voldoende. Zet daarom altijd de relevante code er bij, want niet iedereen kan ruiken wat er mis is

[ Voor 15% gewijzigd door Rowanov op 27-07-2006 17:20 ]

[Speedener]

Dus... Ik had ergens in de css bij h3: clear: both; staan. Dan schiet het niet op

Bedankt