Trying to align my and elements at left of my image

Question

Im trying to align my title, image and paragraph to the left of my news image.

And Im using float left for doing this but its not working,

Im having this:

But Im trying this:

Do you see where might be the problem?

My fiddle with the problem Im having:

http://jsfiddle.net/upH4U/1/

My html:

<div id="news-content">
    <h1>News</h1>
    <article id="loop-news">
        <div class="img_container">
            <img src="../image1.jpg" title=""/> 
        </div>
        <h2><a href="#" >Title of the news</a><br /></h2>
        <span id="date">Tuesday, May, 2014</span>
        <p>
            This is my paragraph and I want to align it to left of my image.
            <a href="#">see more</a>
        </p>  
    </article>

    <article id="loop-news">
        <div class="img_container">
            <img src="../image1.jpg" title=""/> 
        </div>
        <h2><a href="#" >Title of the news</a><br /></h2>
        <span id="date">Tuesday, May, 2014</span>
        <p>
            This is my paragraph and I want to align it to left of my image.
            <a href="#">see more</a>
        </p>  
    </article>
</div>

My css:

#news-content
{
    float:left;
    width:480px;
    background:#f3f3f3;
}

#news-content h1
{
    font-size:20px;
    font-weight:100;
    margin-bottom:10px;
    color:gray;
    text-align:left;
}

#loop-news
{
    width:400px;
    margin-bottom:10px; 
    text-align:center;
}

.img_container
{
    width:160px;
    height: 165px;
    float:left;
    cursor: pointer;
    border:3px solid #ccc; 
}

#loop-news h2 a
{
    font-size:20px;  
    color:#3B5998; 
    text-decoration:none;
    margin:0 auto 0 5px;
    font-weight:100;
    float:left;
}

#loop-news a
{
    font-size:14px; 
    text-decoration:none;
    margin-left:2px;
}

#loop-news #date
{
    font-size:13px; 
    font-weight:normal;
    color:#7a7a7a;  
}

#loop-news p
{
    font-size: 13px;  
    text-align:justify; 
    line-height:25px;
    word-spacing:-2px;
    width:300px;
    float:left;
    margin-left:5px;
}

Answer 1

quick answer, use clearfix - there are a few options there

CSS

#loop-news
{
    width:400px;
    /*margin-bottom:10px; moving margin to seperator*/
    /*text-align:center;*/
}

#loop-news p
{
    font-size: 13px;  
    /*text-align:justify; 
    line-height:25px;
    word-spacing:-2px;
    width:300px;
    float:left;*/
    margin-left:5px;
}

#loop-news {
    overflow:hidden; /*quick clear fix*/
}

.loop-news-content {
    overflow:hidden;
}

#loop-news *:first-child { margin-top:0; }
#loop-news *:last-child { margin-bottom:0; }

#loop-news h2 { margin:0; }
.loop-news-meta { margin-top:0; }

Heres the updated fiddle http://jsfiddle.net/Varinder/HTNk8/2/

Answer 2

Here's a page to show how to align text relative to an image:http://www.w3schools.com/tags/att_img_align.asp

Answer 3

You need to clear your float by adding clear:left; to the same class that uses float: left. In your case, you can use the CSS declaration:

#news-content article { clear: left; }

Also, having multiple elements with the same ID can have unexpected results. You should consider using classes instead.

Answer 4

your width is overflow; dont use it or fix it

    #loop-news p
{
    font-size: 13px;  
    text-align:justify; 
    line-height:25px;
    word-spacing:-2px;
    float:left;
    margin-left:5px;
}

Answer 5

float the image to the right like this fiddle

float:right;