Guy 0

I have a <div> and inside of it is an indeterminate amount of text. I want to float a 300px by 300px box in the bottom right of this <div> but I have been unable to work out the right syntax for this. I've tried float:right but this doesn't work.

3 answers

1
point
This was chosen as the best answer

You can try something like this

    <style type="text/css">
    #content {width:400px;position:relative;}
    #content .box {position:absolute;right:0px;bottom:0px;width:300px;height:300px;background-color:red;}
</style>
<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet vehicula velit. Nulla convallis tempus imperdiet. Pellentesque lacus purus, tempus et pretium nec, luctus sed arcu. Nam id enim at nibh euismod suscipit. Nunc dictum orci sit amet tortor pretium commodo. Vivamus dapibus mauris non ipsum tincidunt pulvinar. Mauris hendrerit, tortor adipiscing vulputate rhoncus, nulla risus interdum nulla, vitae interdum quam diam at nibh. Praesent pharetra vehicula augue, a euismod felis ultricies ut. Duis iaculis, felis nec mattis ullamcorper, est lectus sagittis nibh, et condimentum tellus lacus et nunc. Sed fringilla, ipsum sed egestas mollis, tortor nibh hendrerit diam, in viverra arcu velit ut justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

    <p>Sed luctus pretium interdum. Etiam fringilla nisi id lorem faucibus vehicula. Ut viverra augue sit amet diam tincidunt suscipit. Suspendisse odio augue, rutrum ut pellentesque ac, auctor et dolor. Sed urna felis, pellentesque et porttitor tincidunt, volutpat quis lorem. Mauris pellentesque leo cursus tortor varius sit amet imperdiet purus laoreet. Nulla cursus rhoncus ipsum vitae venenatis. Aenean quis sapien nisl. Cras porttitor, enim non molestie pellentesque, odio nisi pretium augue, id ullamcorper magna mi vel mauris. Phasellus vel felis non nisl tincidunt gravida a vitae ligula. </p>

    <div class="box">
    </div>
</div>
Answered about 7 years ago by Reungyos Vorajenwanich
  • That's just going to sit **over** the content? Tony Crockford about 7 years ago
  • yes it will if you doesn't want it to. You should add padding to container div equal to height of the box Reungyos Vorajenwanich about 7 years ago
  • but that will not fill in the space to the left of the box. not a solution Tony Crockford about 7 years ago
Rob 230
2
points

You don't. Float is not used for this and won't work that way. Use absolute or relative positioning instead.

Answered about 7 years ago by Rob
2
points

You might want to try using JavaScript to set the margin-top of the floated element based on the height of the containing element - 300px.

Answered about 7 years ago by Divya Manian