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

Question

Is it possible to align a floated element to the bottom of its parent div and retain text-wrapping, using CSS preferably but JQuery if necessary?

Here's a jsFiddle example of the 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 as I usually expect/want a floated element to behave. Text wraps around the element, and the top of the floated-top is aligned with the top of the text. If the floated element is the first element in a parent div, it's aligned with the top of that parent.

However, I cannot align the floated element with the bottom of the text, or the bottom of the parent div.

I know I could use absolute positioning...

.content {
    position: relative;
}

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

...to position the element where I want, but I would then lose the text-wrapping that float gives me.

Is what I'm after possible?

You also need to make sure that you're clearing your floats. [Try the micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/). See updated [JSFiddle](http://jsfiddle.net/7nrMp/2/) — Ian Clark, Aug 10 '13 at 18:11

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

So far as I'm aware, no it's not. See this question, which offers the absolute positioning example you provided.

There are plenty of ways you could achieve the result you want, but ultimately you'd be better off just putting the floated element above the last paragraph. You could even use a table, but I hate that idea and I'd suggest that if you're creating this layout yourself, not using dynamic text, it's possible to tweak it using floats. Here's a really quick mockup by just rearranging your elements

You also need to make sure that you're clearing your floats. Try the micro clearfix hack:

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

edited May 23 '17 at 12:20

Community

1
1

answered Aug 10 '13 at 18:18

Ian Clark

9,237
4
32
49

Thanks for the response. Unfortunately, placing the floated element above the last paragraph won't do as the heights, of both the floated element and the last paragraph, are variable. – Mark Ryan Sallee Aug 10 '13 at 18:28
But you still want the text to wrap around your floated element? – Ian Clark Aug 10 '13 at 18:29
Correct. I am not opposed to placing the element above the last paragraph in the HTML. But that won't do everything I want because the floated element may be longer than the last paragraph (or vice versa). – Mark Ryan Sallee Aug 10 '13 at 18:42
I understand, I'm sure you could achieve something with some JavaScript tomfoolery, but I don't think it's going to happen with pure CSS – Ian Clark Aug 10 '13 at 19:12

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

1 Answers1