Question

I have this HTML:

<div class = "block1">hi</div>
<div class = "block2">hi</div>

And in one case I have this CSS:

.block1 {
    width:100px;
    border:1px solid;
    float: left;
}

.block2 {
    width:100px;
    border:1px solid;
}

Which makes this:

Jsfiddle

And the second case, I have this CSS:

.block1 {
    width:100px;
    border:1px solid;
    float: left;
}

.block2 {
    border:1px solid;
}

Which makes this:

Jsfiddle

Why setting a width makes the second div not being side by side with the first div? What if I want the second div to be side by side and have 100px? If I set float:left; it does that, but why?

Answer 1

Because if you specify a width to your second div you need to use float: left; for it, because div is a block level element, if you don’t specify a width, it will take up the rest of space available, if you define a width, it will float besides the other floated div if the space is available, inorder to float it right, you need to use float: right

Demo

Edit: Better understanding…

If you do not define width

------------------------------------------
               total space                     Legend (/ - empty space)

------------- Example 1 ----------------
div1(floated left) ///////////////////////
                   ^---------------------^
                     This space will be taken 
                by the div which is without width
------------- Example 2 ----------------
div1(floated left)
div2(same size as 1 wont float unless you give float: left;)

 ------------- Example 3 ----------------
 div1(floated left) div2(besides div 1 if widths are different without giving float left)
------------------------------------------

As you said if you specify width it should float to left, it ont as you are giving same width to the div2 what you gave to div1 Reference, so if you change say 150px for second div it will work… Demo

But if you clear your floats before floating the second div it wont make the div float besides the other 1, See this example