Exercise 5: CSS layout

In groups of 4, research how to and then create create a Liquid three column layout

Post on your individual blogs a link to a presentation (multimedia based, such as powerpoint) that demonstrates the steps necessary to create a common layout for a website using CSS.

Create a liquid layout with three columns using the following layout:

css layout

Your layout has to

– Load the same background image in three different pages.

– Position a background image in the right hand column away from the text

– Align the text in the Header to the left

– Align the text in the right hand column to the right

– Remove the line under all links, change their color to a color of your choice.

– Specify the width of the right and left column to be 300 px

– Make sure you use padding and margin to create the same text flow as in the example.


As a group create the layout and develop a presentation that explains how you did it.

Post your answer as a comment to this post.

Adapt the layout created by the group and start using for your own website.

  1. miannacci43 says:

    Daniel Ku, Iphiah Henry, Matt Iannacci: liquid layout presentation:


  2. robmidpit7 says:

    here is our liquid layout presentation for Nick Tiringer, JD Shippel, and Robin Nicholls

  3. ashleywilden says:

    here is our presentation! (link to final layout at end of presentation)

    -Ashley Wilden, Michael Nguyen, and Mark Valmores


  4. danelon says:

    Here is the adaptation for my bio page on my website:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s