why this floating div do not goes into its parent element?

Question

http://jsfiddle.net/hL8tvet8/

look above fiddle.

As I know, floating element goes into the inside of its parent element.

But it is not. I don't know why.

I want make that floating blue div moves into its parent green div.

Why this floating div ran away from its parent div's area?

Below is the example code ( http://jsfiddle.net/hL8tvet8/ )

html :

<div class="header">
    <div class="left"></div>
    <div class="float_R"></div>
</div>

css :

.header {width: 200px; background-color: green;}
.left {width:50px; height: 50px; background-color: red;}
.float_R {width:50px; height: 50px; background-color: blue; float:right;}

score 1 · Accepted Answer · answered Sep 03 '14 at 16:01

1

Swap the order of the left and float_r elements. Divs are block elements.

See fiddle: http://jsfiddle.net/hL8tvet8/4/

<div class="header">
    <div class="float_R"></div>
    <div class="left"></div>
</div>

answered Sep 03 '14 at 16:01

Antiga

2,264
1
20
28

You are the only one who knows what I wanted. Thank you. And I know div is block element. But will that be the reason of second div(floating) is not going into the area of its parent element? Why this ... why this happening????? Why??? why the second one ran away from area of its parent block element? – goJson Sep 03 '14 at 16:10
The short answer is because the first div has its own "block". You can clear the floats to get the same effect, or the floated element can go first. Another option is to float the other one left so they are floating on the same plane. (I made the assumption you didn't want to do this) You want to read up on "margin-collapsing" and "clear". https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing – Antiga Sep 03 '14 at 16:19
Margin collapse is about the space between adjoining block elements. And that can not be the reason of the phenomenon : last child element which has float property run away from the area of its parent block element. I still don't know why the problem is being solved by just swap elements... – goJson Sep 03 '14 at 16:35
I mean, don't know why floating div stay under the first div. – goJson Sep 03 '14 at 16:56

AmanVirdi · Answer 2 · 2014-09-03T16:07:56.427

1

You should try this:

CSS:

.header {
    background-color: green;
    display: inline-block;  /*added*/
    width: 200px;
}
.left {
    background-color: red;
    float: left;           /*added*/
    height: 50px;
    width: 50px;
}
.float_R {
    background-color: blue;
    float: right;
    height: 50px;
    width: 50px;
}

Working Fiddle.

edited Sep 03 '14 at 16:07

answered Sep 03 '14 at 16:02

AmanVirdi

1,667
2
22
32

score 1 · Answer 3 · edited May 23 '17 at 11:57

See this answer.

updated fiddle.

html:

<div class="header">
    <div class="left"></div>
    <div class="float_R"></div>
</div>

css:

.header {width: 200px; background-color: green;overflow:hidden;}
.left {width:50px; height: 50px; background-color: red;}
.float_R {width:50px; height: 50px; background-color: blue; float:right;}

(Why do I have to paste the code, so I can post a fiddle link? :-?)

Basically parents of floated elements collapse. So your assumption was wrong. :(

Ehsan Sajjad · Answer 4 · 2014-09-03T16:13:15.387

After the both floating child divs you have to clear the float effect using clear:both;:

<div style="clear:both"></div>

UPDATED CODE:

<div class="header">
    <div class="left"></div>
    <div class="float_R"></div>
    <div style="clear:both"></div>
</div>

FIDDLE UPDATED:

http://jsfiddle.net/ehsansajjad465/hL8tvet8/8/

If you want both divs opposite to each other then, put left div also float left:

.left {width:50px; height: 50px; background-color: red;float:left;}

DEMO FIDDLE

score 0 · Answer 5 · answered Sep 03 '14 at 16:03

It is a basic question

<div class="header">
   <div class="left"></div>
   <div class="float_R"></div>
   <div style="clear:both;"></div>
</div>

.header {width: 200px; background-color: green;}
.left {width:50px; height: 50px; background-color: red;float:left;}
.float_R {width:50px; height: 50px; background-color: blue; float:right;}

score 0 · Answer 6 · answered Sep 03 '14 at 16:07

You can reverse the order of the 2 div like this :

DEMO : http://jsfiddle.net/Vinyl/ctxsr2um/1/

<div class="header">    
    <div class="float_R"></div>
    <div class="left"></div>
</div>

Or you can add a div with clear:both and a float:left on the first div:

DEMO : http://jsfiddle.net/Vinyl/f8y7010h/

more info on clear : https://developer.mozilla.org/fr/docs/Web/CSS/clear

HTML :

<div class="header">    
    <div class="float_R"></div>
    <div class="left"></div>
</div>

CSS :

.header {
    width: 200px;
    background-color: green;
}
.left {
    float:left;
    width:50px;
    height: 50px;
    background-color: red;
}
.float_R {
    width:50px;
    height: 50px;
    background-color: blue;
    float:right;
}

score 0 · Answer 7 · answered Sep 03 '14 at 16:20

Since div are block elements, they will stack over one another. You need to make them inline-blocks. you can try this

.header {
width: 200px;
background-color: green;
font-size: 0; /*added to remove unwanted bottom margin on inline blocks*/
}
.left {
display:inline-block; /*added*/
width:50px;
height: 50px;
background-color: red;
}
.float_R {
width:50px;
height: 50px;
background-color: blue;
float:right;
}

JS FIDDLE LINK

score 0 · Answer 8 · answered Sep 03 '14 at 16:20

Although <div class="left"></div> is 50px width it generates a block box, thus next one is positioned below.

Take a look at: MDN Visual formatting model

When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out.

To avoid this, you can take off the first div from the normal flow using the float property.

Example jsfiddle

why this floating div do not goes into its parent element?

8 Answers8

UPDATED CODE:

FIDDLE UPDATED: