0
votes

i created two divs first a red background div and then a blue background div both having a width height 100px. Blue div appears below red div. However if i apply a float left or display inline.Blue div appears next to red div. I want to understand how elements are placed on a html page what does applying float or display inline makes a difference to it.

2

2 Answers

1
votes

Divs are "block" elements which means they have a line break before and after them, making new element appear below them.

If you set display to "inline" then they become inline elements removing the line breaks so new elements appear next to them.

Floating left makes an element "float" on to the left of the page (or containing element), content then flows around the right side of the element from the top of the element (it was designed to replace the "align" attributes for images).

1
votes

See The Visual Formatting Model in the CSS specification.