Solved

Auto resize height

Posted on 2004-09-27
2
2,138 Views
Last Modified: 2008-03-04
I am trying to find a way to have a block's height to equal the parent's height

the CSS FILE,  for the menu part,  i added bottom:0; height:100%;  i thought that this will enable the menu block to stretch along with the page block.
the content block is the one that have the content that push down the page block. i want menu block to go along with it even though it doesnt have content.
Is there a way to do this?  I am lousy in explaining it in technical term, i hope this is clear, please let me know if its not clear


Heres an example

CSS FILE

#page{
      /* Colors */
                        
      /* Element Control */                  
      width:800px;
      margin-bottom:30px;            
      margin-right:auto;
      margin-left:auto;      
}

#content{      
      /* Element Control */
      float:right;      
      width:74%;      
}

#menu{      
      /* Element Positioning */
      top:0;            
      bottom:0;
            
      /* Element Control */                              
      width:25%;      
      height:100%;
      margin-right:1%;                                    
}



HTML FILE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />      
      <link rel="stylesheet" type="text/css" href="template.css">
      <title> Tour  Zurich! </title>
</head>

<body>      
      <div id=page>
            <div id=content>
                  <table width="100%">
                        <tr>
                    <td width="50%" bgcolor="#C6E2FF">
                      <div>random data</div>
                    </td>
                    <td width="50%" colspan=2 bgcolor="#C5FFC5">
                      <div>random data</div>
                    </td>
                       </tr>
            
                  <tr>
                    <td height="200" bgcolor="#E8F4FF" valign:"top">
                      <img src="images/z3.jpg" alt="DATA" />
                      <ul>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                      </ul>
                    </td>
                    <td colspan=2 bgcolor="#E7FFE7" valign:"top">
                      <img src="images/z2.jpg" alt="DATA" />
                      <ul>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                      </ul>
                    </td>
                       </tr>
            
                  <tr>
                    <td bgcolor="#C5FFC5">
                      <div>Accomodations</div>
                    </td>
                    <td colspan=2 bgcolor="#C6E2FF">
                        <li>random data</li>
                    </td>
                       </tr>
            
                  <tr>
                    <td height="200" bgcolor="#E7FFE7" valign:"top">
                      <img src="images/z4.jpg" alt="data" />
                      <ul>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                      </ul>
                    </td>
                    <td colspan=2 height="200" bgcolor="#E8F4FF">
                      <img src="images/z1.jpg" alt="DATA" />
                      <ul>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                        <li>random data</li>
                      </ul>
                    </td>
                       </tr>
                  </table>
            </div>
            <div id=menu>
                  MENU                  
            </div>                  
      </div>            
</body>
</html>
0
Comment
Question by:BuggyLogic
2 Comments
 
LVL 11

Accepted Solution

by:
neester earned 50 total points
ID: 12167011
I dont think it can be done under normal implementation...
but here are some links that might offer you some help:


http://www.webmasterworld.com/forum83/200.htm
http://www.quirksmode.org/css/100percheight.html


they should offer some assistance.
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question