Be the first user to complete this post

  • 0
 Add to List

Two column layout in css

In this example, I will illustrate the basic markup necessary for creating two column layout using css. We will give a background color of #cdcdcd to our document so we can see the column layout. I have given a thin border of 1px to all the components so its easy to visualize.

body:

Has a width of 660px with margin set to auto which will make it a center aligned with a background color of #fff.

columns :

We will be using the float properties to create the two columns. float:left and float:right with appropriate margins to have enough space between them.

footer :

We need to clear the floats from the footer to place it at the bottom. [codepen_embed height="268" theme_id="0" slug_hash="xZqKQw" default_tab="result" user="kavitshah8"]See the Pen two column layout by Kavit Shah (@kavitshah8) on CodePen.[/codepen_embed]

Also Read:

  1. Applying floats to inline elements
  2. Getting started with automation testing for webrtc applications
  3. Applying floats and clearfix to block elements
  4. simple css reset
  5. Parse html response with fetch API