Why is text wrapping around a floating element instead of going belows like another div?
-2
I'm trying to understand CSS a bit deeper and I noticed that when a div is floating other elements go beneath it. That is not the case for text that wraps arount it. How come ?
html css
asked Nov 24 '18 at 11:38
WiceloWicelo
85711532
add a comment |
-2
I'm trying to understand CSS a bit deeper and I noticed that when a div is floating other elements go beneath it. That is not the case for text that wraps arount it. How come ?
html css
asked Nov 24 '18 at 11:38
WiceloWicelo
85711532
Other divs don't go below a floating div either. The determining factor is if whatever content is narrow enough to fit next to the floating div, otherwise it is forced down. It doesn't matter if it's text or an image or anything.
– Mr Lister
Nov 24 '18 at 11:49
@MrLister I don't agree, other divs will go below and by below we don't mean a new line but below it considering the z-axis because div (block element) will not wrap around float element jsfiddle.net/3e8ojmcw
– Temani Afif
Nov 24 '18 at 19:43
Good point. So @Wicelo, did you mean beneath as lower on the screen or behind as deeper in the stack?
– Mr Lister
Nov 24 '18 at 21:23
add a comment |
-2
-2
-2
I'm trying to understand CSS a bit deeper and I noticed that when a div is floating other elements go beneath it. That is not the case for text that wraps arount it. How come ?
html css
asked Nov 24 '18 at 11:38
WiceloWicelo
85711532
I'm trying to understand CSS a bit deeper and I noticed that when a div is floating other elements go beneath it. That is not the case for text that wraps arount it. How come ?
html css
html css
asked Nov 24 '18 at 11:38
WiceloWicelo
85711532
asked Nov 24 '18 at 11:38
WiceloWicelo
85711532
asked Nov 24 '18 at 11:38
WiceloWicelo
85711532
asked Nov 24 '18 at 11:38
WiceloWicelo
85711532
asked Nov 24 '18 at 11:38
WiceloWicelo
85711532
85711532
Other divs don't go below a floating div either. The determining factor is if whatever content is narrow enough to fit next to the floating div, otherwise it is forced down. It doesn't matter if it's text or an image or anything.
– Mr Lister
Nov 24 '18 at 11:49
@MrLister I don't agree, other divs will go below and by below we don't mean a new line but below it considering the z-axis because div (block element) will not wrap around float element jsfiddle.net/3e8ojmcw
– Temani Afif
Nov 24 '18 at 19:43
Good point. So @Wicelo, did you mean beneath as lower on the screen or behind as deeper in the stack?
– Mr Lister
Nov 24 '18 at 21:23
add a comment |
Other divs don't go below a floating div either. The determining factor is if whatever content is narrow enough to fit next to the floating div, otherwise it is forced down. It doesn't matter if it's text or an image or anything.
– Mr Lister
Nov 24 '18 at 11:49
@MrLister I don't agree, other divs will go below and by below we don't mean a new line but below it considering the z-axis because div (block element) will not wrap around float element jsfiddle.net/3e8ojmcw
– Temani Afif
Nov 24 '18 at 19:43
Good point. So @Wicelo, did you mean beneath as lower on the screen or behind as deeper in the stack?
– Mr Lister
Nov 24 '18 at 21:23
Other divs don't go below a floating div either. The determining factor is if whatever content is narrow enough to fit next to the floating div, otherwise it is forced down. It doesn't matter if it's text or an image or anything.
– Mr Lister
Nov 24 '18 at 11:49
Other divs don't go below a floating div either. The determining factor is if whatever content is narrow enough to fit next to the floating div, otherwise it is forced down. It doesn't matter if it's text or an image or anything.
– Mr Lister
Nov 24 '18 at 11:49
@MrLister I don't agree, other divs will go below and by below we don't mean a new line but below it considering the z-axis because div (block element) will not wrap around float element jsfiddle.net/3e8ojmcw
– Temani Afif
Nov 24 '18 at 19:43
@MrLister I don't agree, other divs will go below and by below we don't mean a new line but below it considering the z-axis because div (block element) will not wrap around float element jsfiddle.net/3e8ojmcw
– Temani Afif
Nov 24 '18 at 19:43
Good point. So @Wicelo, did you mean beneath as lower on the screen or behind as deeper in the stack?
– Mr Lister
Nov 24 '18 at 21:23
Good point. So @Wicelo, did you mean beneath as lower on the screen or behind as deeper in the stack?
– Mr Lister
Nov 24 '18 at 21:23
add a comment |
1 Answer
1
active
oldest
votes
2
This is by design as this is how float works. If you refer to the documentation:
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.
You should note 2 features of float elements:
- Removed from normal flow: Which means that others elements can overlap floating element or be overlaped by floating element (like with
position:absolute) - text and inline elements will wrap around: Only text and inline level elements will not be overlap floating element but will wrap around it.
Here is some basic examples to better understand:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
}<div class="float"></div>
<div class="blue"></div>The blue div is overlaped by the float element because it's a block level element.
It won't be the case if we make it an inline level element (inline-block)
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
display:inline-block;
}<div class="float"></div>
<div class="blue"></div>When we add text you will notice how the text will wrap around the float element and will be kept inside it's containing block (the blue div).
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
color:#fff;
background: blue;
}<div class="float"></div>
<div class="blue"> some text here some text here some text here some text here some text here some text here some text here some text here</div>The same happen if we have more of the blue divs:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
opacity:0.5;
}
.blue {
width: 200px;
color:#fff;
background: blue;
margin:5px;
}<div class="float"></div>
<div class="blue"> some text here some text here s</div>
<div class="blue"> some text here some text here some</div>To make it easy: a float element will overlap all the block element around it and inline element will wrap around it.
answered Nov 24 '18 at 20:00
Temani AfifTemani Afif
77.1k94490
Well when you set the blue element toinline(you set it toinline-block) it is hidden under the red floating div, that's my question basically, because text isinlinenotinline-block
– Wicelo
Nov 25 '18 at 9:45
@Wicelo inline and inline-block are the same, they both will wrap around float .. i simply used inline-block to be able to add height/width because with inline element we cannot set width/height but both are "inline level element"
– Temani Afif
Nov 25 '18 at 9:47
@Wicelo so if you set inline to the blue div, you will simply not see it if there is no content inside it
– Temani Afif
Nov 25 '18 at 9:48
you are right the inline display shrunk the div (i had in it) and I thought it was going under but it was just shrunk.
– Wicelo
Nov 25 '18 at 9:48
@Wicelo add some content on it and you will see jsfiddle.net/m2ydjqp8 ... the width/height is defined by content and the use of width/height will have no effect because this is how inline element work but notice how it wrap around unlike a block element and exactly like inline-block element
– Temani Afif
Nov 25 '18 at 9:50
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53457727%2fwhy-is-text-wrapping-around-a-floating-element-instead-of-going-belows-like-anot%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
This is by design as this is how float works. If you refer to the documentation:
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.
You should note 2 features of float elements:
- Removed from normal flow: Which means that others elements can overlap floating element or be overlaped by floating element (like with
position:absolute) - text and inline elements will wrap around: Only text and inline level elements will not be overlap floating element but will wrap around it.
Here is some basic examples to better understand:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
}<div class="float"></div>
<div class="blue"></div>The blue div is overlaped by the float element because it's a block level element.
It won't be the case if we make it an inline level element (inline-block)
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
display:inline-block;
}<div class="float"></div>
<div class="blue"></div>When we add text you will notice how the text will wrap around the float element and will be kept inside it's containing block (the blue div).
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
color:#fff;
background: blue;
}<div class="float"></div>
<div class="blue"> some text here some text here some text here some text here some text here some text here some text here some text here</div>The same happen if we have more of the blue divs:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
opacity:0.5;
}
.blue {
width: 200px;
color:#fff;
background: blue;
margin:5px;
}<div class="float"></div>
<div class="blue"> some text here some text here s</div>
<div class="blue"> some text here some text here some</div>To make it easy: a float element will overlap all the block element around it and inline element will wrap around it.
answered Nov 24 '18 at 20:00
Temani AfifTemani Afif
77.1k94490
Well when you set the blue element toinline(you set it toinline-block) it is hidden under the red floating div, that's my question basically, because text isinlinenotinline-block
– Wicelo
Nov 25 '18 at 9:45
@Wicelo inline and inline-block are the same, they both will wrap around float .. i simply used inline-block to be able to add height/width because with inline element we cannot set width/height but both are "inline level element"
– Temani Afif
Nov 25 '18 at 9:47
@Wicelo so if you set inline to the blue div, you will simply not see it if there is no content inside it
– Temani Afif
Nov 25 '18 at 9:48
you are right the inline display shrunk the div (i had in it) and I thought it was going under but it was just shrunk.
– Wicelo
Nov 25 '18 at 9:48
@Wicelo add some content on it and you will see jsfiddle.net/m2ydjqp8 ... the width/height is defined by content and the use of width/height will have no effect because this is how inline element work but notice how it wrap around unlike a block element and exactly like inline-block element
– Temani Afif
Nov 25 '18 at 9:50
add a comment |
2
This is by design as this is how float works. If you refer to the documentation:
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.
You should note 2 features of float elements:
- Removed from normal flow: Which means that others elements can overlap floating element or be overlaped by floating element (like with
position:absolute) - text and inline elements will wrap around: Only text and inline level elements will not be overlap floating element but will wrap around it.
Here is some basic examples to better understand:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
}<div class="float"></div>
<div class="blue"></div>The blue div is overlaped by the float element because it's a block level element.
It won't be the case if we make it an inline level element (inline-block)
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
display:inline-block;
}<div class="float"></div>
<div class="blue"></div>When we add text you will notice how the text will wrap around the float element and will be kept inside it's containing block (the blue div).
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
color:#fff;
background: blue;
}<div class="float"></div>
<div class="blue"> some text here some text here some text here some text here some text here some text here some text here some text here</div>The same happen if we have more of the blue divs:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
opacity:0.5;
}
.blue {
width: 200px;
color:#fff;
background: blue;
margin:5px;
}<div class="float"></div>
<div class="blue"> some text here some text here s</div>
<div class="blue"> some text here some text here some</div>To make it easy: a float element will overlap all the block element around it and inline element will wrap around it.
answered Nov 24 '18 at 20:00
Temani AfifTemani Afif
77.1k94490
Well when you set the blue element toinline(you set it toinline-block) it is hidden under the red floating div, that's my question basically, because text isinlinenotinline-block
– Wicelo
Nov 25 '18 at 9:45
@Wicelo inline and inline-block are the same, they both will wrap around float .. i simply used inline-block to be able to add height/width because with inline element we cannot set width/height but both are "inline level element"
– Temani Afif
Nov 25 '18 at 9:47
@Wicelo so if you set inline to the blue div, you will simply not see it if there is no content inside it
– Temani Afif
Nov 25 '18 at 9:48
you are right the inline display shrunk the div (i had in it) and I thought it was going under but it was just shrunk.
– Wicelo
Nov 25 '18 at 9:48
@Wicelo add some content on it and you will see jsfiddle.net/m2ydjqp8 ... the width/height is defined by content and the use of width/height will have no effect because this is how inline element work but notice how it wrap around unlike a block element and exactly like inline-block element
– Temani Afif
Nov 25 '18 at 9:50
add a comment |
2
2
2
This is by design as this is how float works. If you refer to the documentation:
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.
You should note 2 features of float elements:
- Removed from normal flow: Which means that others elements can overlap floating element or be overlaped by floating element (like with
position:absolute) - text and inline elements will wrap around: Only text and inline level elements will not be overlap floating element but will wrap around it.
Here is some basic examples to better understand:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
}<div class="float"></div>
<div class="blue"></div>The blue div is overlaped by the float element because it's a block level element.
It won't be the case if we make it an inline level element (inline-block)
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
display:inline-block;
}<div class="float"></div>
<div class="blue"></div>When we add text you will notice how the text will wrap around the float element and will be kept inside it's containing block (the blue div).
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
color:#fff;
background: blue;
}<div class="float"></div>
<div class="blue"> some text here some text here some text here some text here some text here some text here some text here some text here</div>The same happen if we have more of the blue divs:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
opacity:0.5;
}
.blue {
width: 200px;
color:#fff;
background: blue;
margin:5px;
}<div class="float"></div>
<div class="blue"> some text here some text here s</div>
<div class="blue"> some text here some text here some</div>To make it easy: a float element will overlap all the block element around it and inline element will wrap around it.
answered Nov 24 '18 at 20:00
Temani AfifTemani Afif
77.1k94490
This is by design as this is how float works. If you refer to the documentation:
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.
You should note 2 features of float elements:
- Removed from normal flow: Which means that others elements can overlap floating element or be overlaped by floating element (like with
position:absolute) - text and inline elements will wrap around: Only text and inline level elements will not be overlap floating element but will wrap around it.
Here is some basic examples to better understand:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
}<div class="float"></div>
<div class="blue"></div>The blue div is overlaped by the float element because it's a block level element.
It won't be the case if we make it an inline level element (inline-block)
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
display:inline-block;
}<div class="float"></div>
<div class="blue"></div>When we add text you will notice how the text will wrap around the float element and will be kept inside it's containing block (the blue div).
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
color:#fff;
background: blue;
}<div class="float"></div>
<div class="blue"> some text here some text here some text here some text here some text here some text here some text here some text here</div>The same happen if we have more of the blue divs:
.float {
width: 100px;
height: 100px;
background: red;
float: left;
opacity:0.5;
}
.blue {
width: 200px;
color:#fff;
background: blue;
margin:5px;
}<div class="float"></div>
<div class="blue"> some text here some text here s</div>
<div class="blue"> some text here some text here some</div>To make it easy: a float element will overlap all the block element around it and inline element will wrap around it.
.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
}<div class="float"></div>
<div class="blue"></div>.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
}<div class="float"></div>
<div class="blue"></div>.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
display:inline-block;
}<div class="float"></div>
<div class="blue"></div>.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
background: blue;
display:inline-block;
}<div class="float"></div>
<div class="blue"></div>.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
color:#fff;
background: blue;
}<div class="float"></div>
<div class="blue"> some text here some text here some text here some text here some text here some text here some text here some text here</div>.float {
width: 100px;
height: 100px;
background: red;
float: left;
}
.blue {
width: 200px;
height: 200px;
color:#fff;
background: blue;
}<div class="float"></div>
<div class="blue"> some text here some text here some text here some text here some text here some text here some text here some text here</div>.float {
width: 100px;
height: 100px;
background: red;
float: left;
opacity:0.5;
}
.blue {
width: 200px;
color:#fff;
background: blue;
margin:5px;
}<div class="float"></div>
<div class="blue"> some text here some text here s</div>
<div class="blue"> some text here some text here some</div>.float {
width: 100px;
height: 100px;
background: red;
float: left;
opacity:0.5;
}
.blue {
width: 200px;
color:#fff;
background: blue;
margin:5px;
}<div class="float"></div>
<div class="blue"> some text here some text here s</div>
<div class="blue"> some text here some text here some</div>answered Nov 24 '18 at 20:00
Temani AfifTemani Afif
77.1k94490
answered Nov 24 '18 at 20:00
Temani AfifTemani Afif
77.1k94490
answered Nov 24 '18 at 20:00
Temani AfifTemani Afif
77.1k94490
answered Nov 24 '18 at 20:00
Temani AfifTemani Afif
77.1k94490
77.1k94490
Well when you set the blue element toinline(you set it toinline-block) it is hidden under the red floating div, that's my question basically, because text isinlinenotinline-block
– Wicelo
Nov 25 '18 at 9:45
@Wicelo inline and inline-block are the same, they both will wrap around float .. i simply used inline-block to be able to add height/width because with inline element we cannot set width/height but both are "inline level element"
– Temani Afif
Nov 25 '18 at 9:47
@Wicelo so if you set inline to the blue div, you will simply not see it if there is no content inside it
– Temani Afif
Nov 25 '18 at 9:48
you are right the inline display shrunk the div (i had in it) and I thought it was going under but it was just shrunk.
– Wicelo
Nov 25 '18 at 9:48
@Wicelo add some content on it and you will see jsfiddle.net/m2ydjqp8 ... the width/height is defined by content and the use of width/height will have no effect because this is how inline element work but notice how it wrap around unlike a block element and exactly like inline-block element
– Temani Afif
Nov 25 '18 at 9:50
add a comment |
Well when you set the blue element toinline(you set it toinline-block) it is hidden under the red floating div, that's my question basically, because text isinlinenotinline-block
– Wicelo
Nov 25 '18 at 9:45
@Wicelo inline and inline-block are the same, they both will wrap around float .. i simply used inline-block to be able to add height/width because with inline element we cannot set width/height but both are "inline level element"
– Temani Afif
Nov 25 '18 at 9:47
@Wicelo so if you set inline to the blue div, you will simply not see it if there is no content inside it
– Temani Afif
Nov 25 '18 at 9:48
you are right the inline display shrunk the div (i had in it) and I thought it was going under but it was just shrunk.
– Wicelo
Nov 25 '18 at 9:48
@Wicelo add some content on it and you will see jsfiddle.net/m2ydjqp8 ... the width/height is defined by content and the use of width/height will have no effect because this is how inline element work but notice how it wrap around unlike a block element and exactly like inline-block element
– Temani Afif
Nov 25 '18 at 9:50
Well when you set the blue element to
inline (you set it to inline-block) it is hidden under the red floating div, that's my question basically, because text is inline not inline-block– Wicelo
Nov 25 '18 at 9:45
Well when you set the blue element to
inline (you set it to inline-block) it is hidden under the red floating div, that's my question basically, because text is inline not inline-block– Wicelo
Nov 25 '18 at 9:45
@Wicelo inline and inline-block are the same, they both will wrap around float .. i simply used inline-block to be able to add height/width because with inline element we cannot set width/height but both are "inline level element"
– Temani Afif
Nov 25 '18 at 9:47
@Wicelo inline and inline-block are the same, they both will wrap around float .. i simply used inline-block to be able to add height/width because with inline element we cannot set width/height but both are "inline level element"
– Temani Afif
Nov 25 '18 at 9:47
@Wicelo so if you set inline to the blue div, you will simply not see it if there is no content inside it
– Temani Afif
Nov 25 '18 at 9:48
@Wicelo so if you set inline to the blue div, you will simply not see it if there is no content inside it
– Temani Afif
Nov 25 '18 at 9:48
you are right the inline display shrunk the div (i had in it) and I thought it was going under but it was just shrunk.
– Wicelo
Nov 25 '18 at 9:48
you are right the inline display shrunk the div (i had in it) and I thought it was going under but it was just shrunk.
– Wicelo
Nov 25 '18 at 9:48
@Wicelo add some content on it and you will see jsfiddle.net/m2ydjqp8 ... the width/height is defined by content and the use of width/height will have no effect because this is how inline element work but notice how it wrap around unlike a block element and exactly like inline-block element
– Temani Afif
Nov 25 '18 at 9:50
@Wicelo add some content on it and you will see jsfiddle.net/m2ydjqp8 ... the width/height is defined by content and the use of width/height will have no effect because this is how inline element work but notice how it wrap around unlike a block element and exactly like inline-block element
– Temani Afif
Nov 25 '18 at 9:50
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53457727%2fwhy-is-text-wrapping-around-a-floating-element-instead-of-going-belows-like-anot%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Other divs don't go below a floating div either. The determining factor is if whatever content is narrow enough to fit next to the floating div, otherwise it is forced down. It doesn't matter if it's text or an image or anything.
– Mr Lister
Nov 24 '18 at 11:49
@MrLister I don't agree, other divs will go below and by below we don't mean a new line but below it considering the z-axis because div (block element) will not wrap around float element jsfiddle.net/3e8ojmcw
– Temani Afif
Nov 24 '18 at 19:43
Good point. So @Wicelo, did you mean beneath as lower on the screen or behind as deeper in the stack?
– Mr Lister
Nov 24 '18 at 21:23