Float spørsmål - Noen som vet en ryddigere måte

[Avean]

Jeg har 3 elementer som jeg bruker float på, men jeg lurer på om jeg gjør det på mest ryddigste måte eller ikke. Tingen er at uansett hva jeg gjør så må den ene diven settes med en negativ margin for å komme opp i riktig høyde.

 

Her er et eksempel:

 

<div id="wrapper">
<div id="header"></div>
<div id="float1"></div>
<div id="float2"></div>
<div id="float3"></div>

 

#wrapper {
position: relative;
width: 800px;
height: 800px;
border: 1px solid black;
margin: 0 auto;
}
#header {
height: 100px;
width: 800px;
border: 1px solid black;
}

#float1 {
height: 100px;
width: 100px;
border: 1px solid black;
float: left;
}

#float2 {
height: 100px;
width: 100px;
border: 1px solid black;
float: left;
clear: left;
}

#float3 {
width: 600px;
height: 200px;
border: 1px solid black;
float: left;

}

 

Float 3 i dette tilfellet vil havne rett til høyre for Float 2. Jeg vil at Float 3 skal være på lik linje med float 1. Men jeg skjønner logikken på hvorfor den ikke gjør det, siden jeg måtte jo cleare for å få float 2 under float 1. Noen som vet en bedre måte å få posisjonert alle 3 uten å bruke noe negativ margin for å dytte den på riktig plass ?

 

Jeg har prøvd å bytte sånn at float 3 kommer rett etter float 1, da er de på linje uten clearen. Men da vil float 2 havne under float 3 mens den trenger å være rett under float 1, ikke 3

Endret 22. februar 2012 av Avean

[thelomen]

Er det egentlig ren float du ønsker? Har du vurdert noe slikt som f.eks. blueprintcss.org (utviklet av en nordmann)? Det er et css grid-system som gjør seksjonering og posisjonering enkelt, og finnes også i rene float-varianter.

[MikkelRev]

Er det egentlig ren float du ønsker? Har du vurdert noe slikt som f.eks. blueprintcss.org (utviklet av en nordmann)? Det er et css grid-system som gjør seksjonering og posisjonering enkelt, og finnes også i rene float-varianter.

Takk for tips. Kan det brukes sammen med SASS? Og har det sticky footer?

[sunsunsun]

Jeg ville lagt float1 og float2 i en DIV. Så satt "float: left" på den nye DIVen, og satt bredden til 102, piksler. Da kan du fjerne float og clear fra float1 og float2.

[Avean]

Jeg ville lagt float1 og float2 i en DIV. Så satt "float: left" på den nye DIVen, og satt bredden til 102, piksler. Da kan du fjerne float og clear fra float1 og float2.

 

Aner ikke hvorfor jeg ikke har tenkt på dette før Det funker jo selvsagt.

Skal uansett sjekke ut blueprintcss.org som du nevnte thelomen. Utvikler som regel alltid layouts som er utenom det normale så kan være nyttig i framtiden. Takker!

[agm]

Hva med #float3 { float:right; } ?

[Yawa]

Enkleste måten er å putte float1 og float2 i en egen container og sette den til float:left; samt sette float3 til float:right;

Det er grupperingsmåte jeg ofte beytter meg av. Vet det finnes flere renere løsninger som reduserer antall elementer, som bruk av display, position etc...