CSS & Html - Problem med Float og clear
Jeg er ved at lave et joomlasite til et lille portfolio projektProblemet er at højden på en div ikke udvider sig med indholdet
Har prøvet med clear:both i footeren men virker ikke..
<!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=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet"" href="css/style.css" type="text/css" />
<jdoc:include type="head" />
</head>
<body>
<div class="wrapper">
<div><img src="images/header.jpg" alt="Header" /></div>
<div class="borderleft"></div>
<div class="menu"><jdoc:include type="modules" name="left" /></div>
<div class="content"><jdoc:include type="component" /></div>
<div class="borderright"></div>
<div class="bottom"><img src="images/bottom.jpg" alt="Header" /></div>
<div class="footer"><jdoc:include type="modules" name="footer" style="xhtml"/></div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
*
{
padding:0px;
margin:0px;
}
body
{
background-color:#007b9d;
padding-top:66px;
}
.wrapper
{
width:814px;
margin: 0 auto;
}
.borderleft
{
width:7px;
background-image: url(../images/borderleft.jpg);
float:left;
height:460px;
}
.menu
{
width:226px;
float:left;
background-color:black;
height:460px;
}
.content
{
width:574px;
float:left;
background-color:white;
height:460px;
overflow:inherit;
}
.borderright
{
width:7px;
background-image: url(../images/borderright.jpg);
float:right;
height:460px;
}
.bottom
{
width:814px;
float:clear;
}
.footer
{
width:814px;
vertical-align:middle;
height:36px;
text-align:center;
clear:both;
}
