CSS - float:left on a div not taking out of flow

Question

I have 2 divs:

  div.main-info { background: yellow; width: 50%; float: left; } div.main-cta { background: red; width: 20px; } 

  <div id="wrapper"> <div class="main-info"> <h1>Lorem Ipsum?</h1> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="main-cta"> <div class="window-cta"> <p>Compare Now!</p> </div> </div> </div> 

but the div with class main-cta seems to be still at the 2nd line? Why is that? I thought that when you float a div, it will pop out of the doc's flow and the next element will occupy the first row where the floated element was and get hidden by it?

I'm kinda confused.

Thanks!

Answer 1

Try this

<style>
div.main-info {
    background: yellow;
    width: 50%;
    float: left;
}

div.main-cta {
    background: red none repeat scroll 0 0;
    float: left;
    width: auto;
}

</style>

Answer 2

I think it will help for you..

 div.main-info { background: yellow; width: 50%; float: left; } div.main-cta { background: red; background: red none repeat scroll 0 0; float:right; } 

  <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <div id="wrapper"> <div class="main-info"> <h1>Lorem Ipsum?</h1> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <div class="main-cta"> <div class="window-cta"> <p>Compare Now!</p> </div> </div> </div> </div> 

Answer 3

Just add float:left to div.main-cta .

div.main-info {
    background: yellow;
    width: 50%;
    float: left;
}
div.main-cta {
    background: red;
    width: 20px;
    float: left; /*new line*/
}

Demo fiddle: https://jsfiddle.net/nikhilvkd/f6stjstk/

Or you dont like to add float:left , you can use display:inline-block;

div.main-info {
    background: yellow;
    width: 50%;
    display: inline-block; /*new line*/
}
div.main-cta {
    background: red;
    width: 20px;
    display: inline-block; /*new line*/
    vertical-align: top; 
}

Demo fiddle: https://jsfiddle.net/nikhilvkd/f6stjstk/2/

Answer 4

In order to pop the div out of the flow, you need to make the position of the div absolute.

float asks the div to move toward the left , in the same row.