block-level elements

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). They begin on new lines. Several values of the 'display' property make an element block-level.

The 'width' defaults to '0' (see this topic's home page). The content box is pushed outside of its containg block.

The browser creates a scroll bar.

In IE 6, the width of the box does not default to '0'. This is because IE 6 does not support 'width' and allows the box to grow according to its content. In turn, the containing block expands to accomodate that 'extra' width. The background color shows because the box has a implicit width.

IE 7 almost gets this right. The content is properly shifted outside of the containing block, but for some strange reason the aqua background shows.

Style the aqua box with:

	float: left;

Try These

Watch This

aqua
yellow
pink

Check This

<div id="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).