In this lesson we learn about how websites are commonly laid out and how we can use CSS to code it.
Websites can come in hundreds of different layouts and in this lesson we will take a look at some of the most common layouts and how to code them in CSS.
A website is normally broken into the following areas:
The header appears at the top of the web page and would normally contain:
Here is an example of HTML and CSS that creates a simple header for a website. Take a look at the HTML and CSS code and see how we have used CSS to style the
The layout of content on a website can vary from page to page. For example the layout for a page that has a list of products is going to be different from a page an "About Us" page that has text and images.
Usually though the content area will be broken into one of the following layouts:1 column layout
We can use CSS to set the width of the columns to lay them out the way we want. In the following example we have 2 columns laid out with widths of 31% and 65% (and a 2% padding all around).
float: left property to specify that the
<div></div> column elements float to the left, otherwise they would appear stacked on top of each other.
paddingproperties and see how it affects the columns. Note that if the total of the width and padding for both of the columns goes over 100%, then the right column will move down under the left column as they are greater than the 100% screen width.
The footer appears as the bottom of the web page and would normally contain some information about the company/website and some secondary links.
Here is an example of HTML and CSS that creates a simple footer for a website. Take a look at the HTML and CSS code and see how we have used CSS to style the