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
    Kor
    Kor is offline
    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
    •