Home Forums Weaver Xtreme Theme CSS Question: Aligning Text next to image with padding/margin

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #18410
    IBNu2WP
    Participant

    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  

    #25312
    scrambler
    Moderator

    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;}

    #25313
    IBNu2WP
    Participant

    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.

    #25314
    scrambler
    Moderator

    Try inserting an html break before the following paragraph 

    <div>…</div>

    <br/>

    <p>…</p>

    #25315
    scrambler
    Moderator

    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;}

    #25316
    IBNu2WP
    Participant

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.