[CSS] twee divs naast elkaar

[T i M]

Ik loop tegen een vervelend probleem aan. Het volgende wil ik bereiken:

code:

header:
------------------------------------------------------------------------------------------------------------------------------------------------
|                                                                                                    |                                          |
|Dit is het gedeelte wat rekbaar moet zijn, bv met grote reso               |      plaatje van 300px           |
|moet dit kunnen uitrekken en heeft voor die voorbeeld een grijze bg.   |                                          |
|                                                                                                    |                                          |
------------------------------------------------------------------------------------------------------------------------------------------------

De volgende code heb ik:

Cascading Stylesheet:

#main {
    display: inline;
    width: 100%;    
}
#left {
    float: left;
    width: 100%;
    background-color: #00FF00;
}
#right {
    float: right;
    width: 300px;
    background-image: url(plaatje.png);
}

HTML:

<div id="main">
    <div id="left"></div>
    <div id="right"></div>
</div>

Hier op GOT kan ik niet echt nuttige info bekijken. Veel mensen willen weer net iets anders als mij. Ik zal het nog een stukje duidelijker proberen te maken.

Ik heb aan de linkerkant een balk die uit moet kunnen rekken, en aan de rechterkant moet een plaatje komen met een vaste afmeting.

[Borizz]

Zolang je #left een width van 100% geeft, zal #right er nooit naast passen! Dit probleem is al erg vaak besproken op GoT (en vele andere websites). Even zoeken kan dus geen kwaad. Je kan bijvoorbeeld zoeken op 'faux columns' of even kijken bij A list apart.