Website Layout Techniques

    There are many different ways to structure a website, each with different pro’s and con’s. The four methods I am looking at today are:

• Tables
• Float
• Flexbox
• Framework

Tables

  Tables are the most basic method of structuring content, and they are coded natively in the HTML document, as opposed to linking a CSS file for your page structure. As expected, they allow you create rows and columns, which you can then fill with content in a linear, side-by-side layout. This is good for beginners, as it is a quick and easy way to give structure to a page.

A table layout, consisting of rows, columns, and merged cells

    Tables can use rowspan and colspan to merge cells together, allowing developers to create layouts that for example have one large cell, alongside four smaller cells that take up the same amount of space as the large one, as pictured above. This means that developers don’t have to have literally all of their content in basic rows and columns, and can use rowspan to create a sidebar element for example, but this is the extent of the flexibility that tables offer in a structuring sense.
    However, whilst tables offer a good basic structure, if you want to create a website with an interesting layout style, their rigidity won’t allow you to create anything other than the linear column and row layout. Furthermore, creating a whole page layout using a nesting table system that has multiple different colspan and rowspan elements will require a lot of code, which can make editing the code more difficult, and will also greatly increase the file size of each of your pages, increasing loading times for your pages.
  Nowadays, the only time tables get any use in web development is for tables that hold data, not for structuring pages.

Float

Used in conjunction with div’s, float allows you to create layouts of infinite combinations. The normal flow of a web page is that every cascades vertically, so usually all your content will follow one after the other. Float allows you to break this flow, and position any number of divs next to each other. Clearing this float then resets this break in the flow, and any content after the clear will resume the normal flow of the page.

A floated layout, with a two column structure

    The fact that floats allow you to break the flow of the page is both good and bad. The good part is obviously that it gives you plenty of control over the structure of your page, and if used correctly gives you infinite possibilities. However, the problem with floats is that they are altering the fundamental structure of the webpage, and this can throw up all kinds of problems such as inexplicable gaps in content, or disappearing containers where the parent of the floated elements shrinks to 0 height. Float’s also offer a lot of scope for human error, for you will need to work out widths, margins, padding otherwise elements will fall onto the next row, and also if you forget to clear all floated elements on a page then this will throw up structuring problems. 

  Float is a method that offers plenty of flexibility in creating layouts, but can quickly become unwieldy. Flexbox is a method that most industry pundits believe will see the end of float as a method of structuring pages, so it is only a matter of time before float is relic of the internet. 

Flexbox

Flexbox has two elements; flex containers, and flex items. By setting the width and height of the flex container, and determining the number of flex items in said container, flexbox will automatically structure the content. This method allows for quick and easy structuring, as there is no need to worry about floating and clearing element. 

From here, you can use CSS styles to format the spacing between elements inside the container, where inside the container the elements will fall (left, right, center, top, bottom etc), the direction of the content within the box (vertical, horizontal, reversed) and much more. These simple functions make positioning elements very simple, whereas with previous methods it would have been a very difficult and length process. 

Flexbox will become the most commonly used method of structuring on the web, as the need for flexible and responsive design increases. However for the time being, the browser support for flexbox isn’t wide enough for the method to be widely used, so it can’t be relied upon to produce consistent results across multiple platforms. This is a problem that over time will be solved, but is unfortunate for the time being.

Different flexbox functions and how they style the container

Frameworks

CSS frameworks are predefined libraries of code that you can use in your own web page to structure your elements in a specific way. Using frameworks allows you to create a well structured page quickly, without having to do all the legwork yourself by writing all the code. Common framework examples that are widely used are grid systems, that will give you the CSS code for a grid system of specific widths, heights and floats etc. 

Frameworks are good for rapidly prototyping a web page, which is good for getting a basic structure in place for you to then work around and tweak with your own styles. They also offer consistent and dependable results, as certain frameworks gain reputation and become common knowledge for developers as a place they can go to get  good code.

The issues with frameworks lie in the lack of control you have over the web page once you have chosen to implement a framework. The code provided may work, but everyone writes code differently, and unless you are particularly skilled at reading code then you will find it particularly difficult to go back into the code and edit.