SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Make a Div fill remainder of a container Div

    Hello again, I've got a small issue that I hope someone can solve. I have 3 divs inside of a container div with a fixed height. Without knowing the heights of DIV1 & DIV3 (both variable depending on content) I want DIV2 to expand in the middle to fill any remaining space. Any help appreciated. I've had a search and can't find a similar solution.

    Code:
    <div class="CONTAINER" height="400px">
    <div class="DIV1">Header Text</div>
    <div class="DIV2">Content Text</div>
    <div class="DIV3">Footer Text</div>
    </div>
    Thanks in advance.
    James

  2. #2
    SitePoint Member
    Join Date
    Nov 2004
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for wasting time, worked it out. Was pretty obvious but something else in my style was messing it up.

    Code:
    .container{
    	position: relative;
    }
    .div3{
    	position: absolute;
    	bottom: 0;
    }
    It doesn't expand div2 but puts white space between div2 & div3 which in effect is the same.

    ====EDITED TO ADD MORE====

    Problem not actually solved, if div2 has too much content it flows over div3, instead of applying for example a scrollbar (overflow: scroll any suggestions?
    Last edited by tobybowes; Sep 10, 2012 at 05:32. Reason: Not actually resolved


Tags for this Thread

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
  •