div går utenfor rammen

[Fenwick]

Hei, har en joomla template jeg har bygget fra bunnen av,

Den består av en "hoved" div, som definerer rammen på siden,

deretter en left, right content og en bottom div

 

Problemet er at når jeg legger mye tekst i content-div'en så strekker den seg nedover som den skal, men

selve "hoved-div'en" står igjen og følger ikke etter.

 

Vil tro problemet ligger i hoved-diven, siden bottom-diven følger etter content, og ligger på bunnen med

fastsatt margin-top mot content.

 

hvordan skal jeg få rammen på siden til å utvide seg nedover etterhvert som innholdet i content gjør det samme?

 

Her er css'en jeg bruker

 

@charset "UTF-8";
/* CSS Document */

body {
       height:100%;
font-family: Verdana, sans-serif;
background-color: #FFFFFF;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #fffff;
margin: 0px;
background-image: url(../images/body_bg.png);

}

h1 {
font-family: sans-serif;
font-size: 12px;
font-style: normal;
color: #3D4F59;

}
h2 {
font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 12px;
font-style: normal;
color: #3D4F59;
;
}
a:link, a:active, a:visited{
font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 11px;
color: #3D4F59;
list-style-image: none;
list-style-type: none;
font-weight: bold;
text-decoration: none;

}

a:hover {
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 11px;
color: #760A2A;
font-weight: bold;



}

HTML {
height:100%;
font-family:Arial, Helvetica, sans-serif;
}

/*Her styres størrelse og plassering av innholdet i templaten*/

#hoved{
width:800px;
       height:100%;
background-color: #FFFFFF;
       float: none;
margin-top: 5px;
margin-right: auto;
margin-bottom: 1px;
margin-left: auto;
border: 1px solid #999999;
overflow: visible;
clear: both;

}

#top{
width:800px;
float:none;
margin-top:0px;
height:300px;
background-image: url(../images/header.jpg);
}

#left{
width:170px;
float:left;
margin-top:20px;
height:270px;
}

#content{

width: 490px;
float:left;
margin-top:20px;
margin-left:10px;
height:auto;
margin-right: 10px;
       background-color: #FFFFFF;
background-image: url(../images/watermark.jpg);
background-repeat: no-repeat;
background-position: center top;

}


#right {
float: right;
height: 270px;
width: 120px;
margin-top: 20px;
}

#bottom {
width:800px;
height:30px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
       border: 1px solid #000000;
clear: both;
}



/*Her styres og styles menyen*/

a.mainlevel{
font-family:Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
font-size:11px;
font-weight:bold;
margin-left:3px;
       margin-top:1px;
background-image: url(../images/menu_bg.png);
background-repeat: no-repeat;
height: 21px;
width: 166px;
display: block;
text-indent: 15px;
text-align: left;
       background-position: left center;
       line-height: 21px;
       text-transform: uppercase;
}
a.mainlevel:hover{
font-family:Arial, Helvetica, sans-serif;
color:#990033;
text-decoration:none;
font-size:11px;
font-weight:bold;
margin-left:3px;
       margin-top:1px;
background-image: url(../images/menu_bg_over.png);
background-repeat: no-repeat;
height: 21px;
width: 166px;
display: block;
text-indent: 15px;
text-align: left;
       background-position: left center;
       line-height: 21px;
       text-transform: uppercase;
}
.moduletable{margin-left:5px;}

.blog{font-size:10px;}
table.contentpaneopen{font-family: Verdana, Arial, Helvetica, sans-serif;font-size:10px;}

.contentheading{ font-size:12px; font-weight:bold;}
a.readon{color:#9a498d;}
.back_button{color:#000000; font-size:10px;}

[AKIRAx77]

Blir ikke height 100% satt når siden leses førstegang. Den blir ikke automatisk oppdatert bare fordi innholdet utvides. Du skal ikke trenge å definere height i hoved DIVen i det hele tatt siden høyden av den er ett resultat av det som du har inni den.

 

Er ikke 100% sikker..men jeg synes du har mye height 100% definisjoner som jeg er usikker på om du trenger.

 

AKIRA

[Fenwick]

Du har rett i det at høyden ikke skal defineres, men den må settes til height: auto;

samt at bottom-div eller footer-div må settes til clear: both;

 

Da fungerte det. Det funka 2 min etter jeg hadde posta

 

Grunnen til height: 100% var for å få til en 100% høy div, måtte settes i parent container

(body, html) men det var jo egentlig ikke det jeg var ute etter, var bare litt i villrede

etter å ha testet å feilet i flere timer.

 

Men takk for hjelpen.