Div som inte vill följa med

9 svar · 524 visningar · startad av Folkbitar 1 dec. 2004

FolkbitarMedlem sedan feb. 2003168 inlägg

Frågan1 dec. 2004 11:23#1

Provade att göra en stor "runda-hörns"-div med hjälp av bilder.
Nu undrar jag lite vad det är som blir fel.
Om jag lägger en text inom <p> så följer diven med och anpassar sej längdmässigt efter texten.

Om jag däremot stoppar in lite andra divar i den stora,
så funkar det inte. Dom nästlade divarna hamnar utanför.

Min css:

.topp {
	background-image: url(images/corners/top2.gif);
	background-repeat: no-repeat;
}
.mitten {
	background-image: url(images/corners/middle2.gif);
	background-repeat: repeat-y;
	padding-right: 30px;
	padding-left: 30px;
}
.nere {
	background-image: url(images/corners/bottom2.gif);
	background-repeat: no-repeat;
}
/*Dom mindre, nästlade divarna */
#huvud {
	width: 100%;
	margin-bottom: 10px;
	background-image: url(images/logga.jpg);
	background-repeat: no-repeat;
	height: 100px;
	background-color: #ebf0f4;
}
#meny {
	float: left;
	width: 20%;
	border: 1px solid #CCCCCC;
	background-color: #ebf0f4;

}
#sidor {
	float: right;
	width: 75%;
	border: 1px solid #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
	line-height: 15pt;
	color: #333333;
	background-color: #FFFFFF;
	margin-left: 5px;
	margin-bottom: 10px;
	text-align: left;
	padding: 10px;
}

Min html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stilmall.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="middle">
      <div class="top">
        <div class="bottom">
          <div id="huvud"></div>
		  <div id="meny">Meny</div>
		  <div id="sidor">Sidor</div>
		</div>
      </div>
</div>
</body>
</html>

Om jag istället byter ut divarna "huvud", "meny" och "sidor" och ersätter dom med en <p> med en massa text i så funkar det.
Varför?

/anders

icaaqMedlem sedan okt. 20005 273 inlägg

1 dec. 2004 17:29#2

Som en vis man sagt några ggr

palle skrev:

Återställ ordningen med clear: both; innan du avslutar din <div> så kommer det nog ordna till sig,..

Så

[red]
<body>
<div class="middle">
      <div class="top">
        <div class="bottom">
          <div id="huvud"></div>
		  <div id="meny">Meny</div>
		  <div id="sidor">Sidor</div>
                  [b]<br style="clear: both;" />[/b]
		</div>
      </div>
</div>
</body>[/red]

mv icaaq

/red. Du kan också läsa om andra liknande lösningar på
To many divs

FolkbitarMedlem sedan feb. 2003168 inlägg

1 dec. 2004 18:23#3

Tack för hjälpen, icaaq!
och länken!

/anders

FolkbitarMedlem sedan feb. 2003168 inlägg

1 dec. 2004 21:56#4

Nu var jag visst lite för snabb med att acceptera som slutgiltigt svar.

Lösningen ovan funkade ju jättebra.
Tills jag kollade med IE6.
Då spretar divarna isär :(

icaaqMedlem sedan okt. 20005 273 inlägg

2 dec. 2004 06:31#5

Länk till sidan??

mv icaaq

FolkbitarMedlem sedan feb. 2003168 inlägg

2 dec. 2004 09:23#6

icaaq skrev:

Länk till sidan??

mv icaaq

Lägger upp den temporärt här

/anders

jarvkloMedlem sedan juli 20013 378 inlägg

2 dec. 2004 12:50#7

Hmm..
Det där är en MSIE-klassiker (been there - done that ;) )!
Du måste ha ett "block" efter dina två "floats" - t.ex. en <div> - det räcker inte med en <br/>

Byt ut

<br style="clear: both;" />

mot

<div style="clear: both;" >&amp;nbsp;</div>

icaaqMedlem sedan okt. 20005 273 inlägg

2 dec. 2004 13:06#8

Då kommer en följdfråga, kan man göra så här?

[red]
<br style="clear: both; display: block;"/>
[/red]

mv icaaq

jarvkloMedlem sedan juli 20013 378 inlägg

2 dec. 2004 13:10#9

Nope - Funkade inte i MSIE6 på Win2K-Pro iaf

FolkbitarMedlem sedan feb. 2003168 inlägg

2 dec. 2004 18:46#10

Nu så!

Tack icaaq och jarvklo! :bire