The 4 Types of CSS Layouts: Which One is Right for You?

One of the first, and often overlooked, elements to decide upon when building a CSS-based website is the type of CSS layout you plan on using. Wait… There is more than one type of CSS layout? Yep, in fact there are 4 primary CSS layout types. Each CSS layout is based on a different methodology and serves a different purpose. As a whole, the different types of CSS layouts provide added flexibility when designing websites.
Let’s take a look at each CSS layout, define the advantages and disadvantages of each, and review various examples so you can determine which type of CSS layout is best for you.

1. Fixed Width

Fixed CSS layouts are simply layouts that have a definite width specified in pixels. Furthermore, the size of the layout does not resize based on the size of the browser or the site visitor’s browser text settings.
Advantages

• The layout or column is controlled (stays the same) which can be helpful to ensure your content remains easily read even when the browser window is shrunk or expanded.
• In some cases specific designs can be more easily achieved without having to make accommodations for a layout that re-sizes.

Disadvantages

• Oftentimes the layout size must be kept to a minimum to accommodate for smaller or low resolution computer screens. If you choose a large fixed width CSS layout visitors may have to scroll horizontally to read content.
• With a set width you may not be taking advantage of the real estate larger or higher resolution screens provide. Additionally, your site may look tiny to visitors with these types of screens.
• The content area may become awkward looking and hard to read if the visitor has their browser text size set larger than “normal” as this type of layout cannot easily accommodate for this scenario.

Example: WebAssist.com

2. Liquid or Fluid

A liquid CSS layout, otherwise know as a fluid layout, is one where the layout width is specified as a percentage of the site visitor’s browser width. Therefore, the design will adapt or change if the site visitor adjusts the size of their browser to be narrower or wider. The width will not change based on the site visitor’s text settings.
Advantages

• Will help ensure the width of your site is proportionate to the size of your site visitor’s browser – universal as it will adapt to all screen sizes.
• Allows your site to maximize the amount of real estate available within each site visitor’s browser.
• You can set a max width CSS property to ensure your layout does not grow too large.

Disadvantages

• If a layout is stretched the content areas will stretch and cause paragraphs of text to lengthen to one line making it less readable.
• Some older browsers such as IE 6 do not support a max width CSS property so in some larger screens your site’s width may grow too large making content hard to read.

Example: Google News

3. Elastic

With an elastic CSS layout the layout width is specified as a unit of measurement (ems) relative to the size of the text set by the site visitor in their browser. The layout will adapt if the site visitor changes their text settings, however the layout will not change based on the size of the browser window.
Advantages

• Site layout will grow proportionately with size of the text site visitors have set in their browsers. This can help ensure your content stays readable.

Disadvantages

• If a browser’s text display settings are set too large your site may become unusable.

Example: Whitley Journalism
Note: To test the elasticity of this example you will need to set your browser text settings to a larger font size.

4. Hybrid

As you may have guessed a hybrid layout is any combination of CSS layout types mentioned above. For example, in a two-column hybrid, the right sidebar layout can have a liquid main column that scales to the size of the browser, and an elastic column on the right that scales to the size of the site visitor’s text settings.
Advantages

• You can combine multiple benefits of the various layout types mentioned above.

Disadvantages

• This type of layout can become difficult to implement as there are more variables.

Example: Amazon.com
Note: As you stretch the Amazon.com home page the right and left columns will remain fixed, while the center column is liquid and stretches as you increase the size of your browser.

As you can see each type of layout will provide you with various advantages and disadvantages. Hopefully through the information provided in this article you can better select the layout type that will fit your next project. Looking to more easily design CSS layouts within Dreamweaver? Check out Eric Meyer’s CSS Sculptor our which will help you design each of the above layout types without CSS knowledge or experience.

How to create a number list 1, 2, 3, and Sub number list 1.1, 1.2, 1.3 … HTML list?

CSS Code:
ul.numeric-decimals { counter-reset:section; list-style-type:none; }
ul.numeric-decimals li { list-style-type:none; }
ul.numeric-decimals li ul { counter-reset:subsection; }
ul.numeric-decimals li:before{
    counter-increment:section;
    content:counter(section) ". ";/*content:"Section " counter(section) ". ";*/
}
ul.numeric-decimals li ul li:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

Html Code:

<ul class="numeric-decimals">

  <li>Cats

    <ul>

      <li>Birds</li>

      <li>Rats</li>

    </ul>

  </li>

  <li>Dogs

    <ul>

      <li>Birds</li>

      <li>Rats</li>

    </ul>

  </li>

  <li>Rabbits</li>

  <li>Ants

    <ul>

      <li>Lions</li>

      <li>Rats</li>

    </ul>

  </li>

  <li>Ducks</li>

</ul>

3 ways of inserting CSS media queries

CSS media queries can be added to CSS in all of the ways you're able to define it:

External stylesheet:
<link rel="stylesheet" type="text/css" href="smallscreen.css" media="only screen and (max-width: 480px)" />

Imported stylesheet within the <style> element:
@import "smallscreen.css" only screen and (max-width: 480px);

Within the <style> element as a media rule:
 <style type="text/css">
  @media only screen and (max-width: 480px){
    /* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
  }
</style>

Source from: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

CSS media queries and IE fix

Take a peek at adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page.
Make sure you try respond.js - a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

If you want to be able to correctly display a fluid design on multiple resolutions (including mobile) then you will probably use CSS Media Queries. CSS Media Queries are not complicated to use and were introduced by CSS3 specifications as an extension of CSS 2.1 media types.

Note that HTML4 supports media types like handheld, but this is poorly supported, old mobiles don't detect it, the modern devices completely ignore it.

CSS Media Queries work fine on modern browsers (IE9, FF, Chrome, Safari, Opera) and on mobile devices (iPhone, Android, Opera Mobile & Mini, Blackberry, IE Mobile 7, etc.)

And of course they don't work on IE < 9.0, but I have a solution that I'm already using on production servers. I wrote a small JavaScript file that reads all the <link> elements from DOM, checks which of them are destined for the current device resolution and applies them.

...
<head>
<!-- Your .css files. IE6, IE7 and IE8 ignore the media="only all ..." files. -->
   <link rel="stylesheet" type="text/css" href="core.css" />
   <link rel="stylesheet" type="text/css" href="smartphone.css" media="only all and (max-width: 480px)" id="stylesheet-480" />
   <link rel="stylesheet" type="text/css" href="tablets.css" media="only all and (min-width: 480px) and (max-width: 1024px)" id="stylesheet-1024" />
   <link rel="stylesheet" type="text/css" href="wide.css" media="only all and (min-width: 1200px)" id="stylesheet-1280" />

<!-- The mighty fix which chooses the correct stylesheet file based on the
screen resolution, and strips the 'media' attribute so IE6, IE7 and IE8
can read/interpret it -->

<!--[if lt IE 9]>
   <script type="text/javascript" src="/js/css-media-query-ie.js"></script>
<![endif]-->

</head>
...


Source From: http://ghita.org/tipoftheday/css-media-queries-for-ie

Smooth Scroll jQuery

<script type="text/javascript">
$(function() {
$('.parallex_controllers a').bind('click',function(event){
var $anchor = $(this);

$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
});
</script>

Display a loading image until the page completes loading

Similar to how GDGT.com has it’s loading.gif while the page completes this method will do something very similar.

Right after the body I include the image inside a div:


<div id="loading-image">
    <img src="<?php bloginfo('template_url'); ?>/images/ajax-loader.gif" alt="Loading..." />
</div>


Of course I’m using wordpress so you might need to include a different path for your ajax-loader.gif.

Here’s the CSS I’m using on my current project:
#loading-image {
    display:block;
    background-color: #000;
    height:100%;
    width:100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999999;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    -khtml-border-radius: 10px;
}

Now the most important part. I’m using jQuery to hide that div after the page completes loading.
<script type="text/javascript">
jQuery(window).load(function(){
    jQuery('#loading-image').fadeOut(1000);
});
</script>

HTML5 Features

1.      New Doctype

( HTML )       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

( HTML5 )    <!DOCTYPE html>

2.      The Figure Element

( HTML )       <img src="image/image.jpg" alt="image" title=” image” />

        <p>Image of Mars. </p>

( HTML5 )

<figure>

    <img src="image/image.jpg" alt="image" title=”image” />

    <figcaption>  

        <p>This is an image of something interesting.</p>  

    </figcaption>  

</figure>  

3.      No More Types for Scripts and Links

( HTML )     <link rel="stylesheet" href="css/ stylesheet.css" type="text/css" />  

      <script src="path/to/script.js" type="text/javascript"></script>

( HTML5 )  <link rel="stylesheet" href="css/stylesheet.css" />

     <script src="path/to/script.js"></script>  

  

4.      To Quote or Not to Quote.

( HTML )     <p class=”myclass” id=”someId”> Welcome.</p>

( HTML5 )  <p class=myclass id=someId> Welcome.</p>

 

5. Email Inputs

( HTML5 )

                 <!DOCTYPE html>  

                       <html lang="en">  

                            <head>  

                                  <meta charset="utf-8">  

                                      <title>untitled</title>  

                            </head>  

                            <body>  

                                  <form action="" method="get">  

                                      <label for="email">Email:</label>  

                                          <input id="email" name="email" type="email" />

                                          <button type="submit"> Submit Form </button>  

                                   </form>  

                            </body>  

                       </html>

6.  The Semantic Header and Footer

( HTML )      <div id="header">    ...  </div>    

                       <div id="footer">       ...  </div>  

( HTML5 )    <header>       ...      </header>  

                        <footer>          ...      </footer>

7.Audio Support

( HTML5 ) HTML5 now offers the <audio> element.

                        <audio autoplay="autoplay" controls="controls">  

                             <source src="file.ogg" />  

                             <source src="file.mp3" />  

                             <a href="file.mp3">Download this file.</a>  

                        </audio>  

8. Video Support

( HTML5 ) HTML5 now offers the <vidio> element.

                        <video controls preload>  

                             <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />  

                             <source src="filename.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />  

                             <p>Your browser is old.<a href="cohagenPhoneCall.mp4">Download this video instead.</a></p>  

                        </video>