CSS Layouts

Posted: August 3, 2011 in Uncategorized

We recently touched on the introduction to CSS where we discussed the basics of what cascading style sheets are and the concepts used. Today we advance to another section on CSS where we discuss the types of layouts normally used in everyday life by designers.

CSS has four types of layouts commonly known by designers which are :


Liquid layouts unlike fixed layout expand to fill the browser as you re-size it. Columns will typically have widths declared in percentages.


  • Adapts to suit the viewing space


  • As the browser screen resolution increases it becomes harder to manage sentences that fit the horizontal page on large screen resolution computers


Things start getting interesting when it comes to the elastic as the names suggests because here you can define minimum and maximum width  using pixels, ems or percentage


  • The advantage about this one is how the layout can scale when text is resized

Variable fixed width

This layout is great because it adjusts automatically to best accommodate the users window size

Fixed width

This layout always has its total width including the width of its columns defined using static width measurements, normally pixels. A fixed width layout remains its set width regardless of whatever you do to it and does not stretch to fill the browser window.


  • With a fixed windows you are sure and certain that your design will not be compromised should the browser be re-sized especially if you have carefully measured internal elements like banners,carefully positioned text or images.


  • What ever width you set for your design will be served to everyone meaning if you set a 780-pixel it will probably look good on a 800*600screen resolution however if the resolution is 1280*1024 then the problems start kicking in and you design quality is compromised
On other news CSS3 (will be discussed further on this blog) is now on the shelves (on the net to be exact) so manipulating these layouts has become a whole new experience for designers.
The great thing about CSS is the fact that you rely less on the html and it gives you full control over your payout properties and positioning of text and images on your page.
With that in mind choose carefully what layout method you implement for you site and Happy cascading to all !!

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