Advanced Search

Results 1 to 3 of 3

Thread: unable to get center div to be same height as body container div

  1. #1
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default unable to get center div to be same height as body container div

    I have a problem with getting the center DIV the same height as the 'bodyContainer' DIV

    I have tried adding height:100% to the HTML tag and the inherit to the child divs, but this causes the page to always be 100% or seem like it is actually 150% and the footer is way down the page.

    Can anyone suggest a way to fix this display problem I am having?

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Welcome to our web site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css"><!--
    body { border: 0em solid #000; background-color: #ddd; }
    
    .bodyContainer {
    background-color: orange;			margin: 0em auto;	padding: 0em 0em 0em 0em;	
    width: 45em;						height: 100%;
    border-top-left-radius: 1.125em;	border-top-right-radius: 1.125em;
    }
    
    .menu {
    background: green;					margin: 0em;		padding: 0.313em 0em 0.313em 0em;
    border-top-left-radius: 1.125em;	border-top-right-radius: 1.125em;
    text-align: center;					font-size: 1.1em;
    }
    
    .leftSidePanel {
    background-color: orange;								padding: 0.313em 0.625em 0em 0.625em;
    float: left;
    width: 10em;
    }
    
    .mainContent {
    background-color: lightblue;		margin: 0em auto;	padding: 0.625em 0.625em 0.625em 0.625em;
    width: 20em;						height: 100%;
    border-left: 0.5em solid purple;	border-top: 0.3em solid purple;		border-right: 0.5em solid purple;
    border-top-left-radius: 1.125em;	border-top-right-radius: 1.125em;
    text-align: center;					float: left; 
    }
    
    .formWrapper{
    									margin: 0em auto;	padding: 0em;
    text-align: left;
    border-top-left-radius: 1.125em;	border-top-right-radius: 1.125em;
    }
    
    .rightSidePanel	{
    background-color: orange;								padding: 0.313em 0.713em 0em 0.313em;
    float: right;
    width: 10em;
    }
    
    .footer {
    background-color: #ddd;				margin: 0 auto;		padding: 1em 0em 0em 0em;
    text-align: center;
    font-size: 0.875em;
    }
    
    .clearfloat {
    clear: both;
    }
    --></style>
    
    </head>
    <body>
    <!-- bodyContainer start -->
    <div class="bodyContainer">
    
    	<!-- menu start -->
    	<div class="menu">
    		<div class="clearfloat"></div>
    	</div>
    	<div class="clearfloat"></div>
    	<!-- menu end -->
    
    		<div class="leftSidePanel">
    		<br><br>blah<br><br>blah<br><br>blah<br><br>blah
    		<br><br>take some of this out<br><br>blah
    		</div>
    
    			<!-- mainContent start -->
    			<div class="mainContent">
    				<div class="formWrapper">
    				<br><br>blah<br><br>blah<br><br>blah<br><br>blah<br><br>blah
    				</div>
    			</div>
    			<!-- mainContent end -->
    
    		<div class="rightSidePanel">
    		<br><br><br><br>blah<br>blah<br><br>blah<br><br>blah
    		</div>
    
    <!-- Footer start -->
    <br class="clearfloat">
    <div class="footer">
    some text
    </div>
    
    
    </div>
    <!-- body container end -->
    
    </body>
    </html>

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    586
    Thanks
    41
    Thanked 27 Times in 27 Posts

    Default

    hmm not sure which div you want to make the same as bodycontainer?

    There are quite a few div and I won't guess-lol
    Thanks,

    Bud

  3. #3
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ok forgive the colours, its only to explain.

    and also forgive my tables layout!

    this is what i am after but using CSS.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body>
    <table width="974" height="232">
      <tr bgcolor="#6666CC"> 
        <td height="23" colspan="3"> 
          <div align="center">the header</div></td>
      </tr>
      <tr valign="top"> 
        <td width="219" height="176" bgcolor="#00FF00">
    <p>also has variable amounts of data</p>
          <p>&nbsp;</p>
          <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah v</p></td>
        <td width="519" bgcolor="#999999">
    <p>this is the middle div that has variable amounts of info</p>
          <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
          </p></td>
        <td width="220" bgcolor="#FF6699"> 
          <p>also has variable amounts of data</p>
          <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
            blah blah blah blah blah blah</p>
          </td>
      </tr>
      <tr bgcolor="#993366"> 
        <td height="23" colspan="3"> 
          <div align="center">the footer</div></td>
      </tr>
    </table>
    </body>
    </html>

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
  •