One div to remain below another div

Question

I have a div which i want to align at bottom of other main div

Updated: Here goes actual code:

<div style="width: 800px; height: 400px;"> 
few more controls here
  <div style="height: 230px; ">

                    <bpcms:cmseditableregion runat="server" id="cms1" regiontitle="Content2"
                        regiontype="HtmlEditor" required="false" />
                </div>

                <div style="height: 50px; width: 800px; border: 2px solid #99CC00; font-size: 13px;
                    color: #ffbb33; overflow: hidden; padding: 5px 20px 5px 20px;">
                    <bpcms:cmseditableregion runat="server" id="cms2" regiontitle="Content1"
                        regiontype="TextBox" required="false" />
                </div>
</div>

Despite giving fixed height of innerdiv1, innerdiv 2 still keeps moving up as per content of inner div 1

So if no content within innerdiv1, innerdiv 2 moves up completely. Is there a way i can fix innerdiv2 to remain 250px below innerdiv1 without using absolute positioning.

Also solution should work in all IEs.

Answer 1

This should work for your first problem.

<div id="maindiv">
    <div id="innerdiv1" style="height:200px;">
        few dynamic controls here
    </div>
    <div id="innerdiv2" style="height:50px">
        This div should be just above footer.
    </div>
</div>

EDIT:

You might want to check out these basic tutorials on html and css.

http://www.w3schools.com/

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

This should work for your the edited issue:

It looks like the 'few more controls here' being above your div tag is pushing the content down, and it should be placed inside of your div tag. If you don't want that youcould wrap those controls in a div and give that a set height.

<div style="width: 800px; height: 400px;">
    <div style="height: 230px;">
        few more controls here
        <!-- this content should be inside the div if you want the content to stay fixed.-->
        <bpcms:cmseditableregion runat="server" id="cms1" regiontitle="Content2" regiontype="HtmlEditor" required="false" />

    </div>

    <div style="height: 50px; width: 800px; border: 2px solid #99CC00; font-size: 13px;color: #ffbb33; overflow: hidden; padding: 5px 20px 5px 20px;">
        <bpcms:cmseditableregion runat="server" id="cms2" regiontitle="Content1"                         regiontype="TextBox" required="false" />
    </div>
</div>

This could be a cleaner way of doing it.

<style>
.outer {
width: 800px;
height: 400px;
background-color:#eee;
}
.top {
height: 230px;
background-color:#fee;
}
.bottom {
height: 50px;
/*height actually 64px when including border and padding*/
width: 800px;
/*width actually 844px when including border and padding*/
border: 2px solid #99CC00;
/* padding adds 2 px to all sides for a total of 4px */
font-size: 13px;color:
#ffbb33;
overflow: hidden;
padding: 5px 20px 5px 20px;
/* padding adds 5px to top and bottom for a total of 10px
 * padding adds 20px to left and right sides for a total of 40px */
background-color:#fee;

}
</style>
<div class="outer">
<div class="top">
    few more controls here
    <bpcms:cmseditableregion runat="server" id="cms1" regiontitle="Content2" regiontype="HtmlEditor" required="false" />
    </div>
<div class="bottom">
    <bpcms:cmseditableregion runat="server" id="cms2" regiontitle="Content1" regiontype="TextBox" required="false" />
    </div>
</div>