CSS / JQuery: Align floated element to bottom of parent div -

is possible align floated element bottom of parent div , retain text-wrapping, using css preferably jquery if necessary?

here's jsfiddle example of issue

<div class="content">     <div class="floated-top"></div>      <p>bacon ipsum dolor sit amet andouille jerky leberkas salami turkey, meatball prosciutto biltong shank chicken jowl frankfurter boudin. beef pork chop fatback, shank ball tip hamburger meatball strip steak t-bone ground round meatloaf flank pork ribeye. beef spare ribs pig flank. kielbasa beef ribs turkey strip steak tail pastrami prosciutto jowl ham hock shoulder hamburger venison brisket flank.</p>      <p>biltong pork loin short ribs salami. pork flank beef filet mignon biltong meatball. frankfurter andouille bresaola, shank sausage shoulder tri-tip bacon pork salami meatball fatback capicola strip steak. chicken ground round strip steak bacon pancetta pork loin leberkas boudin pork chop shank fatback. turkey doner spare ribs cow shank boudin t-bone frankfurter turducken tongue flank kielbasa pork.</p>      <p>ground round tri-tip venison fatback. shank tenderloin ribeye pastrami prosciutto strip steak capicola ground round spare ribs salami pork. bacon strip steak jowl meatloaf prosciutto doner sausage leberkas beef. tongue pork chop cow short ribs. ham hock pork loin doner, drumstick short ribs chicken fatback flank frankfurter rump beef cow ribeye.</p>      <p>short ribs chicken shank, meatball jerky shoulder turducken. short loin short ribs sausage meatball biltong rump pork loin boudin chicken. tongue boudin leberkas, fatback biltong beef ribs short loin corned beef hamburger rump salami ball tip turducken kielbasa tri-tip. pork belly spare ribs hamburger boudin, short ribs rump biltong andouille tri-tip pork loin beef ribs frankfurter tongue meatball. corned beef swine brisket short loin tri-tip.</p>      <div class="floated-bot"></div> </div> 

the element floated-top behaves expect/want floated element behave. text wraps around element, , top of floated-top aligned top of text. if floated element first element in parent div, it's aligned top of parent.

however, cannot align floated element bottom of text, or bottom of parent div.

i know use absolute positioning...

.content {     position: relative; }  .floated-bot {     position: absolute;     left: 0;     bottom: 0; } 

...to position element want, lose text-wrapping float gives me.

is i'm after possible?

so far i'm aware, no it's not. see question, offers absolute positioning example provided.

there plenty of ways achieve result want, you'd better off putting floated element above last paragraph. use table, hate idea , i'd suggest if you're creating layout yourself, not using dynamic text, it's possible tweak using floats. here's quick mockup rearranging elements

you need make sure you're clearing floats. try micro clearfix hack:

.content:before, .content:after {     content:" ";      display:table;  } .content:after { clear:both; }