---
title: "[css] Three column layout"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/128687-css-three-column-layout"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "CorneliusT"
published: "2005-05-22T16:33:12.000Z"
updated: "2005-05-24T12:49:13.000Z"
replies: 2
views: 522
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/128687-css-three-column-layout"
---

# [css] Three column layout

## #1 — CorneliusT, 2005-05-22T16:33Z

Hej

Jag sitter och filar på en uppdatering av [min klubbs hemsida](http://www.saik.o.se). Just nu är den uppbyggd av lite för många nästlade tabeller och jag vill gärna använda css istället för att göra den lite lättare att uppdatera osv. 
Nu till problemet. Layouten ska vara samma som den tidigare . Jag har gjort ett upplägg på hur div:sen ska vara positionerade.
<http://img181.echo.cx/my.php?image=layout9du.gif>
Visserligen lyckas jag någorlunda men en sak stör jag mig på. När / om man har inaktiverat css så kommer texten inte att sorteras i rätt ordning. Menyerna kommer efter news och det borde ligga i samma ordning som när css är aktivt. Jag tror det beror på att jag använder float. Finns det någon väg runt detta? Jag hittar varianter på google men utan "rätt" sortering.

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

## #2 — jarvklo, 2005-05-22T21:19Z

Välkommen till wF!

Om jag fattar dig rätt är du ute efter ordningen:

```
Header
Container
    Submenu
    Content
        News
        Sidebar
Footer
```

 där indenteringar är tänkta "inneslutningar"

I så fall kan du utgå ifrån <http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html>
och helt enkelt justera det som ligger inuti main ...

Du kan t.ex. dela upp den main två delar med samma metod som tvåspaltslösningen jag länkar till - float:left på den första (content i mitt exempel - motsvarar "news" i din skiss), och margin-left motsvarande den förstas bredd + moms på den andra (sidebar2 - motsvarar sidebar i din skiss)

Resultatet blir då detta (se kommentarer i CSS-delen av koden) <http://member.webforum.nu/2241/bottenfast_sidfot_alternativ_med_trespalt.html>
Notera hur de olika div-blocken ligger nästlade i varandra, inte bara för spalterna, utan också sidfoten och #belowthebottom - sidfotslösningen är lite speciell i just det exemplet jag utgick ifrån ;)

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

## #3 — CorneliusT, 2005-05-24T12:49Z

Många tack!
Får nog öva lite på att googla =)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/128687-css-three-column-layout