boxes

Each box has a content area and optional surrounding padding, border, and margin areas. The size of each area is specified by properties. The margin, border, and padding can be broken down into top, right, bottom, and left segments. The perimeter of each boxes is called an "edge", so each box has four edges.

The content overflows without disturbing the flow. Note that a long string (i.e., a URL) or a large image would stick outside the box as well.

IE 6 does not 'support' width nor height so, in IE6, boxes expand to accomodate the dimensions of their content. Note that this behavior often leads to a 'drop float' (a float that drops below another).

Style the yellow box with line-height:0.

Style the yellow box with line-height:0;height:auto.

Try These

Watch This

aqua
yellow: Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.
pink

Check This

<div id="aqua">aqua</div> <div id="yellow">yellow: Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.</div> <div id="pink">pink</div>

Edit This

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