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.
Has a width of
660px with margin set to
auto which will make it a center aligned with a background color of
We will be using the float properties to create the two columns.
float:right with appropriate margins to have enough space between them.
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]