---
title: "Container vill inte expanera i FF"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/178959-container-vill-inte-expanera-i-ff"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Hammarstrom87"
published: "2009-06-11T10:46:02.000Z"
updated: "2009-06-14T08:59:48.000Z"
replies: 11
views: 837
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/178959-container-vill-inte-expanera-i-ff"
---

# Container vill inte expanera i FF

## #1 — Hammarstrom87, 2009-06-11T10:46Z

Hej!

Blir inte klok på detta. Min container-div vägrar att följa med innehållet.
I IE funkar det men inte i FF.

\-----Index.asp--------------------------------------------

    \<!-- Container --\>
    \<div id="container"\>

    	\<!-- Main content --\>
    	\<br /\>
	\<!--#Include File="globalMain.asp"--\>

    	

    \<!-- End Container --\>
    \</div\>

\-----Style.css--------------------------------------------

BODY 
{
    background-color: #5b842d;
    background-image: url(img/ljifBg.jpg); 
    background-attachment:fixed; 
    background-repeat: repeat-x;
    background-position: center top;
    background-repeat: repeat-y;
    font-family: verdana;
    font-size: 11px;
    color: #3f3f3f;
    line-height: 16px;
    margin: 0px;
    font-size: 12px;
    line-height: 18px;
}
    
	a:link { text-decoration: none; color: #fff}
	a:visited { text-decoration: none; color: #fff}
	a:active { text-decoration: none; color: #fff}
	a:hover { text-decoration: none; color: #f5e056}

	
	.menyBtn {color: #fff; font-weight: bold}

\#container
{
    width: 1024px;
    height: 100%
    min-height: 100%;
    position: relative;
    left: 50%;
    margin-left: -512px;
    margin-right: auto;
    background-color: #ffffff;
}

\--------------------------------------------------------------

Någon som kan hjälpa till?

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

## #2 — headbug, 2009-06-11T11:05Z

Vad menar du med följa med?

Du har uttryckligen sagt till att container skall vara 1024px bred och fylla hela wievporten på höjden till 100%

Inte så mycket utrymme för att följa något, skulle jag säga. Vill du att diven skall shrink-wrappa till innehållet?

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

## #3 — voigtann1, 2009-06-11T11:20Z

Vilken doctype använder du dig av?

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

## #4 — Hammarstrom87, 2009-06-11T11:36Z

headbug, ja exakt så menar jag. Som det är nu täcker diven 1/3 av fönstret.

voigtann1: Strict.

\<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"\>

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

## #5 — voigtann1, 2009-06-11T12:25Z

Gjorde om din CSS och la upp ett test:
<http://voigt.se/sandbox/wf/Hammarstrom87/100_height/>

Är det något i stil med detta du är ute efter? (Få nog göra en IE CSS fil för att lösa eventuella problem med IE).

Notera också att din height i din orginal CSS saknar  en avslutande tagg  ( ; )

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

## #6 — Hammarstrom87, 2009-06-11T13:07Z

Fint, så långt är det ju kanon.. Men det blir fortfarande så att när texten blir längre en sidan (100%) så följer inte diven med, varken i FF eller IE. 

Jag testade att lägga till:

html,body #container {height: auto}

Men detta resulterade bara positivt resultat i IE.
Några fler förslag?

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

## #7 — voigtann1, 2009-06-11T14:25Z

kör med min-height: i container, och gör en IE fix, ny fil på samma länk som ovan.

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

## #8 — Hammarstrom87, 2009-06-11T20:31Z

Okej, jag har hittat problemet.. Men det verkar inte vara nåt roligt sådant.
För det är när jag lägger en div med float: left inuti containern som det blir problem.
Ett stort problem eftersom jag skulle behöva 3st div i bredd. 

Men hur kan det komma sig.. i IE händer det som sagt inte.
Idéer?

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

## #9 — voigtann1, 2009-06-12T04:51Z

Du få nog komma med din renderade kod. Att placera divar med float left påverkar inte detta direkt, men du kan prova lägga en extra div/br med en css med clear: both;

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

## #10 — Hammarstrom87, 2009-06-13T13:04Z

Okej, får inte till det. Här är hela koden.

Style.css

```
	html, body
	{
		height: 100%;
		margin: 0;
		padding: 0;
	}
	BODY
	{
		background: url(img/ljifBg.jpg) fixed repeat-y center top #5b842d;
		font-family: verdana;
		font-size: 11px;
		color: #3f3f3f;
		font-size: 11px;
		line-height: 15px;
	}

	a:link { text-decoration: none; color: #fff}
	a:visited { text-decoration: none; color: #fff}
	a:active { text-decoration: none; color: #fff}
	a:hover { text-decoration: none; color: #f5e056}

	
	.menyBtn {color: #fff; font-weight: bold}

	#container
	{
		width: 1024px;
		min-height: 100%;
		margin: 0 auto;
		background: #ffffff;
		border-left: 1px solid #5b842d; border-right: 1px solid #5b842d
	}	
	#banner_loggo 
	{
		float: left;
		width: 445px;
		height: 156px;
		background-color: #fff;
		background: url(img/banner_loggo.jpg) no-repeat;
	}
	#banner_nextmatch
	{
		float: left;
		margin-left: -1px;
		width: 384px;
		height: 156px;
		background-color: #fff;
		background: url(img/banner_nextmatch.jpg) no-repeat;
	}
	#banner_meny 
	{
		clear: both;
		width: 802px;
		height: 36px;
		margin-left: 29px; margin-bottom: 0px;
		background-color: #fff;
		background: url(img/banner_meny.jpg) no-repeat;
	}
	#banner_login 
	{	
		background: url(img/login_bg.jpg) no-repeat;
		width: 155px;
		height: 193px;
		padding: 15px; padding-top: 30px;
	}
	#femSenaste 
	{
		float: left;
		margin-right: 17px;
		width: 300px;
		height: auto; min-height: 200px; _height: 200px;
		padding: 10px; padding-right: 0px;
		background: url(img/aktuellt_resultat_bg.jpg) no-repeat;
	}
```

index.asp

```
    <body>
    <!-- Container -->
    <div id="container">
    	
		<!-- Contains banner area -->
    	<div style="width: 830px; margin: 0px; float: left;">
    	
    	   	
    		<!-- Logotype -->
    		<div id="banner_loggo"></div>
    		<!-- Länk på loggo -->
    		<a href="index.asp" style="border: 0px solid"><div style="cursor:pointer; position: absolute; width: 110px; height: 115px; margin-left: 60px; margin-top: 24px"></div></a>
 
    		
    		<!-- Next match -->
    		<div id="banner_nextmatch">
    		<!--#include file="inc/nextmatch.asp"-->
    		</div>
    		
    		<!-- Meny -->
    		<div id="banner_meny">
    		<!--#include file="inc/meny.asp"-->
    		</div>
    		
    	<!-- Ends banner area -->
    	</div>
    		
    	<!-- Contains login area -->
    	<div style="width: 190px; margin: 0px; float: left;">
    	
    		<!-- Login form -->
    		<div id="banner_login">
    			<!--#include file="inc/login.asp"-->	
    		</div>
    		
    	<!-- Ends login area -->
    	</div>

    	<!-- Main content -->

        [B]// När jag tar bort "float: left" är det inga problem.[/B]
    	<div style="width: 250px; [B]float: left[/B]">	 	  
    	Texten som inte håller sig inom diven.
    	</div>

    <!-- End Container -->
    </div>
    

    	
    </body>
```

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

## #11 — voigtann1, 2009-06-13T14:52Z

Lägg en clear: both under din 

```
        // När jag tar bort "float: left" är det inga problem.
    	<div style="width: 250px; float: left">	 	  
    	Texten som inte håller sig inom diven.
    	</div>
```

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

## #12 — Hammarstrom87, 2009-06-14T08:59Z

Det löste allt :) 
Tack så mycket för hjälpen!

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/178959-container-vill-inte-expanera-i-ff
