Search code examples
imagetextword-wrap

How to stop text wraping under image


I want to have an article title next to the image, and a dotted line below both image and the title to separate articles. I could stop text wrapping under image but it looks like the dotted line overlaps the image instead of being below the image. Overmore, the left margin of the text in paragraph doesn't work. Would you show me how to fix these?

Here is how it looks https://www.flickr.com/photos/107222458@N06/15554650894/ Here is my code

.asideBlock {
    width: 456px;
    margin-bottom: 30px;
}

.asideTitle {
    font-family: MarkProBold;
    font-size: 24px;
}

.suggestedStory {
   width: 456px; 
   border-bottom-style: dotted;
   border-bottom-width: 1px;
   border-bottom-color: #b0b0b0;
   margin-top: 20px;
   padding-bottom: 20px;  
}

.suggestedStory img {
    width: 70px;
    height: 70px;    
    float: left;
}


.suggestedStory p {   
    font-family: MarkProRegular;
    font-size: 16px;
    margin-left: 20px; 
    margin-right: 20px;
    color: #b0b0b0;
    overflow: hidden;
}
<div class="asideBlock">
                    <div class="asideTitle">Most Popular</div>
                    <div class="suggestedStory">
                        <img src="../Images/CoverImages/1.jpg">                        
                        <p>Gun Control Groups, Blocked in Washington, Turn Attention to States<p>
                    </div>
                </div>


Solution

  • You can use tables to create this effect as shown here: http://jsfiddle.net/swm53ran/17/

    <table style="width:456px;">
        <tr class="border_bottom">
            <td>
                <img src="http://img3.wikia.nocookie.net/__cb20100113122141/dragonage/images/8/80/Concept-HighDragon.jpg"/> 
            </td>
            <td style="vertical-align:top;">
                Gun Control Groups, Blocked in Washington, Turn Attention to States
            </td>
        </tr>
    </table>
    
    img {
        width: 70px;
        height: 70px;
    }
    tr.border_bottom td{
       border-bottom:1pt dotted #b0b0b0;
    }
    td {
        padding: 10px;
        font-family: MarkProRegular;
        font-size: 16px;
    }
    

    hope this helps!