Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div height 100% with the content

    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>Untitled Document</title>
    <style type="text/css">
    <!--
    html,body { height: 100%; }
    #wrapper {
    	width: 790px;
    	margin-top: 20px;
    	margin-right: auto;
    	margin-left: auto;
    	height: 100%;
    }
    #sidebar {
    	float: right;
    	width: 160px;
    	background-color: #00FF33;
    	min-height: 100%;
    	position: relative;
    }
    * html #sidebar { /* this is needed to fake min-height in IE 6 */
    height:100%;
    }
    #content {
    	width: 630px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="wrapper">
      <div id="sidebar">sidebar</div>
      <div id="content">
        <p>Content for  id "content" Goes Here</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>&nbsp;</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>&nbsp;</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>d</p>
        <p>&nbsp;</p>
        <p>d</p>
        <p>&nbsp;</p>
      </div>
    </div>
    </body>
    </html>
    I want to make the height of the sidebar extend as the content gets long. Now, the sidebar div will just only make its height the browser-window height. How can I make it extend to where the content ends?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can not fix div height

    Hi
    I'm facing problem with divs. I have a main div and with in this div I have some other divs.
    The problem is I'm unable to fix the height of inner div.
    Actually the inner div should take the height according to the content with in it.
    But in my case the div height is exceeding the content height.

    You can find the actual page here:
    http://www.ranganpalke.com/testpage.htm

    The problematic div is with yellow background color.
    The problem exists with IE7 and FireFox (IE6 shows as expected)

    Thank you very much

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try removing the float:left; from
    Code:
    <div style="border: 1px solid red; padding-left: 20px; width: 550px;float: left;">
                      <span class="questionbold">
                        Which country is the Bermuda part of? Which country is the Bermuda part of?
                         
                      </span>
                      <br/>
                      <span style="padding-left: 26px;">- 3months ago, Resolved question</span>
                  </div>
    and then remove
    Code:
    <div style="clear: left;"></div>
    altogether.

    PS: Avoid CSS Inline Styles
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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