CSS Wrap Text on Images [duplicate] - html

Question

This question already has answers here:
How can I wrap text around a non rectangular image?
(5 answers)
Closed 3 years ago.
I am trying to get an image of mine to float in the center of a div. Code currently:
<style type="text/css">
#navig {
height: 333px;
}
#navig img {
display: block;
margin: 0px auto;
}
</style>
<div id="navig"><img src="images/logo.png" height="333" id="logo" /></div>
The trouble is the image is a diamond and I would like the text to wrap around the diamond with the indents. I believe this is a possibility with <img align='center' /> but this was deprecated in HTML 4.01 and not even supported in HTML 5.
I have tried several possibilities and I still cannot get the text to wrap correctly around the diamond.

Answer 1

Refer to this for some options. I have two options, CSS-Shapes and SVG.
The best option current is to use an SVG image but make sure to use the SVG code and not linking it as an image.
Here is a JSFIDDLE, as you can see the text is able to highlight and can be edited. (More of a pain to edit so do your best with the text in AI before saving but it can still be edited)
This is also very flexible as you can see in this FIDDLE.
This is a very new feature and does not have good browser support yet.
SO CSS-Shapes
Once this,
shape-outside: polygon(50px 0px, 100px 100px, 0px 100px);
is supported you will be able to do this with ease.
I recommend learning the basics so once it is supported by most current browsers you will already know what to do.

Answer 2

I managed to figure out a manual way around this. The image remains in the div and is surrounded by two other closed divs tags.
<div id="navig">
<div id="nav1"></div>
<div id="nav2"><img src="images/logo.png" height="333" id="logo" /></div>
<div id="nav3"></div>
</div>
I then make sure all three of these float left: #navig div {float:left;} and the two empty divs are using text-align. The first one will align right and the last one align left.
The two empty divs are then filled with <ul>s and the menu I wanted around it is filled into the <li> tags. For the examples I'll use some basic menu items.
<div id="navig">
<div id="nav1">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="nav2">
<img src="images/logo.png" height="333" />
</div>
<div id="nav3">
<ul>
<li>Products</li>
<li>Shipping</li>
<li>Legal</li>
</ul>
</div>
</div>
I then added #nav1 ul li:nth-child(1) and positioned the first element, which would be "Home" against the diamond. I can change "Home" to whatever I fancy and the position remains as it is forced to text-align: right. Adding these with however many <li> items you are using and editing them to suit your needs. For example:
#nav1 ul li:nth-child(1) {
position: relative;
left: 48px;
}
#nav1 ul li:nth-child(2) {
position: relative;
left: 24px;
}
#nav1 ul li:nth-child(3) {
position: relative;
left: 8px;
}
This pushed my first, second and third items over to the diamond but with a little padding so as to not intrude.
A bit of a lengthy process, but plenty of freedom and has given me the desired effect!

Answer 3

You can't do it with just an image.
But you can use shapes, check this page:
https://www.makeuseof.com/tag/csstextwrap/
Using CSSTextWrapper you can easily generate HTML text wraps for any
imaginable shape. It can be circles, zig-zags, triangles or whatever
you want. Quick and simple-to-use, just load the logo (optional) on
the provided dashboard and drag sidelines to define your text wrap.
Quite impressive.