Div doesn't expand as expected

HTML & CSS
1

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&#337; tartalmi szekció kezdete -->
    <div class="content">
      <div class="left"> 
        <!--Baloldali oszlop -->
        <div class="menulista">Menu Kezd&#337;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&#337; 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&#337;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&#337;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

2

Thanks Man! This worked like a charm!

Have a nice day!

Best Wishes,
Allanon

3

The left and right divs are floated, which means they don’t affect the height of their parent. Only the main_content div will cause the height of the content div to change.

You can set overflow:hidden on .content to make it expand to enclose floated children. There are other methods as well, but this is probably the easiest.