Photoshop Question posted in
The official user guide can be found here.

Float div to bottom right – Photoshop

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:
enter image description here

Should be something like:
enter image description here

JS solutions are welcome.

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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:

    Login or Signup to reply.
  3. 0 
    // 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;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search