---
title: "Float för att plöacera två divar bredvi varandra ger konstigt resultat. Lösning?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/114176-float-för-att-plöacera-två-divar-bredvi-varandra-ger-konstigt-resultat-lösning"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Tjock-Erik"
published: "2004-10-22T18:26:46.000Z"
updated: "2004-10-22T22:43:36.000Z"
replies: 4
views: 438
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/114176-float-för-att-plöacera-två-divar-bredvi-varandra-ger-konstigt-resultat-lösning"
---

# Float för att plöacera två divar bredvi varandra ger konstigt resultat. Lösning?

## #1 — Tjock-Erik, 2004-10-22T18:26Z

Kodexempel:

\<div  id="whatever" style="background-color: #FF0000;"\>
     \<div style="float: left;"\>Vänster\</div\>
     \<div style="float: right;"\>Höger\</div\>
\</div\>
\<div\>HEJ gg g g f gfg fg fg fg fg fg f g f g f g f gf gf \</div\>

Denna kod resulterar i att "Vänster" står längst till vänster i #whatever och "Höger" till höger. Problemet är bara att "whatever inte anpassas efter innehållet i de båda divarna. Jag kan inte heller ange höjden på #whatever för då blir det fel om användarna byter textstorlek och dessutom kan innehållet variera.

Finns det något sätt att få #whatever att bli större om innehållet i de båda divarna innehåller? Jag har testat display: inline och strunta i float, men då händer inget när jag anger width. Samma sak händer om jag bestämmer postition med absolute och top, left o.s.v.

Redigerat av Erik Juhlin med hänvisning till: <http://www.webforum.nu/faq.php?faq=about_wf#rules_4>

Permalänk: https://www.webforum.nu/p/114176

## #2 — silfver, 2004-10-22T18:43Z

Egentligen har jag ingen lust att hjälpa dig när du är så oerhört omogen. Men vad gör man inte...

```
<div id="whatever" style="background-color: #FF0000;">
<div style="float: left;">Vänster</div>
<div style="float: right;">Höger</div>
[b]<br clear="all" />[/b]
</div>
<div>HEJ gg g g f gfg fg fg fg fg fg f g f g f g f gf gf </div>
```

Det borde funka.

Permalänk: https://www.webforum.nu/p/1466857

## #3 — Tjock-Erik, 2004-10-22T18:51Z

Tack ska du ha. Det fungerade utmärkt.

Permalänk: https://www.webforum.nu/p/1466863

## #4 — Tjock-Erik, 2004-10-22T18:58Z

I alla fall i Opera och Mozilla. Är det någon annan som har någon lösning på problemet?

Permalänk: https://www.webforum.nu/p/1466868

## #5 — jarvklo, 2004-10-22T22:43Z

Hmm..

En klassisk kokboksmetod är att lägga till en "empty spacer div" längst ner i den omslutande div-taggen såhär:

```
<div id="whatever" style="background-color: #FF0000;">
  <div style="float: left;">Vänster</div>
  <div style="float: right;">Höger</div>
  <div style="clear:both;font-size:0;line-height:0">&amp;nbsp;</div>
</div>
<div>HEJ gg g g f gfg fg fg fg fg fg f g f g f g f gf gf </div>
```

Permalänk: https://www.webforum.nu/p/1466962

---

Tråden på webben: https://www.webforum.nu/amne/html-css/114176-float-för-att-plöacera-två-divar-bredvi-varandra-ger-konstigt-resultat-lösning