DesignM.ag » Tutorials

Building an Image Slideshow UI Switcher with jQuery

Jake Rocheleau — Mon, 01 Apr 2013 01:11:58 +0000

A lot of newer e-commerce websites and blog archives have started organizing listings in various formats. The interface will feature a set of icons to switch between different views, such as thumbnails or full details. It can be a pleasing design aesthetic for many typical webpages where you need to share a lot of content which can also be easily indexed.

For this tutorial I want to demonstrate how we can build a slideshow UI switcher for a set of photos. Users have the ability to flip forward and backwards in the photos list, or choose a specific image from the thumbnail view. I believe this interface can work with almost any type of slideshow webpage layout. And if you are running a dynamic CMS then you could build a page template which includes dynamic images inside the unordered list element.

Live Demo – Download Source Code

Getting Started

There is not too much HTML worth going over, but the main section is focused on the thumbnail and slideshow views. These two content sections are separated by divs and use CSS to switch between the display styles.

Each of the thumbnails actually contain a majority of the markup which could allow us to include schema microdata handy for search engines. Each list item has an internal anchor link which points towards the full-scale image. Then when a user clicks we update the img tag inside #mainimg. This single img tag doesn’t really need extra attributes because it is a dynamic element. And so bots and webpage crawlers will have a difficult time distinguishing between the changes and it won’t help much with SEO anyways.

This small block of code is actually placed above the thumbnails and slideshow container. These represent the slider controls and we have two internal components. First are the left/right arrows for shuffling between the various images. Then you can change from slideshow to thumbnails which will hide the arrows, and you can then choose a new display image from the set.

Now the only extra documents I have included represent the CSS stylesheet and the UI switcher, along with a copy of jQuery included from Google’s Developer CDN. Also I have just added a small web font courtesy of Google Web Fonts.

Designing the Layout

Inside the whole wrapper div I have setup a unique container for the background and box shadows. Additionally the background tile is a repeating image from BG Repeat. The interesting pieces focus on our control div, along with the thumbnails view listing.

/* ui controls */
#controls {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

#controls .slides {
  width: 150px;
  height: 50px;
  position: relative;
  top: -6px;
  margin: 0 auto;
}

#controls .slides #keyleft {
  display: block;
  float: left;
  width: 48px;
  height: 48px;
  margin-right: 9px;
  background: url('../images/key_left.png') no-repeat;
}
#controls .slides #keyright {
  display: block;
  float: left;
  width: 48px;
  height: 48px;
  background: url('../images/key_right.png') no-repeat;
}

The arrow keys are designed using CSS background images and positioned to float next to each other. They are centered in the layout compared with the UI switcher icons, which are located to the right side. You will find this item contained inside the .switcher div element.

#controls .switcher {
  width: 70px;
  float: right;
}

#controls .switcher #switch-slideshow {
  display: block;
  float: left;
  width: 30px;
  height: 30px;
  background: url('../images/sprites.png') no-repeat -3px 0;
}
#controls .switcher #switch-thumbnail {
  display: block;
  float: left;
  width: 30px;
  height: 30px;
  background: url('../images/sprites.png') no-repeat -30px 0;
}
#controls .switcher #switch-slideshow.sel {
  background-position: -63px 0;
}
#controls .switcher #switch-thumbnail.sel {
  background-position: -90px 0;
}

Using a single sprite sheet saves time and HTTP resources when loading the initial webpage. And setting a fixed height/width combo is the easiest way to manage and position elements. The buttons are fairly quick using jQuery means we can handle any binding event from the user. Now moving into the page layout we only have a single block of code pertaining towards the main slideshow image, along with a series of internal thumbnail selectors.

/* page displays */
#thumbnails {
  display: none;
  padding-left: 60px;
}

#thumbnails li {
  display: block;
  float: left;
  margin-right: 12px;
  margin-bottom: 15px;
  padding: 0;
}
#thumbnails li a {
  margin: 0;
  padding: 0;
  width: 160px;
  height: 160px;
  float: left;
  border: 5px solid #e6eaf0;

}

#thumbnails li.current a {
  border: 5px solid #4978bf;

}

#mainimg {
  display: block;
  width: 600px;
  margin: 0 auto;
}

Interactive jQuery

The final major piece to this tutorial is my uiswitcher.js file. This will include all the major jQuery event handlers and functions to run on each situation. The code is a bit lengthy so I will examine it broken down into parts.

  /**
   * Switching between slideshow and thumbnail views
   * we handle 2 different .on() events
   */
  $('#switch-slideshow').on('click', function(e){
    e.preventDefault();
    if(!$(this).hasClass('sel')) {
      $('ul.switcher li a').removeClass('sel');
      $(this).addClass('sel');

      // hide the thumbnails and display the slideshow
      $('#thumbnails').hide();
      $('#controls .slides').fadeIn(450);
      $('#mainimg').fadeIn(450, 'linear', function(){
        $('body').removeClass('thumbnail-view');
      });
    }
  });

  $('#switch-thumbnail').on('click', function(e){
    e.preventDefault();
    if(!$(this).hasClass('sel')) {
      $('ul.switcher li a').removeClass('sel');
      $(this).addClass('sel');

      // hide the slideshow and display thumbnails
      $('#mainimg').hide();
      $('#controls .slides').hide();
      $('#thumbnails').fadeIn(450, 'linear', function(){
        $('body').addClass('thumbnail-view');
      });
    }
  });

First you will notice a chunk of codes designated for handling click events onto either of the UI switcher buttons. They both check if the current icon is already selected, in which case the script doesn’t need to do anything. Otherwise the clicked icon is not selected and we remove the selection from both icons, then make the new one selected and fade in with the new image display content.

  /**
   * Slideshow pagination using arrow keys which hide during thumbnail display
   * we use 2 different .on() handlers for both keys
   */
  $('#keyleft').on('click', function(e){
    e.preventDefault();
    var currentimg = $('#thumbnails ul li.current');

    if(!currentimg.hasClass('first')) {
      // if any other image except the first, then navigate backwards
      var newimg = $(currentimg).prev();
      var newimgsrc = newimg.find('a').attr('href');

      currentimg.removeClass('current');
      newimg.addClass('current');
      $('#displayimg').attr('src', newimgsrc);
    }
  });

  $('#keyright').on('click', function(e){
    e.preventDefault();
    var currentimg = $('#thumbnails ul li.current');

    if(!currentimg.hasClass('last')) {
      // if any other image except the last, then navigate forwards
      var newimg = $(currentimg).next();
      var newimgsrc = newimg.find('a').attr('href');

      currentimg.removeClass('current');
      newimg.addClass('current');
      $('#displayimg').attr('src', newimgsrc);
    }
  });

The next large chunk of codes will focus on user clicks for the two different arrow keys. When the active image also has a class of .first or .last then we know where to end the pagination. If you wanted to update this slideshow into a carousel then we could just move from the first image back to the last item and vice-versa.

  /**
   * Selecting any thumbnail image will update the current photo
   * and reset the UI back to slideshow view
   */
  $('#thumbnails ul li a').on('click', function(e){
    e.preventDefault();

    if(!$(this).parent().hasClass('current')) {
      // if we click anything except the currently selected image
      var newimgsrc = $(this).attr('href');
      $('#displayimg').attr('src', newimgsrc);

      $('#thumbnails ul li').removeClass('current');
      $(this).parent().addClass('current');

      // updating the slideshow view after choosing a photo
      $('ul.switcher li a').removeClass('sel');
      $('#switch-slideshow').addClass('sel');

      $('#thumbnails').hide();
      $('#controls .slides').fadeIn(450);
      $('#mainimg').fadeIn(450, 'linear', function(){
        $('body').removeClass('thumbnail-view');
      });
    }
  });

Finally we need to handle whenever the user clicks onto any thumbnail image. The script will stop each anchor link from loading and check if the current thumbnail is already selected. If not then we make it the currently selected image and load this into the main slideshow display. We complete the function by re-animating the fade effect onto the slideshow div for a convenient user experience.

Live Demo – Download Source Code

Final Thoughts

This tutorial is definitely a bit more advanced, yet not too difficult for a newer jQuery developer. All of the codes should be easily portable into another website by updating the IDs. And you can test or edit this interface by downloading a copy of my project source code. Additionally if you have further questions or ideas please let us know in the post discussion area.

Advertise here with BSA

How to Build an iOS-Style Content Slider using jQuery

Jake Rocheleau — Tue, 26 Feb 2013 04:31:07 +0000

Advertise here with BSA

There are loads of tutorials online which are related to dynamic slideshows and image galleries. Typically web developers have been using jQuery to enhance the media in these content sliders. Many other ideas have come to fruition and this has spurred a generation of brand new plugins for jQuery developers.

In this tutorial I want to focus on one of these plugins called iosSlider. This is an open source project with numerous options for customizing your own media slideshow. This includes typical animations and effects for when the user clicks or hover over slideshow items. Additionally we will include some dynamic text as seen on the website demo. This UI style is perfect for improving the creativity of more generic or bland website layouts.

Live Demo – Download Source Code

Getting Started

First we want to create our bare HTML5 webpage and setup the core HTML structure. There are a lot of tags we need to include which relate to each image in the slideshow. Plus we are using custom headings and page text inside each of the sliding panels. But first we should take a peek at the document heading section.




  
  iOS Slider Demo Page

Take note that I am including a series of JS files to ensure that our plugin works to the maximum capacity. First is the latest jQuery library hosted by Google APIs. Then followed by jQuery easing and finally our iosSlider plugin codes. All of the working JavaScript has been added into the bottom of the HTML body inside tags.

Moving on we should now examine the internal HTML and see how this works to generate the basic slideshow. By including a series of content wrappers the goal is to keep our widget fully responsive to display properly on mobile smartphones. The functionality is already built using jQuery so it is worth the extra HTML.


  
    
      
        
          
            Touch Me.
            Hardware accelerated using
CSS3 for supported iOS,
Android and WebKit

The .fluidHeight class will ensure that our full wrapper keeps the same proportions of each internal image. The internal .sliderContainer is what will hold the photos and defines an area for the content to slide between. The .item class is what defines a unique sliding object and .inner is used for absolute positioning. The two text objects will fly in to be animated from the right side, and so we need to have them positioned on top of the photo at all times.

Styling the Sliding Panels

At the bottom of the sliding container after all the images have been listed we close the .slider div and lock them into a single box. Then outside I have added the various circle navigation buttons for users to click and switch between the different views automatically.

This looks like a basic nav menu list and we could have stuck to using list items or definition lists, per the newer HTML5 documentation. But divs are cleaner and offer more control over the width and height, plus the size of the link items themselves. You can see how these are floated together inside the container which uses different CSS properties than the internal .item slides.

.iosSlider .slider .item { width: 100%; height: 100%; padding: 5px 0 5px 0; }

.iosSlider .slider .item .inner {
  position: relative;
  top: 0;
  left: 0;
  width: 1024px;
  margin: 0 auto;
  height: 100%;
  box-shadow: 0 0 10px -5px #000;
  background-position: 50% 0;
  background-repeat: no-repeat;
}

.iosSlider .slider .item .inner .text1 {
  background: none repeat scroll 0 0 #000;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  right: 150px;
  top: 30px;
  padding: 5px 2px 0 7px;
}

.iosSlider .slider .item .inner .text1 span { color: #fff; font: 55px/70px Norican; padding: 0 8px; }

.iosSlider .slider .item .inner .text2 {
  background: none repeat scroll 0 0 #000;
  opacity: 0;
  filter: alpha(opacity=0);
  padding: 5px 7px 7px;
  position: absolute;
  right: 0;
  top: 100px;
}

.iosSlider .slider .item .inner .text2 span { color: #fff; font: 16px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; }

.sliderContainer .slideSelectors {
  position: relative;
  bottom: 20px;
  left: 0;
  width: 92%;
  margin: 0 4%;
  z-index: 1;
  height: 10px;
}

.sliderContainer .slideSelectors .item {
  float: left;
  width: 9px;
  height: 9px;
  border: 1px solid #000;
  background: #999;
  margin: 0 0 0 10px;
  opacity: 0.25;
  filter: alpha(opacity=25);
}

.sliderContainer .slideSelectors .selected {
  background: #000;
  opacity: 1;
  filter: alpha(opacity=100);
}

The inner span elements help to define unique font faces we are applying inside CSS. The original page demo includes a small TTF font Norican Regular which looks fantastic as a header. This can be included using CSS @font-face properties and setting up a new typeface style. Keep in mind that you can apply this same effect using any other TTF file based on open GLP licensed fonts.

Merging with JavaScript

By now the last major piece of the puzzle is how to implement this whole iOS Slider effect. We will be using a custom function based off the jQuery plugin file. We need to attach the selector onto our .iosslider container div which holds the other slider items.

$(document).ready(function() {
  $('.iosSlider').iosSlider({
    desktopClickDrag: true,
    snapToChildren: true,
    navSlideSelector: '.sliderContainer .slideSelectors .item',
    onSlideComplete: slideComplete,
    onSliderLoaded: sliderLoaded,
    onSlideChange: slideChange,
    scrollbar: false,
    autoSlide: true,
    autoSlideTimer: 3300,
    infiniteSlider: true
  });
});

The method call is using $().iosSlider for the main function name. Inside we are passing a whole slew of parameters which pertain to this specific demo. The full documentation is listed on the official plugin website where you can see each parameter name and the accepted datatype. There are 3 parameters which call external functions also defined inside my JavaScript code. If you want to save space these may be copied over into the jQuery plugin file, or saved into a new external JS file.

function slideChange(args) {
  $('.sliderContainer .slideSelectors .item').removeClass('selected');
  $('.sliderContainer .slideSelectors .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
}

function slideComplete(args) {
  if(!args.slideChanged) return false;

  $(args.sliderObject).find('.text1, .text2').attr('style', '');

  $(args.currentSlideObject).find('.text1').animate({
    right: '100px',
    opacity: '0.8'
  }, 400, 'easeOutQuint');

  $(args.currentSlideObject).find('.text2').delay(200).animate({
    right: '70px',
    opacity: '0.8'
  }, 400, 'easeOutQuint');
}

function sliderLoaded(args) {
  $(args.sliderObject).find('.text1, .text2').attr('style', '');

  $(args.currentSlideObject).find('.text1').animate({
    right: '100px',
    opacity: '0.8'
  }, 400, 'easeOutQuint');

  $(args.currentSlideObject).find('.text2').delay(200).animate({
    right: '70px',
    opacity: '0.8'
  }, 400, 'easeOutQuint');
  slideChange(args);
}

These function calls mostly deal with animating the text and sliding image panels on each slide change. You can dig into the functions as I have copied them below. Please note that it is not imperative that you edit these at all. They should work fine unless you are updating class names, which are very minor changes anyways.

Live Demo – Download Source Code

Final Thoughts

I do hope this tutorial may be of use to some web developers out there. Building a custom slider widget to work properly in modern browsers and smartphones is not easy. Many of the supported browsers for Android and iOS devices are advancing, too. This means we can expect support for greater ideas in the near future.

Along with my live demos feel free to grab a copy of the project source code. I have slimmed down the page to include a very minimal amount of CSS and HTML to keep this slideshow running. It should be easy to copy/paste into your own design and have it working quickly. But if you have additional thoughts or questions on the iosSlider plugin feel free to share with us in the post discussion area.

Advertise here with BSA

How To Build an HD Photo Gallery using Schema Microdata

Jake Rocheleau — Tue, 29 Jan 2013 03:15:17 +0000

Advertise here with BSA

There are plenty of benefits for developers who add Microformats or Microdata into their HTML markup. Search engines like Google or Yahoo! often look for this extra metadata when crawling new webpages. You can offer helpful attributes for text and media on the page, along with other information about people, businesses, ideas, projects, practically anything.

In this tutorial I would like to introduce Schema microdata as applied into an HTML5 image gallery. The dynamic content is powered by a small bit of jQuery so we can display thumbnails and the full-scale image as well. The codes here may be copied and ported into various other layouts for displaying lightboxes or streaming video. It’s a fun topic and offers a lot to those interested in learning!

Live Demo – Download Source Code

Helpful Resources

Before jumping into the code I want to provide just a couple of links related to microdata. This format is relatively new but also unanimously supported by all modern search engines. I found an excellent Google support article related to schema markup for videos. Much of the same basic syntax can be applied to other Schema objects, too.

Another helpful resource put out by Google is the Structured Data Testing Tool. Here you can link to a live website URL or embed your own HTML content and Google will crawl through to pull out all the related metadata. From the examples dropdown menu there are a series of demos you may try out. This is a great tool for double-checking against all your hard work once it has been launched on the web. Or possibly even before launching.

Structuring the HTML

To get started I have created the typical files we need in any general webpage demo. Inside my index.html we will include a copy of jQuery along with a reference to the local stylesheet named styles.css. The header information is mostly familiar so let’s skip right down into the body content.

The top portion of our wrapper container is holding thumbnails for each of the larger images. These are pre-cropped and sized 100×100 pixels. I have only copied over a single list item so that you can get the idea of how Schema markup appears in typical HTML.

We need to define what type of object are using within a container element wrapped around the content itself. Since I’ve setup an unordered list we may apply this onto each

tag. However normally you could just add an extra

tag around the contents.

The keyword itemscope is necessary to inform that we are defining a scope for a new item. The value is passed into itemtype as a full URL linking to Schema’s object documentation – in this case we are using an ImageObject. If you aren’t familiar with the various item properties it may be worth quickly scanning the documentation page.

Applying Metadata

One important concept to understand is that we can include related microdata information without having that content displaying on the page. Each list item has a URL to the thumbnail image and the anchor link pointing towards the full image. We can use both of these items to pull source links for the different itemprops “contentURL” and “thumbnailUrl”.

But there is so much more to offer in the way of SEO and search keywords. This is where we can use the tag right inside the object block to store further properties about the image. Check out this HTML5 Doctor post discussing schema microdata within HTML markup. All the meta tags will be visible in the code but nothing will appear on the frontend of your webpage. This is great because you can reap all the benefits of additional metadata without needlessly cramming this text into your layout.

I have copied over another list item down the line so you can see how they share a very similar syntax. We are only utilizing 2 different meta tags for image properties. The first is a caption which is mirrored from the image’s alt text. Then I have included a reference link back to the original publisher on their Flickr page. Attribution is important and this is a great method for any type of creative commons media.

Dynamic Images

Now for this last bit I want to expand on how we can make load the full images dynamically. Since I have linked each thumbnail directly to the respective full-shot JPG we need to cancel this initially loading. Then we can replace all the inner page content with new links. Here is my sample code found after the unordered thumbnails list.


  Image Source: http://www.flickr.com/photos/digitaltree515/4002436362/

I have added a full in-page link to the source just for users to have access on the frontend. This isn’t necessary for Google since we have already coded the information into Schema markup. And if you didn’t notice I actually haven’t added any properties into the larger image display. This is because all of the inner content is dynamic and will be constantly changing. It’s pointless to have this labeled using Schema and the best method is to keep everything together in one place.

And finally here is my JavaScript block which I have added at the very bottom of the page. After stopping the links from loading we need to pull out values for the larger image URL and the Flickr source URL. Notice we are grabbing this value from the related meta tag using the attribute selector meta[itemprop="publisher"]. Afterwards we can update the inner content and keep it static until the user clicks again.

Live Demo – Download Source Code

Final Thoughts

I do hope you enjoy this basic HTML/CSS/Schema demo and see how this can be applied into any typical website. Image galleries are very common amongst web developers and they are heavily supported by all standards-compliant browsers. However it becomes an issue when attempting to reorder the content so it’s easier for search engine crawlers to read.

In a comparison with Microformats I still feel that Schema.org Microdata can offer a better solution. Their documentation is far more advanced and there are a lot more approved specifications rather than drafts. This means you can work with dozens of various item types aside from images or even try creating your own! Schema is a wonderful HTML5 markup assistant and definitely worth ingraining into your typical work routine.

Advertise here with BSA

Creating Semantic 2-Column and 3-Column CSS Layouts

Jake Rocheleau — Thu, 27 Dec 2012 14:42:55 +0000

Advertise here with BSA

Website layouts are not the most difficult part of coding a typical design. But unfortunately there are still not many standards set in stone for creating multiple column-based layouts. These are often put together through various CSS methods, but the most supported designs are using fluid width containers.

In this tutorial I want to look over a series of different CSS column layouts. We can see how to build websites using floats and direct positioning. Most common websites will utilize 2 or 3 columns at most, so that is what we’ll be focusing on. Along with these ideas you should feel comfortable trying out other CSS codes. There are new standards being written so frequently it can be difficult to gauge the best possible solution.

Absolute Position Fixed Columns

Using my first example I want to demonstrate a common website theme which uses 2 sidebars along with a center body area. The 2 side columns will be set to a fixed width while the center content should be fluid as you resize the window. This can be accomplished using a single container for all 3 columns, then positioning each sidebar to the right and left sides.


  
    left col.
  

   here is some main text.
  here is a brief paragraph with some elongated text. we can see if it will break the lines and where the columns begin to appear.

  Isn't this a neat little trick?
  

  
    right col.

I am also placing additional padding into the center div container. When we setup absolute positioning on the columns this will automatically remove that content from the natural document flow. So all our center content is setup using width: 100% and would fall behind these sidebar columns.

/**
 * html-css column layouts
 */
html { background: #f06; background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; }
div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.container { display: block; position: relative; max-width: 1000px; min-width: 550px; margin: 0 auto; }

#left { width: 220px; background:#c9c; position: absolute; left: 0; top: 0; height: 100%; }
#content { width: 100%; background: #fff; padding: 0px 220px; }
#right { width: 220px; background: #a4a; position: absolute; right: 0; top: 0; height: 100%; }

Another nice part of using absolute positioning is that your sidebar columns will naturally fill the background space. Using other methods the sidebar BG colors will only be as long as the content. This is perfectly fine if all your background is the same color, but otherwise absolute positioning is a very solid method. I’ve setup a gist sample demo if you want to see this live in your browser.

Floated Columns

While we are looking into the left/right layout style I want to bring up another solution. Floated elements are still kept inside the document flow, which is nice in certain instances. There is nothing wrong with absolute positioning except that it doesn’t always scale properly.

We can build the same type of layout using floats coupled with the same container element. However there are just a couple small issues which stand out in comparison. One major point is that you’ll need to code any sidebars above your main content area in the HTML DOM. No matter how you float these elements in the layout, you’ll need to have the sidebars appear first in the webpage content.



  
    right col.
    here is a line.
     and nother
     and nother!!
     gonna keep going.
    heyoo
    heyooooo
  

  
    left col.
  

   

  here is some main text.
  here is a brief paragraph with some elongated text. we can see if it will break the lines and where the columns begin to appear.
  here is more big text and will this break the bank?? will it?? i dont really know to be honest.
  but let's find out folks.

This is still perfectly semantic code because we’re only using HTML5 elements and attributes. It just gets weird presenting content into search engine crawlers, where your sidebar area locations appear slightly out of place. But the other pressing issue is that your sidebars will not adjust to 100% height if the body content is longer.

/**
 * html-css floated column layouts
 */
html { background: #f06; background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; }
div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#wrapper { max-width: 1000px; min-width:750px; margin: 0 auto; }
.container { height: 100%; float: left; background: #fff; }

#left { width: 220px; height: 100%; background:#c9c; float: left; }
#content {width: 100%; height: 100%; padding: 0 220px; background: #fff;  }
#right { width: 220px;  height: 100%; background: #a4a; float: right; }

.container { display: inline-block; }
.container:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
.container {
    display: block;
}

Unfortunately even appending a clearfix onto the container will not always fix this issue. The best solution is to create a single image 1px high and fill it repeating vertically down the page. This isn’t the most elegant solution, but it works if you need sidebars with differing backgrounds. Also you may consider this solution for similar layouts using 2 or 4 columns. Check out my related gist example with the same HTML/CSS code.

Fluid Equal Height Columns

My next layout style is actually derived from Matthew James Taylor who wrote an excellent piece on this topic. He explains how we can build columns which float and also have full 100% height for background colors. It requires adding a new container div for each of the columns, and then hiding any overflow content.


  
    
        
          
            this is the right col
            i am just saying that this is crazy folks. just super crazy!!!!!!!
          
          Column 2
          Column 3

The code is very confusing if you don’t follow exactly what’s going on. We are basically pushing the first container way over to the right and then using relative positioning for the others. This means each of the containers is actually at 100% width but we display just a portion of each column. Then all the other content is hidden using the overflow property.

html { background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; padding-top: 55px; }

#wrapper { display: block; max-width: 1100px; min-width: 700px; margin: 0 auto; }

#container3 { float: left; width: 100%; background: green; overflow: hidden; position: relative; }
#container2 { float: left; width: 100%; background: yellow; position: relative; right: 30%; }
#container1 { float: left; width: 100%; background: red; position: relative; right: 40%; }
#col1 { float: left; width: 26%;  position: relative; left: 72%; overflow: hidden; }
#col2 { float: left; width: 36%; position: relative; left: 76%; overflow: hidden; }
#col3 { float: left; width: 26%; position: relative; left: 80%; overflow: hidden; }

Now the biggest problem I’ve had using this solution is getting any column to stay fixed. The issue arises because the column background and the column content are two separate divs. So if we setup a fixed width on the content, our background color will slowly fade as you resize the window. This requires us to stick using percentages or possibly ems for measurement units.

Unless we can figure out a fixed-width solution this method is best used in fluid website layouts. And as mentioned earlier, you are able to customize this style using as many columns as you’d like. Check out the live gist demo and attempt resizing the window to see what I’m talking about.

Fluid-Fixed-Fixed Columns

This will be my last example but it’s definitely a cool one. Instead of placing the sidebars to the left & right sides I’ll show how we can float them both next to each other. Using this method it’s possible to setup any combination of fluid/fixed while still keeping your HTML content in the proper order.


  
    
      
        Content Column: Fluid
      
    
  

  
    
      Left Column: 220px
    
  

  
    
      Right Column: 220px
    
  

  
    Googies

I have also incorporated a small footer element to demonstrate how you may clear further page content. Using my example we have a left content column which is fluid as you resize the window. Then both the sidebars are set to a width of 220px which doesn’t adjust on resize. The content area uses negative margins to limit the full page width. This stops content from appearing underneath the sidebars.

/**
 * CSS Liquid Layout (Fluid-Fixed-Fixed)
 */
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; }

body { padding-top: 85px; }
#wrapper { margin: 0 auto; max-width: 1100px; min-width: 650px; background: #fff; }

#contentwrapper{float: left; width: 100%; margin-left: -220px; }

#contentcolumn { margin: 0 190px 0 220px; }
#leftcolumn { float: left; width: 220px; margin-left: -220px; background: #C8FC98;}
#rightcolumn { float: left; width: 220px; background: #FDE95E;}

footer { clear: left; width: 100%; background: black;color: #FFF;text-align: center;padding: 4px 0;}
footer a { color: #FFFF80;}

.innertube {margin: 10px; margin-top: 0; }

This is one of my favorite general layouts when it comes to more complicated column designs. It does require a bit of knowledge using CSS margins/padding but nothing overly difficult. It should be noted you can easily rearrange the two sidebars to appear on the left side by changing your HTML order, and adjusting margins accordingly. Here is my live gist example of the typical 3-column fluid-fixed-fixed layout style.

Final Thoughts

I hope this brief tutorial can be of use to web developers who need quick solutions for layout designs. The initial codes used to setup your website will become the foundation for each project going forward. You want to make sure the foundation is not only stable, but supported in all major web browsers.

Be sure to check out some of my demo examples sewn throughout this article. I have provided live demo examples for each column style and you may duplicate these layouts at your own will. It is my goal to provide easy code snippets for putting together websites on a whim. If you have additional ideas or questions feel free to share with us in the post discussion area below.

Advertise here with BSA