Jag börjar med att bifoga index.html och style.css och förklarar poblemet nedan.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>...</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content_left"></div>
<div id="content_middle">
Text
</div>
<div id="content_right"></div>
</body>
</html>
body, html {
margin: 0px;
height: 100%;
background-image: url(bakgrund.gif);
}
#content_left {
width: 43px;
margin: 0px auto;
height: auto;
min-height: 100%;
background-image: url(content_left.gif);
background-repeat: repeat-y;
border: 0;
}
#content_middle {
width: 844px;
margin: 0px auto;
height: auto;
min-height: 100%;
background-image: url(content_middle.gif);
background-repeat: repeat-y repeat-x;
border: 0;
float: middle;
}
#content_right {
width: 43px;
margin: 0;
height: auto;
min-height: 100%;
background-image: url(content_right.gif);
background-repeat: repeat-y;
border: 0;
float: left;
}
.text {
font-family: 'Trebuchet MS', trebuchet, verdana, arial;
font-size: 12px;
color: #FFFFFF;
text-align: justify;
}
Jo, problemet är att divsen "content_left", "content_middle" och "content_right" ställer sig ovanpå varandra och täcker 100% av det som syns på skärmen, vardera. Tanken är att de ska stå brevid varandra. Hur gör man det? Jag har testat med att lägga alla tre divs i ytterligare en div, dock anpassade sig dem då till textens höjd.
Tack på förhand,
JakobJ