layout problem
Jeg har et problem med to divs der ikke vil som jeg vil. Det drejer sig om 'left' og 'right' i nedenstående kode. De skal centreres og stå ved siden af hinanden - samtidig med at den røde baggrund er synlig i div'et 'midt'.Jeg har prøvet at lave er wrapper og så floate left og right, men så forsvinder den røde baggrundsfarve på 'midt' div'et.
Nogen forslag?
*** 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>CSS layout</title>
</head>
<body>
<div id="top">
<div id="bar1">
Bar 1
</div>
<div id="bar2">
Bar 2
</div>
</div>
<div id="midt">
<div id="bar3">
Bar 3
</div>
<div id="left">
Indhold 1 - venstre
</div>
<div id="right">
Indhold 2 - højre
</div>
</div>
<div id="bund">
<div id="bottom">
Bar 4
</div>
</div>
</body>
</html>
*** CSS ***
body {
margin: 0;
padding: 0;
}
#top {
margin:0;
padding:0;
width:100%;
background-color: #000099;
}
#bar1 {
margin: 0 auto;
width: 750px;
background-color: #FF3366;
}
#bar2{
margin: 0 auto;
width: 750px;
background-color: #33CC33;
}
#midt {
clear:both;
margin:0;
padding:0;
width:100%;
background-color: #FF0000;
}
#bar3 {
margin: 0 auto;
width: 750px;
background-color: #333333;
}
#left {
margin: 0 auto;
width: 450px;
background-color: #CCFF33;
}
#right {
margin: 0 auto;
width: 300px;
background-color: #0000FF;
}
#bund {
clear:both;
margin:0;
padding:0;
width:100%;
background-color:#000099;
}
#bottom {
margin: 0 auto;
width: 750px;
background-color: #9933CC;
}
