SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div doesn't expand as expected...

    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:
    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:
    Code:
    @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. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Man! This worked like a charm!

    Have a nice day!

    Best Wishes,
    Allanon


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •