[CSS] Div niet onder maar naast andere div

[Reveller]

Ik heb de volgende code:

code:

<style>
.main {width: 300px;}
.feature {float: left; width: 90px; padding-bottom: 5px;}
.feature.middle, .feature.right {padding-left: 10px; border-left: 1px #ccc solid;}
.quote {float: left; width: 150px;}
</style>

<div class="main">
  <div class="feature left">Feature 1</div>
  <div class="feature middle">Feature 2</div>
  <div class="feature right">Feature 3, feature three, feature drie</div>
  <div class="quote">Een quote is een quote, of course of course</div>
</div>

In de browser ziet dit er als volgt uit (de quote-div begint op de hoogte waar de feature right div stopt):

Alleen, doordat ik .quote 150 pixels breed heb gemaakt en een float: left heb meegegeven, verwachtte ik dat de quote naast de lange feature right div en onder de features left en middle divs zo worden geplaatst, zoals:

Dit gebeurt dus niet. Ik dacht dat ik misschien id's ipv classes zou moeten gebruiken, maar als ik alle classes in id's verander, blijft het resultaat gelijk. Wat doe ik verkeerd?

[ Voor 21% gewijzigd door Reveller op 26-05-2006 16:50 ]

[RAJH]

bij de class quote de float: left weghalen

[JHS]

90*3 = 270; 270+150 = 420; 420 > 300; dus past het niet, derhalve komt hij eronder te staan . Is voor quote blockquote overigens niet een beter element?

RAJH: Daar multiple float lefts te gebruiken komen de divisions juist naast elkaar te staan, zover dat binnen de container past. Zie ook deze testcase.

[Reveller]

@RAJH, dat werkt niet.
@JHS: volgens mij praten jij en ik over iets anders. Feature 1 en 2 is (2 * 90 =) 180 pixels breed en dus moet daar de quote div (150 pixels) onder passen. Voor de duidelijkheid heb ik het voorbeeld wat aangepast.

Ik wil dit:

Maar ik krijg:


Ik gebruik de volgende code:

code:

<style>
.main {width: 300px;}
.feature {float: left; width: 90px; padding-bottom: 5px;}
.feature.left {background: red;}
.feature.middle {background: yellow;}
.feature.right {background: blue;}
.feature.middle, .feature.right {padding-left: 10px;}
.quote {float: left; width: 150px; background: lime;}
</style>

<div class="main">
  <div class="feature left">Feature 1</div>
  <div class="feature middle">Feature 2</div>
  <div class="feature right">Feature 3, feature three, feature drie</div>
  <div class="quote">Een quote is een quote, of course of course</div>
</div>

Nogmaals: aangezien ik de quote div een float left meegeef, en deze div 30 pixels minder breed is dan de twee divs waar hij onder moet, zou deze css toch moeten werken?

[crisp]

nee, dat is niet hoe floats werken

[Reveller]

crisp schreef op vrijdag 26 mei 2006 @ 18:24:
nee, dat is niet hoe floats werken

Oke, maar wat is dan wel een oplossing? Als ik de quote div een float: left meegeef, werkt het niet. Zonder float: left (zoals RAJH voorstelde) werkt het ook niet

Het enige alternatief dat ik kan bedenken is om het met een tabel op te lossen, maar dat is niet echt Web 2.0 (volgens de intermediair van deze week)

[ Voor 5% gewijzigd door Reveller op 26-05-2006 18:39 ]

[JHS]

De makkelijkste oplossing die ik zo snel kan bedenken is feature 1, 2 en quote in een aparte division te zetten . Niet de mooiste oplossing, want onnodige extra markup. Oplossingen met positioning worden denk ik echter moeilijker, aangezien de hoogte niet bekend is.

[Reveller]

Uiteindelijk ben ik hiervoor gegaan:

code:

<style>
.main {width: 300px;}
.feature {width: 100px; padding-bottom: 5px;}
.feature.left {float: left; background: red;}
.feature.middle {float: left; background: yellow;}
.feature.right {float: right; background: blue;}
.feature.middle, .feature.right {padding-left: 10px;}
.quote {width: 150px; background: lime;}
</style>

<div class="main">
  <div class="feature left">Feature 1</div>
  <div class="feature middle">Feature 2</div>
  <div class="feature right">Feature 3, feature three, feature drie</div>
  <div class="quote">Een quote is een quote, of course of course</div>
</div>

Werkt perfect Hoop alleen dat het ook correcte css is

[JHS]

Ziet er goed uit hoor . Er is tegenwoordig overigens ook een CSS highlighter via [code=css] .