Link Search Menu Expand Document

CSS Layout

Table of contents

  1. Layout Techniques
    1. Layout five different ways
    2. Layout Properties

Layout Techniques

Layout five different ways

  • HTML tables

    Do NOT use tables for your page layout!

  • Float property

    common to do entire web layouts using the float property

    Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.

  • Flexbox - flexible design

    Flexbox is a new layout mode in CSS3.

  • Framework

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

  • 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.

Layout Properties

  • Display

  • Position

  • Z-index

  • Overflow

  • Float

  • Align

  • Flexbox


Table of contents


이 웹사이트는 jekyll로 제작되었습니다. Patrick Marsceill, Distributed by an MIT license.