How to float a div in the lower right quadrant of another div?

Question

I used the following solution to float a inner-div (corner) to the top right corner of a outer-div (base). That works great.

CSS:

#base {width: 100px; height: 100px;}
#corner {float: right; width: 40px; height: 40px; margin: 0 0 15px 15px;}

HTML:

<div id="base">
    <div id="corner">
        <!--stuff inside corner-->
    </div>
    <!--other stuff inside base-->
</div>

Now I want to float the inner-div (corner) to the bottom of the outer base-div (bottom right), but I'm unable to find the correct css configuration. What do I have to change to reach my goal?

It's quite important, that the text of the base div floats the corner-div (as in the example above).

score 2 · Answer 1 · answered Feb 19 '13 at 13:38

2

Make the container div position: relative. Then, use position: absolute in the div that you want to "float" (but you don't need to use float) and set bottom and right rules to 0.

http://jsfiddle.net/ExplosionPIlls/yWGTB/

answered Feb 19 '13 at 13:38

Explosion Pills

188,624
52
326
405

I did what you mentioned, but the result is that the content of the base div does not float the corner div. Any Idea? – user2086182 Feb 19 '13 at 14:14
See the image below. The text belongs to the base div. Parts of the text are hidden by the corner-div. – user2086182 Feb 19 '13 at 14:27
You mean that you want the div to be pushed down by the text content? In that case you should put the div *after* the text content and then float it. – Explosion Pills Feb 19 '13 at 14:29
Float the base-div containing the text content or the "corner-div"? – user2086182 Feb 19 '13 at 14:47

score 2 · Answer 2 · edited May 23 '17 at 12:04

2

try positionning your divs

#base {
    width: 100px;
    height: 100px;
        /* positionning */
    position:relative;
}

#corner {
    /* float: right; */ /*floating will be useless */
    width: 40px;
    height: 40px;
    margin: 0 0 15px 15px;
        /* positionning */
    position:absolute;
    bottom:0;
    right:0;
}

Now, if you need your outter div content to FLOAT around inner-bottom-corner div, you will have to 'TRICK' your layout, simulating an empty space UNDER the inner-bottom-corner

Further infos :

How can I wrap text around a bottom-right div? (worth reading )

edited May 23 '17 at 12:04

Community

1
1

answered Feb 19 '13 at 13:40

Milche Patern

19,632
6
35
52

I'm sorry, but how can I simulate such an empty space under the inner-bottom-corner-div? – user2086182 Feb 19 '13 at 14:57
Follow the link i just posted with answer (worth reading) :) – Milche Patern Feb 19 '13 at 14:58

How to float a div in the lower right quadrant of another div?

2 Answers2