---
title: "Två 100% höga kolumner"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/166520-två-100-höga-kolumner"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Troxy"
published: "2007-11-19T13:05:32.000Z"
updated: "2007-11-19T22:20:59.000Z"
replies: 2
views: 451
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/166520-två-100-höga-kolumner"
---

# Två 100% höga kolumner

## #1 — Troxy, 2007-11-19T13:05Z

Okej,
jag trodde det skulle bli enkelt att bygga två simpla kolumner som är 100% höga. Men nej då  :e 
Som det är nu så huggs den ena kolumnen av när man scrollar, om den andra är högre.  :( 
Kolla här: <http://shadeevents.se/kolumner.html>
(Testar just nu bara för Firefox och IE7, tar resten sen  :P )

Hjälp vore tacksamt!  :) 

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
	<title>Delia - Vi serverar den godaste maten</title>
	<style type="text/css">
		html, body {
			width:100%;
			height:100%;
			margin:0;
			padding:0;
		}
		div#col1 {
			width:200px;
			min-height:100%;
			float:left;
			background-color:red;
		}
		div#col2 {
			width:200px;
			min-height:100%;
			background-color:green;
			float:left;
		}
	</style>
</head>
<body>
	<div id="col1">
	<p>
		Ut at odio. Proin a mauris. Duis vel turpis. Suspendisse potenti.
		Morbi eros ligula, vulputate eget, consequat quis, sodales vitae,
		risus. Aenean massa. Quisque ut magna a nisl vehicula mattis.
		Duis ante. Vivamus purus odio, ornare eu, mattis et, mattis lobortis,
		massa. Vivamus ac massa sit amet ante eleifend dictum. Duis scelerisque
		ipsum eu mi. Suspendisse consectetuer nibh venenatis urna. Nullam
		viverra vestibulum lectus.
	</p>
	<p>
		Ut at odio. Proin a mauris. Duis vel turpis. Suspendisse potenti.
		Morbi eros ligula, vulputate eget, consequat quis, sodales vitae,
		risus. Aenean massa. Quisque ut magna a nisl vehicula mattis.
		Duis ante. Vivamus purus odio, ornare eu, mattis et, mattis lobortis,
		massa. Vivamus ac massa sit amet ante eleifend dictum. Duis scelerisque
		ipsum eu mi. Suspendisse consectetuer nibh venenatis urna. Nullam
		viverra vestibulum lectus.
	</p>
	<p>
		Ut at odio. Proin a mauris. Duis vel turpis. Suspendisse potenti.
		Morbi eros ligula, vulputate eget, consequat quis, sodales vitae,
		risus. Aenean massa. Quisque ut magna a nisl vehicula mattis.
		Duis ante. Vivamus purus odio, ornare eu, mattis et, mattis lobortis,
		massa. Vivamus ac massa sit amet ante eleifend dictum. Duis scelerisque
		ipsum eu mi. Suspendisse consectetuer nibh venenatis urna. Nullam
		viverra vestibulum lectus.
	</p>
	</div>
	<div id="col2">
	<p>
		Ut at odio. Proin a mauris. Duis vel turpis. Suspendisse potenti.
		Morbi eros ligula, vulputate eget, consequat quis, sodales vitae,
		risus. Aenean massa. Quisque ut magna a nisl vehicula mattis.
		Duis ante. Vivamus purus odio, ornare eu, mattis et, mattis lobortis,
		massa. Vivamus ac massa sit amet ante eleifend dictum. Duis scelerisque
		ipsum eu mi. Suspendisse consectetuer nibh venenatis urna. Nullam
		viverra vestibulum lectus.
	</p>
	</div>
</body>
</html>
```

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

## #2 — Danne V, 2007-11-19T13:28Z

Det står lite om dilemmat här:
<http://www.webforum.nu/showthread.php?t=162076>
Men som jag fattar av tråden, så funkar ingen av lösningarna i IE i alla fall.
Jag har själv använt ett javascript från projectseven.com flera ggr. Funkar galant och är väldigt enkelt att lägga in:
<http://www.projectseven.com/tutorials/css/pvii_columns/index.htm>
Om man nu inte vill använda sig av tabeller, alltså....

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

## #3 — Troxy, 2007-11-19T22:20Z

Danne V tack för ditt svar!  :bire 
Trodde det skulle bli enklare nu när man inte hade en footer hängandes där under, men ack då.  :( 
Jag löste det med "faux columns", dvs. en repeterande bakgrundsbild som simulerar kolumner.
Då kan man ju faktiskt passa på att ge kolumnerna lite skugga och annat godis.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/166520-två-100-höga-kolumner
