---
title: "float som flyter ihop"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/189166-float-som-flyter-ihop"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "apg29"
published: "2012-02-19T14:01:21.000Z"
updated: "2012-02-19T14:34:28.000Z"
replies: 3
views: 584
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/189166-float-som-flyter-ihop"
---

# float som flyter ihop

## #1 — apg29, 2012-02-19T14:01Z

Kan man få olika div i olika storlekar att flyta samman så att det inte blir några tomma luckor (fält)?

```
<div style="width:200px">

<div style="float:left; width:100px; height:100px; background:red; border:1px solid black">1</div>

<div style="float:left; width:100px; height:50px; background:red; border:1px solid black">2</div>

<div style="float:left; width:100px; height:200px; background:red; border:1px solid black">3</div>

<div style="float:left; width:100px; height:100px; background:red; border:1px solid black">4</div>

</div>
```

Som det är nu så blir ovanför nr 4 tomt fält, den flyter inte ihop med nr 1 och 3 som jag egentligen vill. Går det att göra och i så fall hur?

Tack på förhand.

Bilagor:

- [div.jpg](https://www.webforum.nu/a/23231.jpg)

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

## #2 — Danne V, 2012-02-19T14:13Z

T.ex. genom att ta bort float på rutorna och istället skapa två kolumner vara den ena floatas:

```
<div style="width:100px;float:left;">

<div style="width:100px; height:100px; background:red; border:1px solid black">1</div>

<div style="width:100px; height:50px; background:red; border:1px solid black">2</div>
</div>
<div style="width:100px; margin-left:100px;">
<div style="width:100px; height:200px; background:red; border:1px solid black">3</div>

<div style="width:100px; height:100px; background:red; border:1px solid black">4</div>

</div>
```

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

## #3 — casca, 2012-02-19T14:21Z

1) Din kod fungerar inte som den är, eftersom 1px border gör att divens box blir 102px men din container är bara 200px.

2) Vet inte om det är exakt det du frågar om, men om du clearar floaten efter varannan div så placeras boxarna i "underkant". Se bifogad bild.

```
<div style="width:204px">

<div style="float:left; width:100px; height:100px; background:red; border:1px solid black">1</div>

<div style="float:left; width:100px; height:50px; background:red; border:1px solid black">2</div>
    
<div style="clear: both">

<div style="float:left; width:100px; height:200px; background:red; border:1px solid black">3</div>

<div style="float:left; width:100px; height:100px; background:red; border:1px solid black">4</div>
   
<div style="clear: both">

</div>
```

Bilagor:

- [clearboth.jpg](https://www.webforum.nu/a/23232.jpg)

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

## #4 — apg29, 2012-02-19T14:34Z

Tack för svaren och de olika förslagen.

Nej, jag vill inte lägga boxarna i två kolumner, utan de ska så att säga flyta ihop intill med varandra, som min exempelbild här under.

Bilagor:

- [div2.jpg](https://www.webforum.nu/a/23233.jpg)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/189166-float-som-flyter-ihop