Be the first user to complete this post
|
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 of660px
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:
- How to set a box shadow on left or right only or just on a single slide
- imperative vs declarative/functional programming
- box-sizing
- The JavaScript Prototype Property - Visualized
- css : center element vertically and horizontally