Why a float right div is floating inside the next div?

Question

I was hoping I wasn't a beginner with css, but I can't understand why the following happens...

You can see an example here

I wish to display 2 separated div on the same "line" :

First div must 100% width to the second
Second div at the extrem right of the first

So, I've done the following

// CSS
.div2 {
    background:#EDEDED;
    float:right;    
}
.div1  {    
    background:#CCC;
}
.div1, .div2 {
    padding:4px;
    margin:4px;
}
.round {
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    border:1px solid #000;
}
// HTML
<div class="div2 round">Test 2</div>
<div class="div1 round">Test 1</div>

But the .div2 is inside the first div... Bad display

How to display something like following ? (Like I thought it should be displayed...) Good display

Any help appreciated...

EDIT : SOLUTION By user570783

.div1 {overflow:hidden;}

Work like a charm, but not really documented, why this works ?

Add overflow: hidden; to the div1 style. http://stackoverflow.com/questions/2198116/xhtml-css-how-to-make-inner-div-get-100-width-minus-another-div-width — user570783, May 06 '12 at 23:42
@user570783 Perfect answer ! Thanks a lot. Write it in an answer then I could accept it please. — Valky, May 06 '12 at 23:55
I posted an answer, but was turned into a comment because it was too short. Anyway, it would be useful to include in the answer where is this behaviour documented in the css standard. I really don't understand why this works. — user570783, May 07 '12 at 00:17

score 2 · Answer 1 · answered May 06 '12 at 23:39

2

float does what is says. float. as in stuff can be underneath it. Text will be wrapped, but borders won't

if you know the width of "Test 2", you can add a "margin-right: x;"

answered May 06 '12 at 23:39

Cole Tobin

9,206
15
49
74

Thanks for your answer, but I can't know the div1 or div2 width – Valky May 06 '12 at 23:44

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

2

OK, there are many solutions here involving, floats, inline-block, margins and borders but all require knowledge of at least one element's size.

However!

There's a trick you can do here. If you add 'overflow:hidden' to the first div it will force the div to 'block formatting context'

This will get the result you're after, with dynamic sized right floating element.

To make this work in IE5 and 6 you need to trigger 'hasLayout' on the first element, so position: relative;

fiddle

edited May 23 '17 at 12:06

Community

1
1

answered May 07 '12 at 00:45

Thomas Hudspith-Tatham

471
3
13

at the time of writing this i didn't see that someone else had answered it in the comments! gj user570783 – Thomas Hudspith-Tatham May 07 '12 at 00:50

Why a float right div is floating inside the next div?

2 Answers2