Korleis få to divar ved sida av kvarande?

[Gjest Slettet+65132]

Korleis kan eg få to divar til å plaserast ved sida av kvarande? Har fått det sån ca til, men det blir enten fucka i mozilla, mens det funka i IE, eller omvendt. Gje gjerne eit godt eksempel

 

[Anders Moen]

Du kan gjøre noe sånn:

<div id="wrapper">

<div id="venstre">
Dette er venstre siden
</div>

<div id="hoyre">
Dette er høyre siden
</div>

</div>

 

#wrapper {
width: 800px;
margin: 0 auto;
}

#venstre {
width: 400px;
float: left;
}

#hoyre {
width: 400px;
float: left;
}

 

 

Bare bytt breddene

 

Det som egentlig gjør at de står ved siden av hverandre er

float: left;

Kan også bruke float: right;

Da "går" den div'en du velger float: right; på til høyre.

 

 

Lykke til videre

[Gjest Slettet+65132]

no blir berre den høgre diven ståande langt bort i høgre hjørne

 

Edit: No står den høgre diven rett atte med med den venstre. Her har eg to problem:

- Det går ikkje an å legge inn padding eller kor langt frå venstre den skal ligge(høgre diven)

- Divar som ligg under venstre og høgre div blir ikkje automatisk flytta nedover ettersom dei to divane uvidar seg. Det hjelper ikkje å legge inn position: relative;, om det kan brukast då.

Endret 20. april 2007 av Slettet+65132

[KillYou]

Vist bredden på de 2 divene er bredere enn elementet rundt, vil de hoppe ned. husk bredde = bredde + padding + border. Så når du legger til padding må du ta vekk tilsvarende fra bredden.

[Gjest Slettet+65132]

Humm. ja der skjedde det noke ja. Men eg har fremdeles problem med at divane under ikkje flyttar seg automatisk ned...

 

Endå eit edit: Det funka når eg la inn float: left på diven under.

 

Takk for hjelpa folkens

Endret 20. april 2007 av Slettet+65132

[gommle]

Hvis du vil lage en div som "stopper" floaten, kan du bruke clear:both;

 

<div id="wrapper">

<div id="venstre">
Dette er venstre siden
</div>

<div id="hoyre">
Dette er høyre siden
</div>

<div id="footer">
Dette er footeren
</div>

</div>

 

#wrapper {
width: 800px;
margin: 0 auto;
}

#venstre {
width: 300px;
float: left;
border:1px solid black;
}

#hoyre {
width: 300px;
float: left;
border:1px solid black;
}

#footer {
clear:both;
border:1px solid black;
}

 

Gadd ikke teste dette, men det _burde_ funke.