positioner 3 boxar vertikalt??

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

Här är lite intressant läsning på A List Apart 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.

Här är en annan variant ;)

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..

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.

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?

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..

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

Ä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?

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

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]-->

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

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

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...

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

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

Tusen tack..

Finemang! Varsågod.

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

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.

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??

Kan du inte bara absolutpositionera bilden också då?

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