---
title: "“Css. Tre boxar, angivet i % och pixlar??”"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/156539-css-tre-boxar-angivet-i-och-pixlar"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "eddy1"
published: "2007-01-29T19:27:40.000Z"
updated: "2007-01-30T17:11:23.000Z"
replies: 12
views: 416
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/156539-css-tre-boxar-angivet-i-och-pixlar"
---

# “Css. Tre boxar, angivet i % och pixlar??”

## #1 — eddy1, 2007-01-29T19:27Z

Hej

har fölkjande rader:

\<div class="topbox"\>\</div\>
\<div class="middlebox"\>\</div\>
\<div class="bottombox"\>\</div\>

Nu vill jag att "middlebox" ska vara 400px hög och topbox och bottombox ska vara 50% var av återstående höjd.. Går det göra??

Mvh

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

## #2 — zcorpan, 2007-01-29T20:16Z

```
html { height:100%; }
body { display:table; width:100%; height:100%; margin:0; }
.topbox, .bottombox { display:table-row; height:50%; }
.middlebox { display:table-row; height:400px; }
```

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

## #3 — silfver, 2007-01-29T20:25Z

Snyggt, zcorpan! Hur fungerar den lösningen i olika läsare? :)

**r\\** Opera fungerar fint. Safari ofint.

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

## #4 — eddy1, 2007-01-29T20:25Z

fick inte det att fungera?

topbox blir ca 50% av hela sidan.. samt bottombox blir 50%, sen blir ju middlebox 400px. alltså måste man scolla sidan... Jag kanske gjort fel eller??

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

## #5 — zcorpan, 2007-01-29T21:13Z

Nej då, mer troligt är att du testar i en webbläsare som saknar stöd för display:table och dess vänner. En vild gissning är IE. :)

Hur ser det ut i Safari? Är det den senaste?

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

## #6 — silfver, 2007-01-29T21:16Z

> **zcorpan skrev:**
>
> Hur ser det ut i Safari? Är det den senaste?

> **silfver skrev:**
>
> Opera fungerar fint. Safari ofint.

Japp, senaste versionen.

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

## #7 — zcorpan, 2007-01-29T22:18Z

Jag menade att jag ville ha lite mer utförlig beskrivning (eller skärmdump) än "ofint"... ;)

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

## #8 — silfver, 2007-01-29T22:20Z

> **zcorpan skrev:**
>
> Jag menade att jag ville ha lite mer utförlig beskrivning (eller skärmdump) än "ofint"... ;)

Jaha... ;)

Bilagor:

- [Bild 1.png](https://www.webforum.nu/a/13565.png)

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

## #9 — zcorpan, 2007-01-29T22:21Z

Hmmm... liten modifiering: 

```
html { height:100%; }
body { display:table; width:100%; height:100%; margin:0; }
.topbox, .bottombox { display:table-row; [b]/* height:50%; */[/b] }
.middlebox { display:table-row; height:400px; }
```

Det såg tydligen likadant ut i Firefox som i Safari. Lat som jag är testade jag inte ens i Firefox först...   :r

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

## #10 — eddy1, 2007-01-30T07:45Z

a visst va bra det fungerade i firefox... Men hur ska jag komma runt så att det funkar iallafall i IE 6??

```
/* height:50%; */
```

bara kommentar eller? Hur funkar display då?

Sen provade jag följande rader. Men detta fungerar bara på IE 6 och inte Firefox?

	border-top-color: Black;
	border-top-style: solid;
	border-top-width: 1px;

Bra jobbat annars!
Mvh

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

## #11 — zcorpan, 2007-01-30T08:56Z

Ja det går ju inte få perfekt. Men någorlunda nära kanske: 

```
/* egenskaper med ! framför sig är för ie */
html { height:100%; }
body { display:table; width:100%; height:100%; !min-height:440px; margin:0; position:relative; background:lime;  }
.topbox { display:table-row; }
.bottombox { display:table-row; !position:absolute; !bottom:0; !width:100%; }
.middlebox { display:table-row; height:400px; background:yellow; !position:absolute; !top:50%; !margin-top:-200px; !width:100%; }
```

Vill du ha borders får du ange border-collapse:collapse på body.

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

## #12 — eddy1, 2007-01-30T14:53Z

Fan zcorpan..

Du va rätt jävlig ju. 

Men vad gör border-collapse ??  sen det här display ihop med table, va e det för historia och att du i body classen anger relative ??

Det funkar ju!!

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

## #13 — zcorpan, 2007-01-30T17:11Z

> **eddy1 skrev:**
>
> Fan zcorpan..
> 
> Du va rätt jävlig ju.

Tack. :)

> **eddy1 skrev:**
>
> Men vad gör border-collapse ??

Det finns två [bordermodeller för tabeller i CSS 2.1](http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse). "separate" och "collapsed". "separate" är default och med den kan man inte ha border på tabellrader utan bara på celler och hela tabellen. 

> **eddy1 skrev:**
>
> sen det här display ihop med table, va e det för historia

 Hmm... Jag förstår inte frågan. :)

> **eddy1 skrev:**
>
> och att du i body classen anger relative ??

Det är för att body ska vara ett [containing block för absolut positionerade element](http://www.autisticcuckoo.net/arkiv.php?id=2004/12/07/relativt-absolut). Det är bara för IE, så du kan sätta ett ! före om du vill, men å andra sidan gör det ingen skada om andra webbläsare får det heller.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/156539-css-tre-boxar-angivet-i-och-pixlar