HTML Layout Elements

HTML Layout Techniques

There are five different ways to create multicolumn layouts. Each way has its pros and cons:

HTML tables (not recommended)  -- The <table> element was not designed to be a layout tool! The purpose of the <table> element is to display tabular data. So, do not use tables for your page layout! They will bring a mess into your code. And imagine how hard it will be to redesign your site after a couple of months.

CSS float property -- If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.

CSS floats -- It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.

CSS flexbox -- Flexbox is a new layout mode in CSS3. Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier.

Learn more about flexbox in our CSS Flexbox chapter.

CSS framework -- 

CSS grid -- The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Disadvantages: Does not work in IE nor in Edge 15 and earlier. Learn more about CSS grids in our CSS Grid View chapter.