CODEWITHSUNDEEP
csshtmlcss-float
Marcx
Marcx

Reputation: 6826

Maintain text on right side of image after clear both using CSS

Using HTML and CSS I'm trying to display a news feed where there are an image, a title a date and the text itself.

In the below image, the first group is the actual result, the second one is the result I'm trying to achieve.

div with title date and text

And here's the code:

HTML

<div class="news_block">
   <div>
    <img src="images/facebook.png">  
    <p class="title_news_tit"><strong>Title</strong></p>
    <p class="title_news_date"><strong>21-21-2013</strong></p>    
      <p class="title_news_testo">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             Morbi tempus porttitor elit. Nulla pretium sapien vel neque iaculis,
             eu tempus dui dapibus. Ut rhoncus vestibulum dignissim.
             Morbi convallis ligula ultrices, imperdiet est ac, iaculis ligula.
             Pellentesque elementum, enim quis cursus varius, lectus nulla gravida nisl,
             vel rutrum nisl leo tempor metus. Sed at feugiat eros. Vivamus tincidunt mauris
             ultricies justo feugiat, in ultricies sem venenatis. Etiam sodales leo in iaculis facilisis.</p>
   </div>
   <div class="clear"></div>   
</div>

CSS

.news_block {
        margin: 20px;
        padding: 10px;
    min-height: 200px;
        background: #F5F5F5;
}

.news_block img {
        float: left;
        padding: 20px;
}

.title_news_testo
{ 
  float: left;
}

.title_news_tit
{
  float: left;
}
.title_news_date
{
  float: right;
}

.clear
{
  clear: both;
}

EDIT

I made a mistake on the image I uploaded.. in the expected result I want the title aligned to the left and the date to the right.

Upvotes: 0

Views: 477

Answers (2)

NoobEditor
NoobEditor

Reputation: 15881

To much of markup has been used by you, cleaned it up and works well in this way : DEMO

General tip : apply the vertical align to the image to align it always

CSS

 .news_block {
    margin: 20px;
    padding: 10px;
    min-height: 200px;
    background: #F5F5F5;
}
.news_block img {
    float: left;
    padding-right:15px;
}
.title_news_date {
    float:right;
}

HTML

 <div class="news_block">
    <img src="http://678ielts.com/wp-content/uploads/2012/11/facebooklogo-200x200.gif" style="width:100px;height:100px;vertical-align:middle">
    <div class="text">
        <p> <span class="title_news_tit"><strong>Title</strong></span>
 <span class="title_news_date"><strong>21-21-2013</strong></span>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus porttitor elit. Nulla pretium sapien vel neque iaculis, eu tempus dui dapibus. Ut rhoncus vestibulum dignissim. Morbi convallis ligula ultrices, imperdiet est ac, iaculis ligula. Pellentesque elementum, enim quis cursus varius, lectus nulla gravida nisl, vel rutrum nisl leo tempor metus. Sed at feugiat eros. Vivamus tincidunt mauris ultricies justo feugiat, in ultricies sem venenatis. Etiam sodales leo in iaculis facilisis.</p>
    </div>
</div>

Upvotes: 2

Adam
Adam

Reputation: 832

Here is how you can do this on fiddle: http://jsfiddle.net/dZ2kX/2/

There was no need to float everything left

 .news_block {
    margin: 20px;
    padding: 10px;
    min-height: 200px;
    background: #F5F5F5;
}
.news_block img {
    padding: 20px;
    background:blue;
    width:90px;
    height:90px;
    float:left;
    margin:0 20px 10px 0;
}

Upvotes: 0

Related Questions