Why is text wrapping around a floating element instead of going belows like another div?
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>
Why is my text still wrapping under a floated div?
That's how float
is supposed to work - text "floats" around it.
Instead of using float, you could either define both containers as inline-block
, with according width
settings, or you could put display: flex
on the container element.
If you know the width of the image, you can use that for a fixed width on the image container and use calc
for the width of the text container, like width: calc( 100% - XXpx );
, where XX stands for the width of the image.
Why CSS float makes paragraph behave that way
That's pretty much the definition of what a float does.
Formally, the p element establishes an Inline Formatting Context. Its content box contains a stack of line boxes. Each line box is shortened so that it doesn't overlap with the margin box of the floated element. The text is placed in inline boxes inside the line boxes.
Text wraps around floating div but borders and hr / s do not
I know this problem was posted some time ago, but I had the same problem today and found another solution:
http://jsfiddle.net/MvX62/
I use border-bottom
instead of the <hr />
tag and had to add an overflow: hidden;
. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.
Also you don't need to define z values and don't need any hacks or workarounds.
Floating elements within a div, floats outside of div. Why?
The easiest is to put overflow:hidden
on the parent div and don't specify a height:
#parent { overflow: hidden }
Another way is to also float the parent div:
#parent { float: left; width: 100% }
Another way uses a clear element:
<div class="parent">
<img class="floated_child" src="..." />
<span class="clear"></span>
</div>
CSS
span.clear { clear: left; display: block; }
CSS to stop text wrapping under image
Since this question is gaining lots of views and this was the accepted answer, I felt the need to add the following disclaimer:
This answer was specific to the OP's question (Which had the width set in the examples). While it works, it requires you to have a width on each of the elements, the image and the paragraph. Unless that is your requirement, I recommend using Joe Conlin's solution which is posted as another answer on this question.
The span
element is an inline element, you can't change its width in CSS.
You can add the following CSS to your span so you will be able to change its width.
display: block;
Another way, which usually makes more sense, is to use a <p>
element as a parent for your <span>
.
<li id="CN2787">
<img class="fav_star" src="images/fav.png">
<p>
<span>Text, text and more text</span>
</p>
</li>
Since <p>
is a block
element, you can set its width using CSS, without having to change anything.
But in both cases, since you have a block element now, you will need to float the image so that your text doesn't all go below your image.
li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}
P.S. Instead of float:left
on the image, you can also put float:right
on li p
but in that case, you will also need text-align:left
to realign the text correctly.
P.S.S. If you went ahead with the first solution of not adding a <p>
element, your CSS should look like so:
li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}
Related Topics
Extend Bootstrap Row Outside the Container
Grid Areas Not Laying Out Properly in CSS Grid
Position an Element Relative to Its Container
Parsing HTML into Nsattributedtext - How to Set Font
How to Force a Long String Without Any Blank to Be Wrapped
Fixed Header, Footer With Scrollable Content
Unwanted Margin in Inline-Block List Items
Example of Multipart/Form-Data
How to Support Placeholder Attribute in Ie8 and 9
Maintain Image Aspect Ratio When Changing Height
Using CSS :Before and :After Pseudo-Elements With Inline Css
How to Make a Link from a <Td> Table Cell
How to Make Div Occupy Remaining Height
How to Generate an HTML Report for Junit Results
Format HTML Table Cell So That Excel Formats as Text
:Not(:Empty) CSS Selector Is Not Working
What Does -Webkit-Transform: Translate3D(0,0,0); Exactly Do? Apply to Body