[HTML+css] div automatisch laten sizen

[Verwijderd]

Hoi,

ik heb 3 divs: links - midden -rechts.

Links en rechts hebben pakweg een vaste breedte van 200px.
Nu moet de midden div automatisch de breedte krijgen van de ruimte ertussenin. Hoe kan ik dit doen. Heb echt al lang gezocht..

[RagaBaSH]

Snel gezegd werkt dit:

HTML:

<div id="left">
    <h1>LEFT</h1>
</div>
<div id="center">
    <h1>CENTER</h1>
    <p>
    Lorem ipsum ...
    </p>
</div>
<div id="right">
    <h1>RIGHT</h1>
</div>

met

Cascading Stylesheet:

#left {
   width: 200px;
   position: absolute;
   top: 5px;
   left: 5px;
   }
#center {
   margin-top: 5px;
   margin-left: 215px;
   margin-right: 215px;
   }
#right {
   width: 200px;
   position: absolute;
   top: 5px;
   right: 5px;
   }

maar je zal hier nog wel met wat problemen komen (even goed zoeken op digg naar css based layouts helpt een hoop).

[CaptBiele]

volgens mij moet je de buitenste div's laten floaten, en de middelste op width = 100% zetten.

maar er zijn legio voorbeelden hiervan. zoek op 3 column layout

[Verwijderd]

sorry voor de vorige post.

De oplossing is alvolgt (niet getest)

Div rechts : float:right; width: 200px;
Div midden: float:right: width:auto; margin-left: 200px;
Div links: float:right: width:auto;

Volgens mij moet dit zo werken.

succes

[Rexomnium]

RagaBaSH schreef op donderdag 26 januari 2006 @ 14:27:
Snel gezegd werkt dit:

HTML:

...

maar je zal hier nog wel met wat problemen komen (even goed zoeken op digg naar css based layouts helpt een hoop).

Volgens mij gaat dat niet werken. De middelste div komt dan onder of over de linker div staan.

Zoek even op google naar 3 column layout en je vindt iets als:
http://glish.com/css/7.asp

[DelTorro]

Ik heb wat geprobeerd en hoop dat het werkt zoals je wilt, zie het voorbeeld

code:

body {
    margin: 0px;
}

.links {
    position: absolute;
    width: 200px;
    height: 500px;
    left: 5px;
    top: 5px;
    background: #CCCCCC;
}

.midden {
    position: relative;
    height: 500px;
    top: 5px;
    left: 205px;
    margin-right: 410px;
    background: #0000FF;
    overflow: auto;
}

.rechts {
    position: absolute;
    float: right;
    width: 200px;
    height: 500px;
    top: 5px;
    right: 5px;
    background: #CCCCCC;
}

code:

<div class="links">Links</div>
<div class="midden">Veel tekst (zie voorbeeld)</div>
<div class="rechts">Rechts</div>

ai, werkt in Opera 8.51 niet zoals in firefox en ie zie ik

[ Voor 19% gewijzigd door DelTorro op 26-01-2006 18:26 ]

[Boelie-Boelie]

http://alistapart.com/articles/negativemargins/
www.tjkdesign.com/articles/3cols.asp

Deze links zijn te vinden in PIE's 'In search of the one true layout'.

[ Voor 4% gewijzigd door Boelie-Boelie op 26-01-2006 19:56 ]

[RagaBaSH]

Rexomnium schreef op donderdag 26 januari 2006 @ 15:50:
[...]

Volgens mij gaat dat niet werken. De middelste div komt dan onder of over de linker div staan.

Codesample gemaakt en getest met: Matrix Y2K Website Studio 2005, deze kan previewen met zowel Gecko engine als IE engine. beiden laten het voorbeeld goed zien. Wat jij zegt klopt wel, maar dat wordt opgelost door de margins, maar dit is tevens waar het probleem zich meestal voordoet (mensen gaan met die margins klooien, en komen dan berooid uit)

[Verwijderd]

Boelie-Boelie schreef op donderdag 26 januari 2006 @ 19:56:
http://alistapart.com/articles/negativemargins/
www.tjkdesign.com/articles/3cols.asp

Deze links zijn te vinden in PIE's 'In search of the one true layout'.

http://alistapart.com/articles/negativemargins/ , dat is h'm! thx!