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

    Synching background image with auto content height

    So im having an issue with some divs that prefer only to have a set height rather than an auto or percentage.

    Basically I have some content that changes the overall height of the container in the Main Content frame. The left and right border divs when height=auto, basically disappear and alter throw the positioning off.

    If i'm defining a background image in divs on either side of a main content frame, can i get the border divs to grow or shorten when the main content frame height is changed by the content in there?

    It just seems to my amateur mind that if the heights were set to "auto" any frame would be able to define the height of the page and the other would grow along with it. Maybe I'm just missing something.

    I have included the divs in question below.

    #frame {
    width: 848px;
    height: auto;
    background-color: white;
    margin: 0pt auto;
    position:relative;
    }



    #left_border {
    width: 24px;
    height: auto;
    background-image: url(images/left_border.jpg);
    background-repeat: repeat-y;
    float:left;
    }

    #main_content {
    width: 800px;
    height: auto;
    background-image:url(images/bottom_bg.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    float:left;
    }

    #right_border {
    width: 24px;
    height: auto;
    background-image: url(images/right_border.jpg);
    background-repeat: repeat-y;
    float: left;
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to clear your floats however height:auto; doesn't work the way you think it does. To make the columns appear like they are the same height as #main_content you will need to use the faux columns technique.

    For clearing your floats read this http://www.positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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