CSS: kolumnproblem

3 svar · 580 visningar · startad av kristoffer 20 nov. 2007

kristofferMedlem sedan juni 20001 257 inlägg

20 nov. 2007 23:10#1

Min CSS-baserade layout blir inte rätt. Kan någon se vad jag behöver göra för att det skall se ut som i bifogad fil. Det blir inte bara fel, det blir dessutom olika i IE och Firefox.

Jag får inte rätt på det här med float och clear.

<!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" xml:lang="sv" lang="sv" dir="ltr">
	<head>
		<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
	</head>
	<body id="index">
		<div id="wrapper">
			<div id="rightDiv1">
				rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>
				rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>
			</div>
			<div id="rightDiv2">
				rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>
				rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>
				rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>
			</div>
			<div id="content">
				<div id="innerContent">
					innerContent
					<div id="innerTopDiv">innerTopDiv</div>
					<div id="innerMiddleLeftDiv">innerMiddleLeftDiv</div>
					<div id="innerMiddleRightDiv">innerMiddleRightDiv</div>
					<div id="innerBottomDiv">innerBottomDiv</div>
				</div>
			</div>
		</div>
	</body>
</html>


body
{
	background-color: gray;
}

#wrapper 
{
	background-color: #FFF;
    width: 799px;
    margin: 0 auto;
}

#content
{
	background-color: #FFF;
}

#rightDiv1
{
	float: right;
	background-color: Blue;
}

#rightDiv2
{
	clear: right;
	float: right;
	background-color: Brown;
}

#innerContent
{
	width: 610px;
}

#innerTopDiv
{
	width: 330px;
}

#innerMiddleLeftDiv
{
	float: left;
	background-color: Orange;
}

#innerMiddleRightDiv
{
	float: right;
	background-color: Magenta;
}

#innerBottomDiv
{
	clear:both;
	background-color: Green;
}

voigtann1Medlem sedan juni 20019 519 inlägg

21 nov. 2007 07:01#2

<!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" xml:lang="sv" lang="sv" dir="ltr">
	<head>
		<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
	</head>
	<body id="index">
		<div id="wrapper">
			<div id="content">
				<div id="innerTopDiv">innerTopDiv</div>
				<div id="innerMiddleLeftDiv">innerMiddleLeftDiv</div>
				<div id="innerMiddleRightDiv">innerMiddleRightDiv</div>
				<div id="rightDiv1">
					rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>
					rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>rightDiv1<br>
				</div>
				<div id="rightDiv2">
					rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>
					rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>
					rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>rightDiv2<br>
				</div>
			</div>
			<div id="innerBottomDiv">innerBottomDiv</div>
		</div>
	</body>
</html>

Om du vill placera innerBottomDiv så måste du veta lite om dina höger kolummer med.. däför placera man den längst ner...

body
{
	background-color: gray;
}

#wrapper 
{
	background-color: #FFF;
    width: 799px;
    margin: 0 auto;
}

#content
{
	background-color: #FFF;
}

#rightDiv1
{
	float: right;
	background-color: Blue;
}

#rightDiv2
{
	clear: right;
	float: right;
	background-color: Brown;
}

#innerContent
{
	width: 610px;
}

#innerTopDiv
{
	width: 330px;
}

#innerMiddleLeftDiv
{
	float: left;
	width:372px;
	background-color: Orange;
}

#innerMiddleRightDiv
{
	float:left;
	width:372px;
	background-color: Magenta;
}

#innerBottomDiv
{
	clear:both;
	background-color: Green;
}

kristofferMedlem sedan juni 20001 257 inlägg

22 nov. 2007 19:40#3

Tack för svaret. Men jag har fortfarande problem. I IE7 blir det rätt. Men i Firefox blir det fel. Se bifogade bilder. Vad skall jag göra för att Firefox skall se ut som IE?

Tack på förhand för hjälpen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="sv" dir="ltr">
	<head>
		<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
	</head>
	<body>
		<div id="wrapper">
			<div id="top">top</div>
			<div id="right1">right1<br>right1<br>right1<br>right1<br>right1<br>right1<br>right1<br>right1<br>right1<br>right1<br>right1<br>right1<br></div>
			<div id="right2">right2<br>right2<br>right2<br>right2<br>right2<br>right2<br>right2<br>right2<br>right2<br>right2<br>right2<br>right2<br>right2<br>right2<br></div>
			<div id="innerTop">innerTop</div>
			<div id="innerLeft">innerLeft</div>
			<div id="innerRight">innerRight</div>
			<div id="innerBottom">innerBottom</div>
			<div id="footer">footer</div>
		</div>
	</body>
</html>

body
{
    background: #9CF;
}
#wrapper 
{
	background-color: #FFF;
    width: 799px;
    margin: 0 auto;
}
#top
{
	background-color: Olive;
}
#right1
{
	float: right;
	width: 176px;
	background-color: Red;
}
#right2
{
	width: 176px;
	clear: right;
	float: right;
	background-color: Green;
}
#innerTop
{
	background-color: lightblue;
}
#innerLeft
{
	float: left;
	width: 310px;
	background-color: #E5ECF9;
}
#innerRight
{
	float: left;
	width: 250px;
	background-color: cyan;
	margin-left: 40px;
}
#innerBottom
{
	width: 600px;
	float: left;
	background-color: Yellow;
}
#footer
{
	clear: both;
	background-color: Orange;
}

FuelMedlem sedan okt. 20001 285 inlägg

25 nov. 2007 06:33#4

prova nolla allt..

* {
margin: 0;
padding: 0;
}

då borde det ordna sig IE & FF