Jun23

How to force a child container to the bottom of the parent

by webpaws on June 23rd, 2011 at 6:38 pm
Posted In: web development, web design, CSS, web development, web design, HTML, web development, web design, web development, web development, web design, XHTML

Using CSS to format your HTML the way you want it can be tricky. Here we will talk about forcing a child div container to the bottom of the parent div container with illustrations and code.

Here is the task, get the gold rectangle to sit inside the bottom of the parent blue rectangle:

Parent div Element

Child div element (we want this to reside at the bottom)

Here is the code for the above rectangles (div elements):


<div style="width:500px; height:150px; background-color:#3366CC; position:relative; float:left;">
<h3>Parent div Element</h3>
<div style="background-color:#FFCC00;">
<h3>Child div element (we want this to reside at the bottom)</h3>
</div>
</div>

To force the child div to the bottom, we apply the following CSS commands to the child div:

position:absolute; bottom:0; left:0; width:500px;

And the result is:

Parent div Element

Child div element (we want to reside at the bottom)

NOTE: Whenever you float an HTML element, you need to clear the float or it will continue to propagate throughout your page. Use:

<div style="clear:both;"></div>

right after your floating elements.

└ Tags: , , ,