Using CSS to Create 3 Columns from DIVs

Consider the following code where we have 3 DIV elements nested inside another DIV element:

<div id="container">
   <div id="col1">
      Col 1

   <div id="col2">

   <div id="col3">
      Col 3

To format such elements into 3 columns, we will use the following CSS code:

#container {
   background-color: White;
   float: left;
   width: 100%;
   border: 1px solid Black;

#col1 {
   background-color: Red;
   float: left;
   width: 20%;

#col2 {
   background-color: Blue;
   float: left;
   width: 60%;

#col3 {
   background-color: Green;
   float: left;
   width: 20%;

Click for Demo


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s