Hi Everyone,
I have a strange problem with one of my layouts.
I have a div(content) which contains 3 other divs. The content Div’s height is set to auto so it should expand if one of the 3 ,which it contains, would grow.
This content div also pushes down the footer - at least it should…
The problem is that it just won’t expand even though I set it to auto height…
What could be the problem?
HTML code:
<!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>Divamed Egészségcentrum</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="kontener">
<div class="fluid_back"></div>
<div id="middle">
<div id="header">
<!--IE6 dupla margin bug miatt IE6 conditional fog kelleni -40-es margin-al -->
<div class="headimage"></div>
<div class="logoad">
<div class="logo">Logo</div>
<div class="hirdetes">Hirdetes</div>
</div>
</div>
<!--Fő tartalmi szekció kezdete -->
<div class="content">
<div class="left">
<!--Baloldali oszlop -->
<div class="menulista">Menu Kezdőlap Szolgáltatásaink Híreink Blog Rólunk Vendégkönyv Galéria GYIK Kapcsolat</div>
<div class="testemonials">
<p>Sikersztorik Vivamus varius varius convallis. Sed vitae metus nec est blandit pellentesque. Donec iaculis velit non justo hendrerit interdum. Nullam eros lacus, euismod vel congue a, lobortis a magna. </p>
</div>
<!--Ide még lehet hozzáadni diveket igény szerint -->
</div>
<div class="main_content">
<p>Fő tartalmi blokk Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate dui elit, eget mattis nisl. Nam non dui id nulla gravida varius. In lacinia pellentesque luctus. Vestibulum mattis dolor eu nunc vehicula sagittis tincidunt nisi sodales. Fusce bibendum tristique sollicitudin. Vestibulum nisl urna, dapibus non aliquet in, rhoncus id urna. Ut nulla arcu, eleifend sit amet ornare id, bibendum a dui. Vestibulum vulputate iaculis metus, non semper lacus mollis at. Curabitur venenatis est sit amet purus cursus congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras mattis lacinia risus, vitae rhoncus dui semper vitae. Curabitur mollis, lorem non mollis pulvinar, est leo eleifend dolor, vel pretium lectus nisl vel velit. Pellentesque sed odio felis, eu iaculis tortor. Vivamus varius varius convallis. Sed vitae metus nec est blandit pellentesque. Donec iaculis velit non justo hendrerit interdum. Nullam eros lacus, euismod vel congue a, lobortis a magna. Mauris eleifend, turpis eu tempus suscipit, sapien tellus varius sem, a posuere risus sapien eu nulla. Donec ut erat nisl.
Nunc auctor enim a mi pulvinar ut dignissim nisi pharetra. Aliquam euismod mauris at leo dignissim dictum. Aliquam vehicula hendrerit blandit. Nulla vel elit ac lectus semper sodales non nec orci. Suspendisse potenti. Nullam a justo auctor dui euismod fermentum. Duis imperdiet pulvinar orci, eget tempus sapien aliquam eget. Donec suscipit ligula imperdiet velit elementum eu tincidunt ligula suscipit. Quisque non ipsum massa, sed pulvinar metus. Morbi consequat, lorem at elementum pulvinar, mi tellus sagittis lacus, ut commodo mi neque id tellus. Donec auctor pharetra purus, eget commodo magna tempor pulvinar. Aliquam et arcu ac quam scelerisque dapibus sit amet
quis ipsum. Vestibulum ornare scelerisque diam, et sodales erat fermentum eu. Vestibulum quis tristique est. </p>
<p> eu nulla. Donec ut erat nisl.
Nunc auctor enim a mi pulvinar ut dignissim nisi pharetra. Aliquam euismod mauris at leo dignissim dictum. Aliquam vehicula hendrerit blandit. Nulla vel elit ac lectus semper sodales non nec orci. Suspendisse potenti. Nullam a justo auctor dui euismod fermentum. Duis imperdiet pulvinar orci, eget tempus sapien aliquam eget. Donec suscipit ligula imperdiet velit elementum eu tincidunt ligula suscipit. Quisque non ipsum massa, sed pulvinar metus. Morbi consequat, lorem at elemen</p>
</div>
<div class="right">
<!--Jobboldali oszlop -->
<div class="news">Hírek
Cras mattis lacinia risus,
Vitae rhoncus dui semper vitae
Curabitur mollis,
Lorem non mollis pulvinar
Est leo eleifend dolor,
vel pretium lectus nisl </div>
<div class="articles">Cikkek
Cras mattis lacinia risus,
Vitae rhoncus dui semper vitae
Curabitur mollis,
Lorem non mollis pulvinar
Est leo eleifend dolor,
vel pretium lectus nisl </div>
<!--Ide szintén tetszőlegesen lehet még diveket hozzáadni -->
</div>
</div>
<!--Lábléc kezdete -->
<div id="footer">
<div class="botmenu">Alsó menü</div>
<div class="medialogo">Média logók</div>
<div class="copyright">Szerzői Jog</div>
</div>
</div>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* CSS Document */
body {
margin:0;
padding:0;
}
#kontener {
background-color: #FFF;
margin: 0px;
padding: 0px;
height: auto;
width: 100%;
}
#middle {
height: auto;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-top: -95px;
}
.fluid_back {
height: 95px;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
background-color: #ADB088;
}
#header {
width: 960px;
margin-top: -80px;
margin-bottom: 0px;
}
.headimage {
width: 960px;
margin-top: 0px;
margin-bottom: 0px;
height: 152px;
}
.logoad {
width: 960px;
margin-top: 0px;
margin-bottom: 0px;
}
.logo {
display: inline;
margin: 0px;
float: left;
width: 320px;
height: 121px;
}
.hirdetes {
display: inline;
margin: 0px;
float: right;
width: 620px;
height: 121px;
}
.content {
width: 960px;
margin-top: 0px;
margin-bottom: 0px;
background-color: #E0E2DA;
clear: both;
border: 2px solid #000;
float: none;
height: auto;
}
.left {
float: left;
height: auto;
width: 210px;
margin-top: 0px;
margin-bottom: 0px;
display: inline;
clear: both;
}
.main_content {
height: auto;
width: 510px;
display: inline;
margin-top: 0px;
margin-bottom: 0px;
background-repeat:no-repeat;
background-position:left bottom;
float: left;
text-align: justify;
background-color: #F4F4F4;
}
.right {
display: inline;
float: right;
height: auto;
width: 210px;
margin-top: 0px;
margin-bottom: 0px;
}
.news {
height: auto;
width: 210px;
margin-bottom: 15px;
float: right;
background-color: #F4F4F4;
}
.articles {
height: auto;
width: 210px;
margin-bottom: 10px;
float: right;
background-color: #F4F4F4;
}
.menulista {
height: auto;
width: 177px;
margin-top: 0px;
}
.testemonials {
clear: both;
height: auto;
width: 180px;
margin-top: 15px;
background-color: #F4F4F4;
}
#footer {
height: 155px;
width: 960px;
margin-top: 10px;
clear: both;
}
.botmenu {
float: right;
width: 700px;
}
.medialogo {
float: right;
width: 300px;
}
.copyright {
width: 300px;
}
Your help would be greatly appreciated!
Best Wishes,
Allanon