---
title: "div - höjd som förändras efter innehåll."
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/150116-div-höjd-som-förändras-efter-innehåll"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Addeladde"
published: "2006-08-14T16:50:41.000Z"
updated: "2006-08-15T12:44:51.000Z"
replies: 9
views: 494
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/150116-div-höjd-som-förändras-efter-innehåll"
---

# div - höjd som förändras efter innehåll.

## #1 — Addeladde, 2006-08-14T16:50Z

Hej

Titta på bifogade bilden.
Hur får man divens höjd att anpassas efter innehållet i rutan?

HTML - Endast en liten del av koden

```
 
<div id="contentContainer">
		  
			<div id="courseContainer">
			<div id="flik">Kurser</div>
			<div id="topCourse"></div>
			<div id="middleCourse">
			  <div id="leftNameBar"><img src="images/layout/flipHeadlines/myCourses.gif" alt="Mina kurser" width="41" height="198" /></div>
				<div id="contentListing">bla bla</div>
			</div>
			<div id="bottomCourse"></div>
		</div>
```

Tillhörande CSS

```
#courseContainer {
  margin-top: 40px;
	width: 639px;
	min-height: 700px;
}

#topCourse {
	width: 639px;
	height: 79px;
	background-image:url(images/layout/bgListingTop.gif);
	background-repeat: no-repeat;
}

#middleCourse {
	width: 639px;
	background-image: url(images/layout/bgListing.gif);
	background-repeat:repeat-y;
	min-height: 500px;
}
#bottomCourse {
	clear: both;
	width: 639px;
	height: 40px;
	background-color: #dbdbdb;

}

#topCourse {
	width: 639px;
	height: 79px;
	background-image:url(images/layout/bgListingTop.gif);
	background-repeat: no-repeat;
}
#flik {
	width: 569px;
	height: 39px;
	background-image:url(images/layout/flik.gif);
	background-repeat: no-repeat;
	background-position: 63px 0px;
	padding-left: 75px;
	padding-top: 10px;
	font-family: Arial;
	color: #666666;
}

#leftNameBar{
  width: 53px;
	height: 400px;
	vertical-align: bottom;
	float: left;
	padding-left: 12px;

}

#contentListing{
  width: 571px;
	float: right;
	margin-right: 1px;
	margin-left: 2px;

}
```

Bilagor:

- [slask.gif](https://www.webforum.nu/a/11734.gif)

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

## #2 — Fuel, 2006-08-14T17:32Z

Mycket DIVar för det innehållet .. du bör se över koden

Vilken div innehåller texten ?

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

## #3 — Troxy, 2006-08-14T20:56Z

Höjden på en div anpassar sig alltid automatiskt efter innehållet, om man inte anger en fast höjd.

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

## #4 — Addeladde, 2006-08-14T22:19Z

> **Fuel skrev:**
>
> Mycket DIVar för det innehållet .. du bör se över koden
> 
> Vilken div innehåller texten ?

contentListing innehåller texten

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

## #5 — Fuel, 2006-08-14T22:26Z

stoppa in en \<br style="clear:both;" /\> längst ner i contentListing och berätta om det händer nåt

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

## #6 — Addeladde, 2006-08-14T22:43Z

Nope ingen skillnad.
Bifogar det lilla projektet

Bilagor:

- [foo.zip](https://www.webforum.nu/a/11744.zip)

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

## #7 — zcorpan, 2006-08-14T23:01Z

Är det #pageContainer som ska sträcka sig ända ner? Isf får du bana flöten för det elementet.

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

## #8 — Addeladde, 2006-08-14T23:14Z

Japp men hur gör jag det?

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

## #9 — zcorpan, 2006-08-15T02:19Z

Det finns olika sätt att göra det på. Antingen som Fuel föreslog genom att lägga till ett element i slutet av diven som har deklarationen 'clear:both'; eller genom att lägga till ett pseudo-element i slutet av diven med CSS genererat innehåll:

```
#pageContainer::after { content:""; display:block; clear:both; }
```

 (eftersom IE saknar stöd för genererat innehåll behöver elementet ha "layout" istället, vilket redan verkar vara fallet); eller genom att ange 'overflow:auto' eller 'overflow:hidden' (men jag skulle inte rekommendera att använda 'overflow' för detta eftersom det verkar skapa problem med auto-scrollning och text-markering i vissa webbläsare).

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

## #10 — Addeladde, 2006-08-15T12:44Z

Tack!

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/150116-div-höjd-som-förändras-efter-innehåll