The Floating Boxes CSS Layout

by Matthew James Taylor on 16 June 2007

The Floating Boxes CSS Layout
The Floating Boxes CSS Layout at different common screen resolutions

An alternative to the standard 'fixed width' or 'liquid layout' designs


For those who can't wait, go straight to the demo page. If you prefer, see my liquid layout designs.

Layout problems for variable screen sizes

Anyone involved in online advertising will tell you that screen real estate is worth $$$! It's so important to use every bit of space available, we simply can't afford not to. But this is where we encounter a problem. Due to the nature of the internet, people will view websites from all types of computers with a huge variety of different screen resolutions. How can we make a website work effectively for such a varied audience?

Traditionally there are only two main approaches to the website size problem; the 'liquid layout' and the fixed-width design. Both of these have inherent problems.

The liquid layout

A stretchy layout nicely fills all screen sizes without wasting any space, but with large resolutions the lines of text can be very long and difficult to read. Another annoyance with stretchable pages relates to images. Because images are static we never know just how much of the dynamic page they will fill; for example it's not a simple process to have an image neatly spanning the exact width of the text. We can make images scale along with the page easily enough, but most browsers render the images poorly when they are not at their original size. Scalable images are just not an option for anyone demanding a slick, flawless look.

The fixed width layout

Fixed-width layouts are like giving up. One of the beauties of the web is it's liquidness, we should be embracing this property, not fighting against it. If a website is made too wide then many visitors with a small screen will have to scroll horizontally to see all the content, this is very bad for usability. Alternatively, if the page is too narrow then we are wasting valuable space on one or both sides.

Introducing the Floating Boxes CSS Layout

View The Floating Boxes CSS Layout demo page. With layouts such as this one we can solve all the problems experienced by the traditional web design layouts just mentioned. Because each box is floating, it's position is dynamic; on small screens the boxes will be pushed down the page neatly filling the available browser width; on a high resolution screen they will line up across the top of the page using all the space available. This means we always have as much content as possible 'above the fold'. With fixed-width boxes we will never have long unreadable lines of text and image sizes will always be predictable.

Try resizing your browser window on the demo page and see how it adjusts. Everything from 640 x 480 right up to 1600 x 1200 is displayed nicely without too much wasted space.

Another good thing with this design is the main content of the page appears at the start of the HTML document and progressivly less important content is found further down the code; this is good news for Search Engine Optimisation (SEO).

Browser Compatibility

The Floating Boxes CSS Layout has been tested on the following browsers:

Windows

  • Firefox 1.5 & 2
  • Opera 9
  • Explorer 5.5, 6 & 7
  • Netscape 8
  • Safari

Mac

  • Safari
  • Firefox

Extendability

Any number of boxes can be used and their sizes can be changed to suite a variety of different applications.


Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor