om du inte sätter en bredd på topbox då?
Kod:
body {
background: #555555;
color: #000000;
font-family: Verdana, Arial, sans-serif;
margin: 0;
}
p {font-size: 12px;}
a {
color: #0000FF;
font-weight : none;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.topbox {
background-color: #349B43;
width: 100%;
padding: 2px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.topbox a {
font-weight: normal;
color: #fff;
}
.topbox a:hover {
color: #ffff00;
font-weight: normal;
text-decoration: none;
}
.headerbox {
background-color: #349B43;
border: 1px solid #000000;
min-width: 675px;
margin-bottom: 5px;
text-align: center;}
.maincontainer {
width: 80%;
position: relative; left: 10%; top: 30px; float: left;
}
.clear {visibility: hidden; height:1pt; line-height:1pt; padding:0; margin:0;}
.menybox {float: left;
background-color: #349B43;
border: 1px solid #000000;
width: 20%;
min-width: 175px;
padding: 2px;
text-align: left;}
.mainbox {
float: right;
background-color: #CCCCCC;
border: 1px solid #000000;
width: 75%;
padding: 2px;
text-align: left;}
Jag gjorde även xhtml strict utan markupen
Kod:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="topbox"><p>Min lilla <a href="">länksamling</a></p></div>
<div class="maincontainer">
<div class="headerbox">
<p></p>
<img src="images/header.jpg" />
</div>
<div class="menybox">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Nunc quis est quis pede iaculis suscipit.</li>
<li>Aenean congue ante nec risus.</li>
<li>Maecenas lobortis pede vel augue.</li>
<li>Suspendisse interdum magna hendrerit dui.</li>
<li>Etiam sit amet ligula et dolor nonummy interdum.</li>
<li>Duis congue scelerisque nisl.</li>
</ul>
</div>
<div class="mainbox">
<h1>Donec ut augue et volutpat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam egestas metus vitae leo. Morbi elementum vulputate sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam in mi at libero dignissim molestie. In malesuada lacinia nisi. Praesent placerat consequat nisl. Praesent mi nulla, pellentesque quis, mattis vel, iaculis quis, sem. Etiam congue mauris at massa. Nunc massa quam, commodo quis, malesuada non, elementum at, nibh. Nulla erat libero, malesuada id, vestibulum quis, nonummy in, dolor. Ut sapien nunc, placerat vel, faucibus sed, accumsan at, tellus.</p>
<h2>Etiam vestibulum nibh amet</h2>
<p>Donec ornare ante semper nisl sollicitudin vulputate. Proin lobortis elementum arcu. Vestibulum porta neque. Integer ut sem. Sed felis erat, egestas a, venenatis ac, posuere eget, lectus. Etiam lobortis metus sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque placerat, tellus et porttitor sodales, metus urna blandit nibh, a ullamcorper felis sem in velit. Sed nonummy. Quisque eget eros et turpis adipiscing consequat.</p>
</div>
<hr class="clear"/>
</div>
</body>
</html>