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. imperative vs declarative/functional programming
  2. Using css3 calc in an attribute value to compute its value at runtime
  3. Applying floats to inline elements
  4. css specificity interview question
  5. Difference between async and defer attributes in script tags