How to float blocks to opposite corners of text?

Question

As shown in this jsfiddle, I would like to arrange 2 images into opposite corners of a page of text. The width and height of the body are adjustable. (If the user narrows his window, the text will take up more space vertically and less horizontally.)

I have already seen How to position two images in opposite corners of one div. I thought I'd start with something like:

.image1{
    float: left;
}
.image2{
    float: right;
}

Floating the first block is easy.

How could I set the 2nd block such that it always knows where to be (such that it is in the bottom right of the container and no text is below or to the right of it)?

why dont you put it in the end of all your paragraphs and divs? isnt that what you want? — user2211216, Jan 21 '14 at 07:30
@user2211216 That wouldn't work either. Look at http://jsfiddle.net/MYty4/3/ — Ryan, Jan 21 '14 at 23:52
A coworker just pointed me to http://stackoverflow.com/a/314837, and the question-asker there seems to believe that what I'm asking is impossible. That's surprising to me. — Ryan, Jan 22 '14 at 02:53

NoobEditor · Answer 1 · 2014-01-23T06:04:30.137

0

You'll have to use position to achieve your target.
Also, since the image2 is supposed to align next to the last p, using last-child property is also a handy tool to adjust the width

working demo

    #container {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
        position:relative; /*added*/
    }
    p {
        width:100%;
        height:100%;
    }
    #container > p:last-child {
        width:calc(100% - 180px); /*added*/
    }
    .image2 {
        margin: 20px 0 0 20px;
        position:absolute; /*added*/
        bottom:0; /*added*/
        right:0; /*added*/
        background: red;
   }

edited Jan 23 '14 at 06:04

answered Jan 21 '14 at 07:39

NoobEditor

15,563
19
81
112

@NoobEditor Your jsfiddle definitely doesn't do what I'm hoping for. Try dragging the divider in the jsfiddle (or otherwise resize the window), and you'll see that the red box does not always sit at the bottom right of the last paragraph. Thanks for trying, though. I didn't know about "calc". – Ryan Jan 21 '14 at 23:48
@DebajyotiDas Your jsfiddle has a similar problem to NoobEditor's. See how resizing the window messes up where the box is? Thanks though. – Ryan Jan 21 '14 at 23:49
@NoobEditor thanks for trying again, but what I need is for the red block not to be BELOW all text but to be in the bottom right corner of text. In other words, it would have some text to the left of it (and text above it). – Ryan Jan 22 '14 at 22:59
@NoobEditor That's the closest try so far! But see how the red block now is covering text (making it unreadable), depending on the window size? The text isn't wrapping properly. Thanks for trying. – Ryan Jan 23 '14 at 06:27
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/45870/discussion-between-noobeditor-and-ryan) – NoobEditor Jan 23 '14 at 06:29
@Ryan : please come on chat!! :) – NoobEditor Jan 23 '14 at 06:30

How to float blocks to opposite corners of text?

1 Answers1