dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Make Child Div 100% Height of Parent Div?

  1. #1
    Join Date
    May 2009
    Posts
    100

    Make Child Div 100% Height of Parent Div?

    I have two divs

    <div id="article">
    <div style="float:right;width:90px;">
    Some share buttons
    </div>
    Article content
    </div>

    I want the div that has the share buttons to always stretch the whole height of the article div.

    So if the articles 500 or 100 words long the right hand side always has a 90px gap.

  2. #2
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    HTML Code:
    <div id="article">
    
      <div style="float:right;width:90px;">
        Some share buttons
      </div>
    
     <div style="margin:0 90px 0 0;">
        Article content Article
     </div>
    
    <div>

  3. #3
    Join Date
    May 2009
    Location
    UK
    Posts
    39
    Quote Originally Posted by slaughters View Post
    HTML Code:
    <div id="article">
    
      <div style="float:right;width:90px;">
        Some share buttons
      </div>
    
     <div style="margin:0 90px 0 0;">
        Article content Article
     </div>
    
    <div>
    This won't work. You will just make a 90px gap between the article div & sidebar div.

    Do this instead using a container div:

    HTML Code:
    <div id="container">
    
      <div id="article" style="float:left; width:75%"></div>
      <div id="sidebar" style="float:right; width:25%"></div>
    
      <div style="clear:both"></div>
    
    <div>
    You can use pixels instead of percent for the widths but ensure the container div is wide enough for both widths side-by-side. Adding padding/margins to the divs will reduce the amount of width available.

  4. #4
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Quote Originally Posted by miocene View Post
    This won't work. You will just make a 90px gap between the article div & sidebar div.
    Actually it's close to what the original poster wanted when he said,
    "...So if the articles 500 or 100 words long the right hand side always has a 90px gap. "

    Using float left and float right the way you did will always force the article text to use 75% of the container. It needs to use all the container *except* 90px's.

    The only way I know of doing that is to set one div to an explicit width and float it. Then set the next div's margin (left or right) to have the same value.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles