Stora problem i IE med DIVAR

asmodieMedlem sedan jan. 2004501 inlägg

7 feb. 2005 14:24#1

Jag har gjort flera css-mallar med samma struktur och jag har fått ett stort problem. Och det är att IE verkar lägga till lite extra i vänsterled så att två divar som ligger brevid varandra förskjuts till höger. Många gånger resulterar det i att den div tagen som ligger till höger åker ner. Jag vill ha lösningen i css. Asså man får inte göra några ändringar i HTML-koden för att lösa problemet.

Jag listar all kod jag har och en skärmdum på vad skillnaden är. Jag tackar så mycket för hjälpen.

Min html kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
<div id="heading">Heading</div>
<div id="content">Olleo olleo olleo olleo olleo olleo olleo olleo olleo olleo olleo olleo olleo olleo olleo olleo olleo olleo olleo olleo</div>
<div id="side">Annea annea annea annea annea annea annea annea </div>
</div>
</body>
</html>

Min css-kod:

#wrapper {
	margin: 0px;
	padding: 0px;
	width: 300px;
}
#content {
	margin: 0px 0px 0px 30px;
	padding: 0px;
	width: 100px;
	float: left;
}
#side {
	margin: 0px;
	padding: 0px;
	width: 150px;
	float: right;
}

asmodieMedlem sedan jan. 2004501 inlägg

7 feb. 2005 14:54#2

Löste det själv genom att sätta
display: inline; i #content

maz0Medlem sedan juni 200424 inlägg

7 feb. 2005 19:16#3

Jag minskade margin till 15px och la till lite annat.

#wrapper {
	margin: 0px;
	padding: 0px;
	width: 300px;
}

#content {
	margin: 0px 0px 0px 15px;
	padding: 0px;
	width: 100px;
	float: left;
}

#side {
	margin: 0px;
	padding: 0px;
	width: 150px;
	float: right;
	clear: float;
}

/* ignored by IE */
*>div#content {
	margin: 0px 0px 0px 30px;
	padding: 0px;
	width: 100px;
	float: left;
}

/* ignored by IE */
*>div#side {
	margin: 0px;
	padding: 0px;
	width: 150px;
	float: right;
	clear: float;
}