CSS-elementer strækker sig ikke som ønsket
HejJeg forsøge at lave et layout med følgende elementer:
- en top der er 75px høj og fylder hele sidens bredde
- en menu i venstre side (der fylder resten af sidens længde)
- indhold i højre side (der fylder resten af bredden)
Menu-elementet og indholdselementet skal strække sig såfremt indholdet forøges.
Nedenfor er mit nuværende html-dokument. Der er følgende problem:
Jeg har rodet lidt med 100%, men menuen bliver for lang, idet den bliver hele sidens længde, hvor den skulle have været 75px mindre pga. toppen. Når indholdet i menu-elementet bliver længere end sidens indhold, er det vigtigt at farven i menuen føres med i den fulde længde.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style TYPE="text/css">
html,body {
border: 0px;
margin: 0px;
padding: 0px;
height: 100%;
}
#top {
height: 75px;
width: 100%;
background-color: #ff0000;
}
#left {
width: 160px;
float: left;
height: 100%;
background-color: #00ff00;
}
#right {
float: left;
height: 100%;
background-color: #0000f;
}
-->
</style>
</head>
<body>
<div id="top">
LOGO
</div>
<div id="left">
MENU
</div>
<div id="right">
INDHOLD
</div>
</body>
</html>
