Højde vil ikke justeres efter tekst
Jeg kan simpelthen ikke få mit #content til at være 100% eller auto. Den skal bare justeres efter hvor meget tekst der står i boksen. Før den forstår noget, skal jeg sætte højden manuelt, og det vil jeg selvfølgelig gerne slippe for.På forhånd tak!
{div]<!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>titel</title>
<style type="text/css">
html, body {
height:100%;
}
body {
margin:0;
background-image:url('images/bg.png');
background-repeat:repeat-x;
background-position:50% 0%;
}
/* WRAPPER */
#wrapper {
width:1000px;
margin:0 auto 0 auto;
padding:0px;
}
#header {
height:79px;
}
#logo {
height:79px;
width:300px;
float:left;
text-align:center;
}
/* MENU */
#menu {
height:79px;
display:inline;
float:right;
}
#menu ul {
list-style:none;
padding:0;
margin:0;
}
#menu li {
float:left;
}
#menu li a {
background-position:right;
padding-right:32px;
padding-left:32px;
display:block;
line-height:79px;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFF;
}
#menu ul a:hover, #menu #active {
background:url('images/menu-hover.png') repeat-x;
color:#1B5E63;
}
#banner {
height:315px;
text-align:center;
}
#content {
width:auto;
height:1600px; /* SKAL VÆRE 100% ELLER AUTO, ikke manuel */
background-color:#FFF;
border-radius:10px;
-moz-border-radius:10px;
}
#main {
width:650px;
padding:25px;
float:left;
}
.article {
margin:0 0 50px 0;
}
.date {
height:114px;
width:114px;
float:left;
background-image:url('images/date-stripe.png');
background-repeat:repeat-y;
text-align:center;
}
.day {
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
color:#5BA4AA;
margin:20px 0 0 0;
}
.month {
font-family:Arial, Helvetica, sans-serif;
font-size:26px;
color:#5BA4AA;
}
.title {
font-family:Arial, Helvetica, sans-serif;
font-size:35px;
color:#FFB307;
margin:0 0 0 0;
}
.author {
font-family:Arial, Helvetica, sans-serif;
font-size:17px;
color:#1A5F65;
margin:7px 0 0 0;
}
.text {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin:25px 0 0 115px;
line-height:21px;
text-align:justify;
}
.article a {
color:#1B6065;
}
#sidebar {
height:100%;
width:232px;
background-color:#F6F6F6;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
float:right;
}
#footer {
width:1000px;
padding:230px 0 0 0;
margin:0 auto 0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#7C9C3E;
text-align:center;
}
#grass, .push {
height:300px;
width:auto;
background-image:url('images/grass.png');
background-repeat:no-repeat;
background-position:50% 0px;
margin:50px 0 0 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/logo.png" width="273" height="79" alt="logo" /></div>
<div id="menu">
<ul>
<li id="active"><a href="#">forside</a></li>
<li><a href="#">changelog</a></li>
<li><a href="#">om mig</a></li>
<li><a href="#">kontakt</a></li>
</ul>
</div>
</div>
<div id="banner"><img src="banner.png" width="610" height="256" alt="alex" /></div>
<div id="content">
<div id="main">
<div class="article">
<div class="date">
<div class="day">day</div>
<div class="month">month</div>
</div>
<div class="title">titel</div>
<div class="author">author</div>
<div class="text">text</div>
</div>
</div>
<div id="sidebar">sidebar</div>
</div>
</div>
<div id="grass">
<div id="footer">copyright</div>
</div>
</body>
</html>
{/div]
