---
title: "Wrapper kollapsar när den är fylld med flytande divvar. Hur fixa?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/186174-wrapper-kollapsar-när-den-är-fylld-med-flytande-divvar-hur-fixa"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Danne V"
published: "2011-02-24T17:43:48.000Z"
updated: "2011-02-24T20:50:36.000Z"
replies: 5
views: 752
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/186174-wrapper-kollapsar-när-den-är-fylld-med-flytande-divvar-hur-fixa"
---

# Wrapper kollapsar när den är fylld med flytande divvar. Hur fixa?

## #1 — Danne V, 2011-02-24T17:43Z

När jag gör webbläsarfönstret mindre än 1200px så kollapsar layouten. Divvarna hamnar under varandra, footern åker upp.
Har iofs bara kollat i Camin - Gecko-läsare - på Mac, men hur ordnar jag detta?

CSS:

```
@charset "UTF-8";
* {margin:0; padding:0;}
html , wrapper {height:100%}
body {
font: 13px/19px Verdana, Geneva, sans-serif;
color: #333;
}
#wrapper {
	width:1200px;
	overflow:hidden;
	margin:0 auto;
}
.clearboth {
	clear:both;
}
#firstcolumn {
width:200px;
background:#3C6;
}
#secondcolumn {
width:600px;
background:#CC0;
}
#thirdcolumn {
width:280px;
background:#F30;
}
#fourthcolumn {
width:180px;
background:#369;
}
.columns {
	float:left;
	height:500px;
}
#footer {
background: #C03;
width:1260px;
}
```

HTML:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<link href="styles/main3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id"=wrapper">
<div id="firstcolumn" class="columns">
<div id="1banner">banner 1</div>
</div>
<div id="secondcolumn" class="columns">
<div id="2banner">banner 2</div>
</div>
<div id="thirdcolumn" class="columns">
<div id="webb-tv">webb tv</div>
<div id="tabell">tabell</div>
<div id="laguppst">laguppst</div>
</div>
<div id="fourthcolumn" class="columns">
<div id="3banner">Banner 3</div>
<div id="4banner">Banner 4</div>
<div id="5banner">Banner 5</div>
<div id="6banner">Banner 6</div>
</div>
<div class="clearboth"></div>
<div id="footer">footer</div>
</div>
</body>
</html>
```

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

## #2 — Danne V, 2011-02-24T19:21Z

Löst. Jag hade 1200px bred wrapper, men divvar på 1260px.
Suck....

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

## #3 — voigtann1, 2011-02-24T19:29Z

Vet inte om du har sett det men du har ett element i din CSS som heter Wrapper (saknar nog bara #) och 

```
<div id"=wrapper">
```

Är en miss där (är nog kopieringsfel bara) ;)

Ett tips är också istället för att köra samma bredd som den totala bredden, strunta i att köra det i din CSS, div är ju ett block-element. Jag tycker alltid det skapar mer problem än vad det behöver vara (exempelvis om du skall ändra bredden någon gång så räcker det att ändra det på ett ställe (när det gäller de divar som skall ha samma bredd som wrapper elementet).

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

## #4 — Danne V, 2011-02-24T19:33Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1529863)**
>
> Vet inte om du har sett det men du har ett element i din CSS som heter Wrapper (saknar nog bara #) och 
>
> ```
> <div id"=wrapper">
> ```
>
> Är en miss där ;)

Ja, jäklar!!! Tack. Du har ju falkögon!  (y)

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

## #5 — voigtann1, 2011-02-24T19:34Z

Ett annat tips är att inte skapa element i onödan, clear block elementet kan lösas på ett snyggare sätt ( i mina ögon ), mindre DOM objekt om man skall jobba med javascript: <http://www.webtoolkit.info/css-clearfix.html>

edit:

Sen är det få inte ett ID börja med ett tal, även detta är nog bara mockup data du har för exempel.

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

## #6 — Danne V, 2011-02-24T20:50Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1529865)**
>
> Ett annat tips är att inte skapa element i onödan, clear block elementet kan lösas på ett snyggare sätt ( i mina ögon ), mindre DOM objekt om man skall jobba med javascript: <http://www.webtoolkit.info/css-clearfix.html>
> 
> edit:
> 
> Sen är det få inte ett ID börja med ett tal, även detta är nog bara mockup data du har för exempel.

Dom där clear blocken blev kvar efter att jag försökte lista ut vad det var som orsakade kollapsen.

Numren på id:na var helt riktigt bara mina egna "anteckningar" (hann skriva korrekt på en del andra innan jag klistrade in koden.)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/186174-wrapper-kollapsar-när-den-är-fylld-med-flytande-divvar-hur-fixa
