Introduction - width and height properties

You may not have thought about it by now, but all elements on a webpage have dimensions. Sure, you don't have to specify them, thanks to the fluid layout model used by default - elements take up the space they need, and if there's not enough room for them, they are automatically pushed into a direction with more available space. This all happens thanks to the fact that the width and height properties of an element is set to "auto" by default, meaning that the element will automatically expand or subtract depending on the content within it.

You should be aware of the difference between inline and block elements, when it comes to dimensions, because they will behave differently: By default, an inline element will only consume the vertical and horizontal space needed to fit the content. A block element, on the other hand, will use all of the available horizontal space but only the vertical space needed to fit the content. Therefore, only block level elements can have custom widths and heights specified, as illustrated in this example:

<style type="text/css">
.box-look {
	background-color: Silver;
	margin: 20px;
	padding: 10px;
}

#box1 {
	width: auto;
	height: auto;
}

#box2 {
	width: 100px;
	height: 100px;
}
</style>

<div id="box1" class="box-look">
	Box 1<br>
	Some content....
</div>

<div id="box2" class="box-look">
	Box 2<br>
	Long text is automatically wrapped...
</div>

<span class="box-look">
	Inline content. Only uses the space it needs...
</span>

If you try out this example, you can see how the first box uses all available horizontal space, while the second box only use the 100 pixels we assign it in both directions. Div elements are by default block level elements. Please be aware that I have only specified width and height for box1 as auto to illustrate the difference - these are already the default values, so they may be omitted.

The last element is a span tag, which is by default an inline element and as you can see, it only uses the space actually required. You could try assigning a width and a height to it, but the browser would ignore it - only block level elements can have custom widths/heights.

Relative and absolute width/height

We already saw how we could define widths and heights as an absolute value, in pixels, but that is just one of many options. The width and height properties can take either a [length] or a [percentage] value, meaning that you can use both absolute values (as we did with pixels) or relative values, either as a percentage of the available space or relative e.g. to a font size (like the em unit - more on that later on).

In the next example, I'll show you how we can use percentage values to take up a relative share of the available space:

<style type="text/css">
#parent-box {
	width: 300px;
	height: 300px;
}

#box1 {
	width: 25%;
	height: 75%;
}

#box2 {
	width: 75%;
	height: 25%;
}
</style>

<div id="parent-box" style="background-color: CornflowerBlue;">

	<div id="box1" style="background-color: GreenYellow;">
		Box 1<br>
		Some content....
	</div>

	<div id="box2" style="background-color: Salmon;">
		Box 2<br>
		Long text is automatically wrapped, if needed...
	</div>

</div>

In this example, we have a box with an absolute size acting as a parent box, and inside of it, we have two smaller boxes, which uses a relative amount of the available parent space, just to show you how easy it is to do.

Summary

In this chapter, we talked about how block level elements on a webpage will automatically adjust their sizes and how we can force them to be of a specific size by using the width and height properties. But what happens if we specify a width and a height which doesn't leave enough room for the content? We'll look into that in the next chapter.