Wrap text around bottom left div?
Just add float: left;position: relative;
to your element and add a spacer element like seen in the code below.
.bg {
width: 310px;
height: 200px;
background-color: #FCF2FF;
position: relative;
font-family: tahoma, arial;
font-size: 11px;
color: #772D99;
}
.title {
position: absolute;
left: 10px;
top: 5px;
text-align: left;
font-weight: bold;
font-size: 23px;
font-variant: small-caps;
}
.desc {
position: relative;
top: 35px;
left: 0px;
width: 115px;
height: 165px;
border: 1px dotted #B07ACC;
background-color: #FCF2FF;
padding: 3px;
box-sizing: border-box;
}
.pkmn {
margin-left: -3px;
margin-right: 3px;
padding: 3px;
width: 32px;
height: 32px;
border: 1px dotted #B07ACC;
border-radius: 100%;
background-color: #FCF2FF;
}
<div class="bg">
<div class="title">Title Here</div>
<div class="desc">
<!-- I used CSS, but inline will serve well here -->
<div style="float: left; width: 0px; height: 120px"></div>
<div style="float: left; clear: left">
<img src="https://pfq-static.com/img/pkmn/q/4/r/8.png/t=1482399842" class="pkmn"/>
</div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</div>
How can I wrap text around a bottom-right div?
It sure seems to have been asked before (2003), and before (2002), or before (2005)
The last link actually suggest a javascript-based solution, but for a fixed (i.e. non fluid) solution.
It is consistent however, with other advices found
The only way to do that is to put the floated element somewhere in the middle of the text. It's impossible to get it perfect all of the time.
Or this one:
It consists of floating a vertical "pusher" element (such as img, but it's probably smarter to just use an empty div), then floating the desired object under it, using the clear property. The major problem with this method is you still have to know how many lines there are of text. It makes things MUCH easier though, and could definitely be coded with javascript, just need to change the height of the "pusher" to the height of the container minus the height of the float (assuming your container isn't fixed/min height).
Anyway, as discussed in this thread, there is no easy solution...
Cletus mentions in the comments this thread from 2003, which states once again the fact it can not easily be achieved.
However, it does refer to this Eric Meyer's article, which comes close to the effect you want to achieve.
By understanding how floats and the normal flow relate to each other, and understanding how clearing can be used to manipulate the normal flow around floats, authors can employ floats as a very powerful layout tool.
Because floats were not originally intended to be used for layout, some hacks may be necessary to make them behave as intended. This can involve floating elements that contain floats, "clearing" elements, or a combination of both.
Yet, Chadwick Meyer suggests in his answer a solution based on the :before
CSS selector (variation of Leonard's answer).
It does work here.
Update Apr. 2021: Temani Afif suggests in his answer using Flexbox combined with a shape-outside.
But do check out the Backwards Compatibility of Flexbox, even though its support by all browsers is quite good.
How to make text wrap above and below a div?
Here's a solution that gives the rendering I want based on moontear's answer and http://www.csstextwrap.com/.
CSS:
div {
float: left;
clear: left;
}
#inset {
width: 100px;
height: 100px;
background: gray;
margin: 10px 10px 10px 0px;
}
#spacer {
width: 0px;
height: 40px;
}
HTML:
<div id="container">
<div id="spacer"></div>
<div id="inset">Inset</div>
This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around.
</div>
See it at http://jsfiddle.net/cope360/KbFGv/1/
jquery/css wrap text bottom up
I ended up taking the route, of reversing, checking where the line breaks were, and then inserting them accordingly. Please feel free to use my function. This function accepts a jQuery element (with text that already wraps), and re-wraps it's text upward.
function wrapUp(element){
width = element.width();
string = element.text().split(' ');
element.text('');
reversed = string.reverse();
var height = 0;
for (var i=0;i<reversed.length;i++){
reversed[i] += ' ';
element.text(element.text()+reversed[i]);
if (height != element.height()){
reversed.splice(i,0,"<br/>");
i++;
}
height = element.height();
console.log(element.height());
}
element.html(reversed.reverse().join(''));
}
How can I apply margin depending on text wrapping?
I handle my flex wrapping by only using right margins.
.block {
height: auto;
background: grey;
overflow: hidden;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
}
.block > div {
margin-right: 10px;
}
.block .number {
background: blue;
color: white;
}
<div class="block" style="width: 100px;">
<div class="text">TEXT</div>
<div class="number">123</div>
</div>
<div class="block" style="width: 50px;">
<div class="text">TEXT</div>
<div class="number">123</div>
</div>
Related Topics
Attribute Selector Where Value Equals Either a or B
Prevent Children from Inheriting Rotate Transformation in CSS
Vertically Center Elements in CSS
Limit the Width of a Column to the Width of a Particular Grid Item
How to Remove the Blue Highlight of Button on Mobile
How to Apply Global Styles with CSS Modules in a React App
How to Create "Collapsed" Borders Around Flex Items and Their Container
Center Navbar in Twitter Bootstrap 2.0
Make a Grid Column Span the Entire Row
Svg: Why Does External CSS Override Inline Style for Text
Affecting Parent Element of :Focus'D Element (Pure CSS+HTML Preferred)
How to Style a Div to Be Trapezoidal
Alternate Color Dot Over the Letter I
Why Is This Non-Float Margin Collapsing with a Float