Update

Solved this, it was the inner most div needing to have auto height, as it had a fixed height that I'd completely overlooked

---

I have - like many others I have searched and found - tried to make an expandable DIV that expands based on the length of it's contents. Mine is a little different from those I have seen so far, as I have variables coming from external Controllers to display, but aside from this what I am trying to achieve is the same. I have created a DIV that contains an image that I repeat-y in the background, however the internal content DIV doesn't want to expand. I will post my code for some clarity -

<div id="feedback_question" class="span-14">
<div id="title_bar">
    <img id="brand_image" src="<?php echo img_path() . $title_row[0]->filename;?>">
    <div id="brand_text">
        <div id="brand_title"><?php echo $title_row[0]->name;?></div>
        <div id="brand_description"><?php echo $title_row[0]->description;?></div>
    </div>
</div>

<div id="background_stretch">
    <div id="question_background">
        <div id="question_tabs" class="span-14">
            <ul id="tab_list">
                <?php for($i = 1; $i <= $maxQuestions; $i++) { ?>
                <li class="tab" id="tab_<?php echo $i; ?>">
                    Q<?php echo $i; ?>
                </li>
                <?php }; ?>
            </ul>
            <div class="question_body">
            <!--Load question template here -->
            <?php echo $questions?>
            </div>
        </div>
    </div>
    <div id="bottom_section">
        <div id="bottom_button_holder">
            <div id="next_button"></div>
        </div>
    </div>
    <br class="clear" />
</div>
<div id="background_bottom">
    <a id="invite_button" href="#"><img src="<?php echo img_path(); ?>feedback/question/invite_button.png"/></a>
</div>

---

And here is my CSS -

.clear {
    clear: both;
}

.video_multi, .video_multi, .image_multi, .image_multi,  .text_multi, .text_multi {
    display: none;
}

#feedback_question {
     background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg.png') no-repeat scroll;
     height: auto;
}

#title_bar {
    height: 170px;
    border: 1px solid #EBDDE2;
    background: white;
    width: 501px;
    margin-top: 41px;
    margin-left: 8.5px;
}

#brand_image {
    height: 120px;
    width: 170px;
    border: 2.5px solid #EBDDE2;
    margin: 20px;
    float: left;
}

#brand_text {
    float: right;
    width: 283px;
    height: 150px;
    padding-top: 20px;
}

#brand_title {
    font-size: 28px;
    color: #4365c6;
}

#brand_description {
    width: 280px;
}

#question_tabs {
     background: transparent url('<?php echo img_path(); ?>feedback/question/tab_bar.png') no-repeat scroll;
     height: 40px;
     padding-top: 22px;
}


#question_background {
     border-left: 1px solid #057eb5;
     border-right: 1px solid #057eb5;
     border-top: 1px solid #057eb5;
     height: 335px;
     width: 501px;
     margin-bottom: -12px;
     overflow: hidden;

}

#tab_list {
    margin-bottom: 5px;
}
.tab {
    background: transparent url('<?php echo img_path(); ?>feedback/question/question_tab_sprite.png') no-repeat scroll 0 0;
    cursor: pointer;
    display: inline;
    height: 54px;
    list-style: none outside none;
    margin-right: -3px;
    padding-left: 16px;
    padding-right: 13px;
    padding-top: 13px;
    width: 29px;
    color: white;
    font-weight: bold;
}

.tab_hover{
    background-position: 0px -32px;
}

.tab_selected {
    background-position: 0px -64px;
    color: #0881ba;
}


#bottom_button_holder {
    background: transparent url('<?php echo img_path(); ?>feedback/question/question_button_bg.png') no-repeat scroll;
    height: 47px;
    width: 503px;
    display: block;

}

#next_button {
    background: transparent url('<?php echo img_path(); ?>feedback/question/next_button.png') no-repeat scroll;
    hei开发者_JS百科ght: 33px;
    width: 98px;
    display: block;
    position: relative;
    left: 375px;
    top: 5px;
    cursor: pointer;
}

.question_body {
    height: 270px;
    width: 500px;
}

.question_image_holder {
    list-style: none;
    display: inline;
    margin-right: 15px;
    width: 100px;
}

.question_answer_box {
    width: 350px;
    padding-left: 100px;
}

.answer {
    position: relative;
    bottom: 45px;
}

.question {
    margin-left: 5px;
}

.answer_text {
    width: 100px;
}

.answer_list_item {
    list-style: none;
}

#background_stretch {
    background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg_repeat.png') repeat-y scroll 0 0;
    display: block;
    height:auto;
    padding-left: 8.5px;
}

#background_bottom {
    background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg_bottom.png') no-repeat scroll;
    display: block;
    height: 90px;
    width: 520px;
    padding-left: 4px;
    padding-top: 20px;

}

#bottom_section {
    position: relative;
    
}

#invite_button {
    background: transparent url('<?php echo img_path(); ?>feedback/question/invite_button.png') no-repeat scroll;
    display: block;
    height: 52px;
    width: 512px;
    position: relative;

}

---

Anyway, as you should be able to see, it is my background_stretch and question_background div's that stretches with the content, this all works well and if I change the height of question_background everything moves as it should. However, it's getting question_background to adjust to it's internal contents height that is the problem for me.

I have tried various versions of clear:both and floating different boxes, all to no avail...have I overcomplicated it?

What am I doing wrong? How do I achieve this?

Appreciate any help I receive.

---

To make element "extendable" instead of height: auto; you should use overflow: auto;(when you change float). But when you won't touch height it will automaticlly fit - as @kokos said. BTW: Which Div you want to make extendable? (If i guessed right you want to make div with feedback_question class)

Useful hint: Add your code to JsFiddle

---

#question_background has a height, if it has a fixed height it will never change no matter how long the content inside it.

Also, next time you are posting such an extensive amount of code please use jsfiddle.net so we can test easier.