how to make a div to float down?

css html alignment positioning
Prakash GPz picture Prakash GPz · Dec 28, 2012 · Viewed 94.8k times · Source

I have 4 divs. One is outer wrapper, and other 3 are header, content and footer respectively. All the are of same(fixed) width. But height of outer wrapper and content div are variable.

irrespective of the size of these, i want the footer div to stick at the bottom of outer wrapper. I have tried using the following CSS

position: relative;
bottom: 0px;

But it didn't work. Does anybody know a solution?

Answer

Thomas C. Rodriguez picture Thomas C. Rodriguez · May 4, 2013

To align a div to bottom, you have to first make the parent div's position relative. then make the required div's position to absolute and set the bottom property to zero.

<div style="position: relative; height: 100px; border: solid;">
  <div style="position: absolute; height: 10px; border: solid; bottom: 0; right: 0;  left: 0; ">
  </div>
</div>

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More
Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this: <table cellspacing="1" cellpadding="1"> How can the same be accomplished using CSS?

Read More