Div float in the lower right corner

Question

I have no problem fusing the div to the top right side, but how can I do the same thing, but from 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 div .panel-col-top.

Please note that I cannot change the structure of HTML in the kernel of the system, so the divs and containers should be exactly the same as in the above example. So, I think this is just a question with CSS or JS too welcome. However, I can replace / switch the contents of panel-col-top to panel-col-bottom, if necessary.

Some Photoshop skills:

It should be something like:

JS solutions are welcome.

Answer 1

:

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

jquery-:

JS

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

});

jquery

prepend():

JS

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

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

.prepend()

Answer 2

HTML CSS, - 2 align img.

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>

JS. : http://jsfiddle.net/wQbB3/6/

JS- :

• 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;
 }