3 div på rad - enkel kod

2 svar · 437 visningar · startad av Fuel 26 dec. 2004

FuelMedlem sedan okt. 20001 285 inlägg

Frågan26 dec. 2004 08:37#1

Hur fixar jag detta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>3 div på rad</title>
<style type="text/css">
h1 { margin:0px; }
.content { width:100%; }
.top {  background:#336699; color:#ffffff; }
.left { float:left; background:#ffffcc; width:170px; }
.middle {  background:#eeeeee; width:auto;  margin-left:170px; margin-right:170px; }
.right { float:right;  background:#ffaacc; width:170px;}
</style>
</head>
<body>
<div class="content">
<div class="top"><h1>LOGO</h1></div>
<div style="clear:both;"></div>
<div class="left">Left asd asdasd as das asd d asd</div>
<div class="right">Right asd asd as sdas das sadss</div>
<div class="middle">
Middle asdasd asd asd sasdas d askjd akjsd kajsdbkjasbd 
jaskjda jbksakj s sa jbk jkaasjd asjbkd jksadass
<p>asd asd asd asd asd asdasd sadsad asd asd asd asd sa
asd as sad asd asdas sad asd sad sa asd as asd sad as</p>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>

om jag egentligen vill ha grund html koden så här

<body>
<div class="content">
<div class="top"><h1>LOGO</h1></div>
<div style="clear:both;"></div>
<div class="left">Left asd asdasd as das asd d asd</div>
<div class="middle">
Middle asdasd asd asd sasdas d askjd akjsd kajsdbkjasbd 
jaskjda jbksakj s sa jbk jkaasjd asjbkd jksadass
<p>asd asd asd asd asd asdasd sadsad asd asd asd asd sa
asd as sad asd asdas sad asd sad sa asd as asd sad as</p>
</div>
<div class="right">Right asd asd as sdas das sadss</div>
<div style="clear:both;"></div>
</div>
</body>

Tanken är att om jag disablar CSS så ska html falla i ordningen left, middle & right. Helst med så enkel CSS som möjligt. Jag har testat några varianter men det blir inte riktigt bra.

Någon som har förslag på en enkel lösning ?

jarvkloMedlem sedan juli 20013 378 inlägg

26 dec. 2004 14:56#2

Hmm...
http://realworldstyle.com/nn4_3col_header.html är en variant...

FuelMedlem sedan okt. 20001 285 inlägg

26 dec. 2004 15:51#3

Det blev i stort sett att jag tog bort <div class="content"> och absolut positionera right kolumnen ... tja, det funkar iaf

tack

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

<html lang="sv">
<head>
<title>Test</title>
<style type="text/css">
#left
{
	float:left;
	width:170px;
}

#left-inner
{
	padding:15px;
}

#content
{
	width:auto;
	margin-left:170px;
	margin-right:170px;
}

#content-inner
{
	padding:15px;
}

#right
{

	position: absolute;
	right: 0px;
	top: 80px;
	width: 170px;
	z-index: 3;
	padding: 0px;

}

#right-inner
{
	padding:15px;
}
</style>
</head>
<body>
<div id="left">
<div id="left-inner">
Left
</div>
</div>
<div id="content">
<div id="content-inner">
Content
</div>
</div>
<div id="right">
<div id="right-inner">
Right
</div>
</div>
</body>
</html>