Float div to bottom right

Question

I have no problem floating the div to top right side, but how do I do the same but to the bottom?

Test object: http://jsfiddle.net/wQbB3/

.panel-2col-stacked {
  margin-top: 0;
  padding-top: 0;
}
.panel-2col-stacked .panel-col-top, .panel-2col-stacked .panel-col-bottom {
  clear: none !important;
  width: auto;
}
.panel-col-top {
  float: right;
  margin: 0 0 0 25px;
  vertical-align: bottom;
}

So I need to float the .panel-col-top div.

Note that I cannot change HTML structure in the systems core, so the divs and containers has to be exactly the same as in the example above. So I guess this is just a CSS question or JS is welcome too. I can replace/switch the panel-col-top content with panel-col-bottom if needed though.

Some Photoshop skills:

Should be something like:

JS solutions are welcome.

Answer 1

Try this:

html

<div class="panel-2col-stacked clearfix panel-display">

    <div class="panel-col-bottom panel-panel">
        <p>Sed eget lectus sagittis, tincidunt tortor eget, varius dolor. Maecenas aliquet venenatis vehicula. Praesent ullamcorper luctus purus, eu gravida odio fringilla a. Fusce id risus eu eros interdum pulvinar. Donec rhoncus felis vel tellus ullamcorper; id auctor nunc porta. Fusce sollicitudin elit rhoncus fermentum vulputate! In consequat massa at augue tempus vehicula. Mauris eu purus nec neque hendrerit pretium? Nunc in ante ultricies, pharetra lectus at, vulputate orci.</p>
<p>Nulla blandit nulla nec risus commodo, sit amet volutpat dui aliquet. Donec dapibus et sem in imperdiet? Praesent non risus tortor? Praesent ut libero non ante lacinia tristique! Sed non porttitor velit, sit amet eleifend felis. Cras ultricies risus sem, non interdum enim ultricies quis. Nulla nec odio semper, cursus lorem ac, scelerisque lacus. Morbi in augue est. Aenean accumsan ligula a nulla egestas lobortis. In hac habitasse platea dictumst. Phasellus nec semper metus, volutpat posuere dolor. Quisque id condimentum dolor.</p>
    </div>
</div>
<div class="panel-col-top panel-panel">
        <img width="333" height="233" alt="" src="http://i.imgur.com/OUYtEbj.jpg" typeof="foaf:Image">
    </div>

css

.panel-2col-stacked {
  margin-top: 0;
  padding-top: 0;
}
.panel-2col-stacked .panel-col-top, .panel-2col-stacked .panel-col-bottom {
  clear: none !important;
  width: auto;
}
.panel-col-top {
  float: right;
  margin: 0 0 0 25px;
  vertical-align: bottom;
}

fiddle

Change a bit with jquery approach:

js

$(function(){
    $(".panel-col-top").appendTo(".panel-col-bottom p:nth-child(1)");

});

fiddle jquery approach

After some research i ended with this using prepend():

js

$(function(){
    var a = $(".panel-col-top");

    $(".panel-col-bottom p:nth-child(2)").prepend(a);
});

fiddle with .prepend() approach

Answer 2

Using HTML and CSS, the best way to do that is using 2 paragraphs and the align img attribute.

HTML:

<p>Sed eget lectus sagittis, tincidunt tortor eget, varius dolor. Maecenas aliquet venenatis vehicula. Praesent ullamcorper luctus purus, eu gravida odio fringilla a. Fusce id risus eu eros interdum pulvinar. Donec rhoncus felis vel tellus ullamcorper; id auctor nunc porta. Fusce sollicitudin elit rhoncus fermentum vulputate! In consequat massa at augue tempus vehicula. Mauris eu purus nec neque hendrerit pretium? Nunc in ante ultricies, pharetra lectus at, vulputate orci.</p>
<p><img width="333" height="233" alt="" src="http://i.imgur.com/OUYtEbj.jpg" align="right">Nulla blandit nulla nec risus commodo, sit amet volutpat dui aliquet. Donec dapibus et sem in imperdiet? Praesent non risus tortor? Praesent ut libero non ante lacinia tristique! Sed non porttitor velit, sit amet eleifend felis. Cras ultricies risus sem, non interdum enim ultricies quis. Nulla nec odio semper, cursus lorem ac, scelerisque lacus. Morbi in augue est. Aenean accumsan ligula a nulla egestas lobortis. In hac habitasse platea dictumst. Phasellus nec semper metus, volutpat posuere dolor. Quisque id condimentum dolor.</p>

I updated the JS Fiddle. You can check it here: http://jsfiddle.net/wQbB3/6/

Here's some JS libraries to wrap text around an image:

• jqSlickWrap: http://www.jwf.us/projects/jQSlickWrap/
• bacon: http://baconforme.com/

Answer 3

// test this code
 .panel-2col-stacked {
    margin: 10px auto;
    position: relative;
    width: 1200px;
}
.panel-col-top {
     position: absolute;
     right: 33px;
     top: 41px;
 }
 .panel-col-bottom.panel-panel {
     height: 300px;
}
.panel-col-bottom.panel-panel p:last-child {
    padding-right: 400px;
 }