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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Making A Div Automatically Adjust Height

    I seem to be having trouble with Google helping me out on this one.

    Here's what I want to do. I have two divs, a wrapper and a content div of which I will place my content in. Well, my wrapper div is the one I want to automatically adjust in height as i add content into the content div but I'm lost on how to do this.

    The two divs I want this done with are called "#main-wrapper" (this is the div that I want the back ground to automatically adjust) and #content

    If I put ten thousand <br/>s inside of content, I want main-wrapper to automatically adjust.

    The Wrapper Div
    Code:
    #main-wrapper {width:990px;margin:0 auto;position:relative;top:100px;background:#282828;z-index:-1;box-shadow: 0 0 15px 5px #000;border-bottom-left-radius:60px;border-bottom-right-radius:60px;}
    The Content Div
    Code:
    #content {width:780px;left:10px;position:absolute;top:50px;}
    Link to my CSS
    http://www.kbwarriors.com/styles/base.css

    The Source
    view-source:http://www.kbwarriors.com/

  • #2
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    An absolute positioned element inside a parent positioned relative (your case) escapes from its parent's overflow.

    A solution is to give your inner DIV (#content) a position relative - same with the rest of the inner divs there, not absolute, and to give the parent DIV (#main-wrapper) a height:auto and overflow:hidden.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    An absolute positioned element inside a parent positioned relative (your case) escapes from its parent's overflow.

    A solution is to give your inner DIV (#content) a position relative - same with the rest of the inner divs there, not absolute, and to give the parent DIV (#main-wrapper) a height:auto and overflow:hidden.
    Thank you! I gave it some bottom padding just so the content or text won't end up on the very bottom of the element, but this was actually quite simple.


  •  

    Posting Permissions

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