If you are a constant visitor to Code It Red, you may have noticed a little change in the layout. Instead of a fixed and centered body for the blog, I will now be focusing upon delivering information in a fluid layout. For those of us who may not know what I am talking about, a fluid design is a design that uses percentages (%) to set widths for the layout rather than fixed pixel widths. Both have there advantages and drawbacks:

Advantages and Disadvantages of fluid layouts:

1. Allows your content to be spread across the whole page
2. Can be used to manipulate the looks of the sites
3. Very kind towards the high-resolution freaks
4. Can be a little tricky to setup
5. Percentage widths change accordingly to any resolution

Advantages and Disadvangtes of fixed layouts:

1. Very easy to setup
2. You know what something will look like across all resolutions
3. Can get really annoying for people running higher resolutions

Now that we know the difference between fluid and fixed layouts, here is a little tip:

There may be times when you need to specify a fixed width for one box and for a second box, you may wish to have setup using percentages. For example, a sidebar aligned to the left (with a static width) and a content portion to the right of the sidebar (with a fluid width).

To do this, we can set the width of the sidebar to say 200px and for the content you can set the width to 100% and using a left margin allow the sidebar to take up some of that 100%. So essentially we end up with a 200px sidebar and a content area with a width of 100%-200px.

.sidebar{
width:200px;
float:left;
}

.content{
margin-left:200px;
width:100%;
float:right;
}

If you are a web developer and are reading this, for the sake of being nice, please make sure you have a fluid layout on your site(s). Why? Simple. We don’t go out and purchase a house with 8 bathrooms and 200 bedrooms and only use 1 room and 1 bathroom. Similar to this, people don’t go out and purchase a giant 30 inch monitor with a massive horizontal pixel range, only to visit their favourite website and find out that only 25% of their screen actually contains content whilst the other 75% contains either: crappy whitespace, or; and even more insipid background pattern or image.

Even the big names on the web are guilty:

So if you are sick and tired of seeing the kind of stuff above, please speak up. Or, on the other hand, if you for some reason love fixed width layouts, let us know and why? I am looking forward to hearing your opinions.

Related Content:
Sorry, no related posts.