Cannot float second div to right side of first div?

Question

My code is very basic

HTML:

<div class="blog cf">
    <div class="left_article_content">
        <img width="100" height="100" src="http://placehold.it/100x100" alt="test">
    </div>
    <div class="right_article_content">
        <h1>Test Header</h1>
        <p>
            This is a test This is a test This is a test This is a test This is a test This is a test This is a test 
        </p>
    </div>
</div>

CSS:

.cf:after {
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
}

.blog .left_article_content {
    float: left;
}

.blog .right_article_content {
    float: left;
}

jsFiddle Link

As you can see, my second div right_article_content is not float to the right side of left_article_content . What's the reason and how to fix it?

Answer 1

Your second div is trying to take up the full width, which is pushing it below the first div. Set the width of the second div accordingly:

.blog .right_article_content {
    float: right;
    width: 75%;
}

http://jsfiddle.net/93y7ekcz/5/

Alternatively, you could place all the content in one floated div:

<div class="blog cf">
  <div class="left_article_content">
    <img width="100" height="100" src="http://placehold.it/100x100" alt="test"/>
  </div>
  <h1>Test Header</h1>
  <p>
     This is a test This is a test This is a test This is a test This is a test This is a test This is a test 
  </p>
</div>

http://jsfiddle.net/93y7ekcz/8/

Answer 2

Dude it's working fine on my side. Maybe your problem is the size of the browser that makes the element in the right side to move down. IT's working fine for me: BTW if you put width it will work at any browser sizes.

    .blog .left_article_content {
    float: left;
}

.blog .right_article_content {
    float: left;
}

http://jsfiddle.net/93y7ekcz/3/

here is the full-width: http://jsfiddle.net/93y7ekcz/3/embedded/result/

Answer 3

First you have to set width of your DIVs beacuse these are talking 100% width of their parent Div that's why do not have required space in right side of first DIV.

.cf{
    width: xxxPX; 
    OR like
    min-width: xxxPX;
    overflow: auto;
}

.blog .left_article_content {
    width: xxxPX;
    float: left;
}

.blog .right_article_content {
    width: xxxPX;
    float: left;
}

I hope this will solve your problem. See this for auto adjust height & width of parent DIVs How to auto adjust DIVs hieght & width

Answer 4

like others have mentioned if you do not define the height of the div it will inherit the width of its parent div. you should define the width of both the divs accordingly.

Answer 5

try this

.cf:after {
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
}

.blog .left_article_content {
    float: left;
}

.blog .right_article_content {

}

code this http://jsfiddle.net/7upew2aL/