---
title: "positioner 3 boxar vertikalt??"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/163935-positioner-3-boxar-vertikalt"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "eddy1"
published: "2007-08-27T16:09:32.000Z"
updated: "2007-08-28T08:15:48.000Z"
replies: 19
views: 633
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/163935-positioner-3-boxar-vertikalt"
---

# positioner 3 boxar vertikalt??

## #1 — eddy1, 2007-08-27T16:09Z

Hej

jag har tre boxar vertikalt.. Den översta vill jag ska ligga längst upp och vara 100 px hög. Boxen i botten ska vara 50px hög och ligga i nederkant.. Boxen som blir i mitten ska ha den höjd som blir över...

jag kan fan inte få till detta. Någon med ideer hur man ska gå tillväga..

Mvh

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

## #2 — jawbreaker, 2007-08-27T17:00Z

[Här är lite intressant läsning på A List Apart](http://www.alistapart.com/articles/conflictingabsolutepositions) som handlar om ungefär det där. Deras exempel innehåller förvisso inte tre boxar som du vill ha det, men det är lätt att åstadkomma med samma teknik.

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

## #3 — jarvklo, 2007-08-27T17:22Z

Här är en annan [variant](http://member.webforum.nu/2241/bottenfastsidfot-princip.html) ;)

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

## #4 — eddy1, 2007-08-27T18:03Z

Förstod inte någon av dem riktigt... måste ju få den övre boxen att ligga längst upp och den nedre ska hålla sig där. Sen måste ju höjden på boxen i mitten vara auto.. 

Hur?? Blir tokig på detta..

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

## #5 — jawbreaker, 2007-08-27T19:15Z

Med den varianten jag länkade till blir det väl ungefär såhär:

```
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#box1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: #c0c0c0;
	overflow: hidden;
}

#box2 {
	position: absolute;
	top: 100px;
	right: 0;
	bottom: 50px;
	left: 0;
	background: #a0a0a0;
	overflow: auto;
}

#box3 {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: #e0e0e0;
	overflow: hidden;
}
```

och

```
<div id="box1">
	Översta boxen
</div>

<div id="box2">
	Mittenboxen
</div>

<div id="box3">
	Nedre boxen
</div>
```

Detta fungerar dock inte i äldre versioner av IE (version 6 och tidigare), men det finns css- och javascriptfixar i artikeln om du måste få det att fungera även i äldre versioner av IE.

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

## #6 — jarvklo, 2007-08-27T21:32Z

Hmm....

Kanske vi missförstår dig lite...
Vad vill du att det skall hända med sidfoten om innehållet "i mitten" blir så stort att inte båda får plats? - Skall "mitten" förses med rullningslister och sidfoten ligga "klistrad" mot webbläsarens undre fönsterkant, eller skall sidfoten skjutas nedåt så att den finns direkt under mitteninnehållet?

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

## #7 — eddy1, 2007-08-28T05:38Z

yes i mitten ska det bli scrollist om det inte får plats. Men det är väl bara att sätta overflow till scrolling..

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

## #8 — eddy1, 2007-08-28T05:50Z

Det här blir lite dumt då jag ska dessa tre boxar centrerat på sidan??

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

## #9 — jawbreaker, 2007-08-28T05:57Z

Är problemet med den html-kod jag postade att den tar upp hela sidbredden när du egentligen vill ha en fast bredd centrerat på sidan? Ser det ut som det ska rent "höjdmässigt" annars?

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

## #10 — eddy1, 2007-08-28T06:06Z

japp. det verkar stämma.. Men just det att jag t.ex vill ha bredden satt till 700px och detta centrerat på sidan. Förut hade jag bara text-align:center i body'n men det funkar ju inte nu...
Sen såg jag att mitten boxen endast blir så stor som behövs för innehållet.. Går det få den att ha maximal storlek hela tiden  och sen overflow när det blir för mycket??

mvh

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

## #11 — jawbreaker, 2007-08-28T06:17Z

Testar du i IE 6 då eller? Det fungerar som sagt var inte i äldre versioner utan att trixa lite... Men okej, lägg till

```
#wrap {
	position: relative;
	width: 700px;
	height: 100%;
	margin: 0 auto;
}
```

och sedan din wrap-div runt de övriga:

```
<div id="wrap">
	<div id="box1">
	</div>

	<div id="box2">
	</div>

	<div id="box3">
	</div>
</div>
```

Och till sist ett "hack" för att förhoppningsvis få det att fungera i äldre versioner av IE. Lägg till följande på lämpligt ställe (inom head-taggarna på sidan).

```
<!--[if lt IE 7]>
<style type="text/css">
#box2 {
	width: 100%;
	height: expression(document.body.clientHeight - 150 + "px");
}
</style>
<![endif]-->
```

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

## #12 — tanten, 2007-08-28T06:26Z

Här finns en sida du kan kika lite på när det gäller "IE6-fix". css-en finns i head.
<http://www.cssplay.co.uk/layouts/bodyfix.html>

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

## #13 — eddy1, 2007-08-28T06:36Z

Det ser ju rätt ok ut nu... tack.
Men...
mitten boxen vill jag ju att denska vara så stor som möjligt.. alltså nu när det bara står lite text i så bir ju inte den boxen större än vad texten kräver??

<http://www.sackar.se/test>

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

## #14 — jawbreaker, 2007-08-28T06:45Z

Läs sista delen av mitt förra inlägg igen... Det fungerar inte i IE 6 eller tidigare om du inte lägger till den koden i din html-sida...

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

## #15 — eddy1, 2007-08-28T06:55Z

Jag ber om ursäkt.. Slarvigt av mig... 

nu är det nog fan precis som jag vill ha det..

Tusen tack..

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

## #16 — jawbreaker, 2007-08-28T06:57Z

Finemang! Varsågod.

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

## #17 — eddy1, 2007-08-28T07:11Z

ursäkta att jag stör igen. men det har redan brakat ihop.. på mitten boxen fick jag för mig att jag ville ha svarta kanter på mitten boxen.. så jag lade till:
	border-left: 1px solid black;
	border-right: 1px solid black;

Vänster linjen blir bra men fattar inte varför höger linjen flyttat ut sig någon px.. längst upp är det bra men där nere är det skumt???
<http://www.sackar.se/test>

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

## #18 — jawbreaker, 2007-08-28T07:27Z

Det borde fungera om du ändrar width: 100%; i css-hacket för gamla IE till width: 898px; istället. Det vill säga, bredden på #wrap minus 2px så att det får plats 1px svart ram på varje sida.

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

## #19 — eddy1, 2007-08-28T08:07Z

det var ju inte svårar ju. Fan..

Varför kan jag inte använda vertical align i den övre boxen.. Vill att en bild ska ligga precis i nedre kant av övre boxen så jag tog bort marginalerna i den och lade in en bild men det funkar inte??

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

## #20 — jawbreaker, 2007-08-28T08:15Z

Kan du inte bara absolutpositionera bilden också då?

```
#box1 img {
	position: absolute;
	bottom: 0;
}
```

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/163935-positioner-3-boxar-vertikalt