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>

   <div id="col2">
      Col2
   </div>

   <div id="col3">
      Col 3
   </div>
</div>

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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s