---
title: "En två-kolumn-layout"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/143389-en-två-kolumn-layout"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "echoSwe"
published: "2006-03-04T18:37:29.000Z"
updated: "2006-03-04T22:28:22.000Z"
replies: 2
views: 352
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/143389-en-två-kolumn-layout"
---

# En två-kolumn-layout

## #1 — echoSwe, 2006-03-04T18:37Z

Tja

En kolumn. margin: 0 auto; - wrapper.

I denna, som child, en header - header.

Ännu ett child, leftColumn, samt ännu ett, rightColumn.

Sist ett child till wrapper, footer.

wrapper- min-height: 100%; (i FF)
leftColumn- float:left; width: ...; padding-bottom: 50px;
rightColumn- float:right; width ...; padding-bottom: 50px;
footer- margin: 0 auto; margin-top:-50px; height: 50px;

Nu vill jag att footern inte ska gå upp för långt om man minskar viewport vertikalt, under eller över mina floatade kolumner som genom att ha varit floatade inte tar upp utrymme.

Då har jag tre val - antingen att sätta "overfloat: auto;" på min wrapper. Detta ser fult ur i IE, då det kommer scrollbars på "wrapper" om man minskar viewport...
<http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/>

Eller att använda en div till:

```
<div wrapper>
    <div wrapper2>
          <header> osv ...
    </div>
</div>
```

och använda <http://orderedlist.com/articles/clearing-floats-fne/> det vill säga att floata wrapper2 fast ha den till 100% width. Detta borde funka i IE, har inte testat.

eller att använda <http://www.positioniseverything.net/easyclearing.html> och lägga klassen "clearfix" på min wrapper. Detta funkar så vitt jag vet i IE.

För grejen är ju att jag vill ha mer än en kolumn (och om man inte floatar båda kolumner utan bara använder margin på den ena, så kommer IE att ha problem med ett par pixlar) och en footer som går in över wrapper.

Hur hade ni löst det?
Lägger ni också padding i era kolumner för att göra plats för footern?

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

## #2 — jarvklo, 2006-03-04T22:13Z

Nja - jag brukar lägga till en tom div inuti "wrapper" som är lika hög som footern istället för att ha padding-bottom i kolumnerna...

Exempel: <http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html>

Verkar funka bra överlag även om jag väljer float: left och float: right på respektive vänster och högerkolumn (vilket exemplet alltså inte gör)

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

## #3 — echoSwe, 2006-03-04T22:28Z

Tjena

Jo, den har jag sett :), och att lägga till en sådan div är ju w3c's rekommendation, men snacket går om att det är ett sätt som tyvärr innebär markup för något om inte tillför någon information till sidan. Men det funkar ju som förväntat :).

\<annan tråd\>
Har du nån aning om hur man kan få body att uppföra sig som html elementet då? Med bakgrunden och så?
\</annan tråd\>

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/143389-en-två-kolumn-layout