CODEWITHSUNDEEP
htmlcss
Sarun Sermsuwan
Sarun Sermsuwan

Reputation: 3818

float behaviour of two adjacent blocks

I'm a CSS newbie. Please help confirm if my understanding is correct. I have two block element: the first is floating, and the second is not. with all settings as below, is it correct that my resulting layout will display two blocks adjacent to each other in one line? My understanding is since the first block is floated to the left, but the second is not, so the latter's supposed to remain in the same line it's originally positioned and wrap around.

#box1{
    float:left;
    width: 200px;
    background-color: purple;
}

#box2{
    width:250px;
    background-color: orange;
}

<div id="box1">box 1</div>
<div id="box2">box 2</div>

Upvotes: 0

Views: 249

Answers (2)

SpaceBeers
SpaceBeers

Reputation: 13947

You're sort of right. You cans see the behavior a bit clearer here - http://jsfiddle.net/spacebeers/KvrHw/2/

If you add more content to box two it will align back to the left and under the floating box.

Upvotes: 1

Joey
Joey

Reputation: 354466

As long as the container around both boxes is large enough, yes, box 1 will be at the left edge of the container and 200 pixels further right is box 2 (itself shortened to 50 pixels. See here.

And if box 2 gets larger (due to more content) it will look like this:

+-------+----------+
| box 1 |  box 2   |
+-------+          |
|                  |
+-------+----------+

Upvotes: 1

Related Questions