Div onder de floats

Hallo,

Ik ben bezig met een layout, en ik heb een klein probleempje.

Ik heb 2 float left divs, en dan 1 float right. Die horen op 1 rij,
dan wil ik op de andere rij nog een div zetten.

Nu gaat die div pas beginnen onder de hoogte van de langste div, terwijl ik dat anders wil, zo;

Zo is het nu:
http://sander.freux.nl/klanten/one2xs/gadget.html

zo wil ik het;

Spoiler tonen

Code van de container met de 4 divs;

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

#contain{
width:980px;
height:auto;
margin:0 auto;
margin-top:20px;
}
#contain .menu{
width:213px;
height:200px;
border:1px solid #444;
background:#fff;
float:left;
}
#contain .content{
width:603px;
height:200px;
border:1px solid #444;
background:#fff;
float:left;
margin-left:18px;
}
#contain .adv{
width:120px;
height:630px;
border:1px solid #444;
background:#fff;
float:left;
margin-left:18px;
}
#contain .online{
width:834px;
height:60px;
border:1px solid #444;
background:#fff;
float:left;
}

De HTML;

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11
12
13

Ik ben blij als je mij (en Jochems) kan helpen

Misschien kan je beter met een table werken

Stefvdwel schreef:

Misschien kan je beter met een table werken

Hmm, dat zou mogelijk zijn, maar dat geeft langere code en werkt zeer onhandig naar mijn mening... Ik denk toch dat er nog een andere oplossing kan zijn

Sanderc schreef:

Eerdere citaten tonen

Stefvdwel schreef:

Misschien kan je beter met een table werken

Hmm, dat zou mogelijk zijn, maar dat geeft langere code en werkt zeer onhandig naar mijn mening... Ik denk toch dat er nog een andere oplossing kan zijn

Je moet het zelf weten, maar ik zou met een table werken.
Verder adviseer ik de naam van de div ín de div te zetten, dat is wat overzichtelijker

Met een table werken is juist niet slim. Deze is bedacht om informatie te weergeven zoals bedoeld is, dus in een letterlijke tabel en niet om een website in te delen. Al snel krijg je tables in tables, waardoor de laadtijd van je pagina langer wordt. Je kan beter met position werken. Sowieso is het gebruiken van tables om je websites in te delen een bad practice.

onder de floats een clear: both;

Stefvdwel schreef:

Misschien kan je beter met een table werken

tables

class adv float: right meegeven en dan class online ook float: right. vervolgens kan je zelf wel met margin het wat uit elkaar halen.

Superb schreef:

onder de floats een clear: both;

Onder elke float een nieuwe div met clear both, of gewoon dezelfde div clear both geven?

toevoeging op 2 juli 2013, 17:22:50:

Sanderc schreef:

Eerdere citaten tonen

Superb schreef:

onder de floats een clear: both;

Onder elke float een nieuwe div met clear both, of gewoon dezelfde div clear both geven?

Ik heb het beide getest en het werkte niet, het bugde helemaal, alles ging onder elkaar staan.

Rudie schreef:

class adv float: right meegeven en dan class online ook float: right. vervolgens kan je zelf wel met margin het wat uit elkaar halen.

Nee, dan gaat het zo;

http://sander.freux.nl/klanten/one2xs/gadget.html

Als jij 1 div onder 2 divs met een float wilt zetten, moet je onder de laatste div van die 2 divs een div met clear both zetten

Superb schreef:

Als jij 1 div onder 2 divs met een float wilt zetten, moet je onder de laatste div van die 2 divs een div met clear both zetten

Dan gaat hij nog steeds niet goed staan?

Het kan ook met margin-top -100px;

100 moet je veranderen preciese lengte moet je zelf uitvogelen door het te verhogeren/verlageren

Trans schreef:

Het kan ook met margin-top -100px;

100 moet je veranderen preciese lengte moet je zelf uitvogelen door het te verhogeren/verlageren

Verhogeren moet natuurlijk verhogen zijn & verlageren moet natuurlijk verlagen zijn..

Stefvdwel schreef:

Misschien kan je beter met een table werken

NOOIT! NOOIT! NOOIT!

Rogier schreef:

Eerdere citaten tonen

Stefvdwel schreef:

Misschien kan je beter met een table werken

NOOIT! NOOIT! NOOIT!

Rustig!
Trippert