html - How to make div at the bottom center all the time? -

i'm making website first time , it's hard me on simple tasks. right i'm stuck @ problem. have 1 div floats left , 1 floats right. @ pages div @ left bigger div @ right, it's opposite.

i need 1 more div stays @ bottom center no matter (left or right) div bigger. right managed work if div @ left bigger div @ right.

sorry it's confusing , hard explain, problem positioning, can't figure out myself how make work.

in short: need id bottom @ bottom center, below other divs. forgot mention: if move divs, messes on different screen sizes.

<div id="bottom"><p>how make text @ bottom center time?</p></div> 

example here (check id bottom): http://jsfiddle.net/zmlyz/61/

well, problem not in css, rather in html.

you've placed div id="bottom" within "div style="float:left;" element. why bottom bar appears flying in between. in reality, placed it, css doing it's supposed to.

---

solution:

in updated fiddle, please note lines 89 , 90 in html.
1. line 89 being used clear float property upcoming elements.
2. line 90 bototm div.

as css, strting line 15, i've made changes it's same before line.