CSS Question: Aligning Text next to image with padding/margin

[IBNu2WP]

I am trying to indent either by padding or margin about 20px on the right of the WP Image the bulleted list of highlights.  I have placed the list in a div called ‘high’.  But as you see from the screenshot http://www.lakewylietax.com/wp-content/uploads/2015/12/Align-list.jpg   that I took from developer tools, it is going all the way to the content left margin.  Not sure how to fix this.  The images could adjust size, so I can’t just fix this one post.  The link to the post is: http://www.lakewylietax.com/are-you-at-risk-for-a-trust-fund-penalty/    

So, the completed Article Highlights would look like this when finished:  http://www.lakewylietax.com/wp-content/uploads/2015/12/Finished.jpg  

[scrambler]

First you have a syntax error on your class.

You have
<div class=”high;”>

there should be no semi colon and be
<div class=”high“>

Then you need to also float the div. change your rule to

.high {margin-left:20px;float:left;}

[IBNu2WP]

That fixed the bullet list, but now the following text that should flow underneath, now flows to the right of the bullet list (3rd column).  I would like the text to flow after the bullet list and wrap like normal text.

[scrambler]

Try inserting an html break before the following paragraph 

<div>…</div>

<br/>

<p>…</p>

[scrambler]

OK, so searching on the web for this well known problem,  I found a better way.

Remove the float on the “high” div.
Instead add the rules below

.high ul {list-style-position:inside;}
.high ul li {text-indent:1em;}

[IBNu2WP]

I had already tried the 1st solution (did not work), but the second solution worked.  Not sure how you were able to Google it, my attempt to search didn’t return anything.  Good job!  Thanks.

[Author]

Posts