Here is the HTML code I am working with:
<div class = "block1">hi</div>
<div class = "block2">hi</div>
In one scenario, this is the CSS being used:
.block1 {
width:100px;
border:1px solid;
float: left;
}
.block2 {
width:100px;
border:1px solid;
}
This results in this output:
Now, in another case, I have the following CSS:
.block1 {
width:100px;
border:1px solid;
float: left;
}
.block2 {
border:1px solid;
}
Which results in this display:
I am curious as to why setting a width causes the second div not to be positioned next to the first div. How can I make the second div sit alongside the first while still maintaining a 100px width? Setting float:left achieves this, but I would like to understand why it is necessary.