CSS - Layout

This tutorial will go through, widths, heights and floats and how they are used when creating a layout with HTML and CSS.

Understanding how to create simple and effective layouts in CSS will open the door to creating more complex, beautiful designs for your websites.

Width and Height

Widths and heights are two of the most important properties in css. We can use these to define fixed columns/boxes in a website.

Note: Remember that normally the maximum width of a website will be around 980px - which would fit comfortably in any older monitor size.

To do this we can define width and height in the following ways.

.customClass {
   width:100px;
   height: 200px;
}

image

All widths and heights are measured in pixels unless you define "auto" or "inherit". Auto will automatically fill the relevant space and inherit will adopt the styles of it's containing element.

Generally speaking, you should avoid using height restraints on divs (unless it is absolutely necessary) as it can restrict the flow of your content.

Floating elements

image

HTML elements will sit underneath each naturally, i.e.

This obviously presents a problem for us if we want to create a column structure. To do this we can use the float property, the options we have are, left, right and none.

Setting an element to float left will allow the content to wrap around to the right of it, whereas floating right will make the element hug the right hand side of it's container. If two objects are floating right, they will hug the right hand side with the first being the furthest right as in the example below.

Example


<div style="width:100px; height:200px; background-color:red; float:left;">
	<p>Width: 100px<br />
	Height: 200px</p>
	<p>float: left</p>
</div>

<div style="width:100px; height:200px; background-color:#0099FF; float:right;">
	<p>Width: 100px<br />
	Height: 200px

	</p>
	<p>float: right</p>
</div>

<div style="width:100px; height:200px; background-color:#6F6; float:right;">
	<p>Width: 100px<br />
	Height: 200px</p>
	<p>float: right </p>
</div>

<div style="width:auto; height:auto; background-color:#F9F; clear:both;">
	<p>Width: auto<br />
	Height: auto/p>
	<p>clear: both</p>
</div>

image