Wrapper kollapsar när den är fylld med flytande divvar. Hur fixa?

5 svar · 750 visningar · startad av Danne V 24 feb. 2011

Danne VMedlem sedan aug. 20068 090 inlägg

Frågan24 feb. 2011 17:43#1

När jag gör webbläsarfönstret mindre än 1200px så kollapsar layouten. Divvarna hamnar under varandra, footern åker upp.
Har iofs bara kollat i Camin - Gecko-läsare - på Mac, men hur ordnar jag detta?

CSS:

@charset "UTF-8";
* {margin:0; padding:0;}
html , wrapper {height:100%}
body {
font: 13px/19px Verdana, Geneva, sans-serif;
color: #333;
}
#wrapper {
	width:1200px;
	overflow:hidden;
	margin:0 auto;
}
.clearboth {
	clear:both;
}
#firstcolumn {
width:200px;
background:#3C6;
}
#secondcolumn {
width:600px;
background:#CC0;
}
#thirdcolumn {
width:280px;
background:#F30;
}
#fourthcolumn {
width:180px;
background:#369;
}
.columns {
	float:left;
	height:500px;
}
#footer {
background: #C03;
width:1260px;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<link href="styles/main3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id"=wrapper">
<div id="firstcolumn" class="columns">
<div id="1banner">banner 1</div>
</div>
<div id="secondcolumn" class="columns">
<div id="2banner">banner 2</div>
</div>
<div id="thirdcolumn" class="columns">
<div id="webb-tv">webb tv</div>
<div id="tabell">tabell</div>
<div id="laguppst">laguppst</div>
</div>
<div id="fourthcolumn" class="columns">
<div id="3banner">Banner 3</div>
<div id="4banner">Banner 4</div>
<div id="5banner">Banner 5</div>
<div id="6banner">Banner 6</div>
</div>
<div class="clearboth"></div>
<div id="footer">footer</div>
</div>
</body>
</html>

Danne VMedlem sedan aug. 20068 090 inlägg

24 feb. 2011 19:21#2

Löst. Jag hade 1200px bred wrapper, men divvar på 1260px.
Suck....

voigtann1Medlem sedan juni 20019 519 inlägg

24 feb. 2011 19:29#3

Vet inte om du har sett det men du har ett element i din CSS som heter Wrapper (saknar nog bara #) och

<div id"=wrapper">

Är en miss där (är nog kopieringsfel bara) ;)

Ett tips är också istället för att köra samma bredd som den totala bredden, strunta i att köra det i din CSS, div är ju ett block-element. Jag tycker alltid det skapar mer problem än vad det behöver vara (exempelvis om du skall ändra bredden någon gång så räcker det att ändra det på ett ställe (när det gäller de divar som skall ha samma bredd som wrapper elementet).

Danne VMedlem sedan aug. 20068 090 inlägg

24 feb. 2011 19:33#4

voigtann1 skrev:

Vet inte om du har sett det men du har ett element i din CSS som heter Wrapper (saknar nog bara #) och
<div id"=wrapper">
Är en miss där ;)

Ja, jäklar!!! Tack. Du har ju falkögon! (y)

voigtann1Medlem sedan juni 20019 519 inlägg

24 feb. 2011 19:34#5

Ett annat tips är att inte skapa element i onödan, clear block elementet kan lösas på ett snyggare sätt ( i mina ögon ), mindre DOM objekt om man skall jobba med javascript: http://www.webtoolkit.info/css-clearfix.html

edit:

Sen är det få inte ett ID börja med ett tal, även detta är nog bara mockup data du har för exempel.

Danne VMedlem sedan aug. 20068 090 inlägg

24 feb. 2011 20:50#6

voigtann1 skrev:

Ett annat tips är att inte skapa element i onödan, clear block elementet kan lösas på ett snyggare sätt ( i mina ögon ), mindre DOM objekt om man skall jobba med javascript: http://www.webtoolkit.info/css-clearfix.html

edit:

Sen är det få inte ett ID börja med ett tal, även detta är nog bara mockup data du har för exempel.

Dom där clear blocken blev kvar efter att jag försökte lista ut vad det var som orsakade kollapsen.

Numren på id:na var helt riktigt bara mina egna "anteckningar" (hann skriva korrekt på en del andra innan jag klistrade in koden.)