Be the first user to complete this post Login To Mark Completed

0

Add to List Add To List..(Max 5) Close Save

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. center using css
2. Getting started with es6 iterators and iterables
3. css - align text to an image vertically
4. Getting started with localStorage vs sessionStorage in html5
5. Passing arguments from one function to another in javascript

---