html5 layout,HTML Layout

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

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.