CODEWITHSUNDEEP
csscss-float
Brandon Dorsey
Brandon Dorsey

Reputation: 153

floats confusion

Why is the orange box in this fiddle, not floating to the left with the rest of my boxes? I was for sure that the orange box was suppose to be taken out of the flow and float next to the blue box. What am I missing?

  <div class=" wrap clear">
        <div class="block pink float"></div>
        <div class="block blue float"></div>
        <div class="block green"></div>
        <div class="block orange float"></div>
    </div>

Upvotes: 1

Views: 52

Answers (4)

Brandon Dorsey
Brandon Dorsey

Reputation: 153

All block level elements sit on their own line and do not allow any other elements to sit to the left or right of them. Although an element is floated and is considered block level, it has been removed from the normal page flow, no longer sitting on it's own line. A quick solution to sit a block level element next to a floated element is to add the following css rule the desired element:

.Whatever {
    display: inline-block;
}

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

Now replace to your html code as like this Live Demo --------- Full Demo

 <div class=" wrap clear">
            <div class="block pink float"></div>
            <div class="block blue float"></div>

            <div class="block orange float"></div>

     <div class="block green"></div>
        </div>

Demo

Upvotes: 0

Talha Akbar
Talha Akbar

Reputation: 10030

Working Fiddle

div by default block other elements to be side by side but this behaviour can be changed by using CSS. If you want your orange box with blue one then you can change your arrangement. So, green div will not be able to push that orange one. Any div which will be placed after green one will be on next line.

Upvotes: 1

Rob
Rob

Reputation: 12872

It's because you aren't floating the green box. So the green box is displaying block level and pushing down the orange box.

Upvotes: 0

Related Questions