Saturday, December 20, 2014

Showing two DIVs side by side

Following the steps given below you will learn to show several divs side by side. 

 Step 01  Create both HTML & CSS file and link them

 Step 02  Add the DIVs inside the <body> and </body> tags
Now add the codes given below inside the <body> and </body> tags of the HTML file.

<div id="main">
<div id="left">Left DIV</div>
<div id="right">Right DIV</div>
</div>

I have used three DIVs above, the first one is the main DIV defined by the id="main" and another two DIVs are inside the main DIV.

 Step 03  Add the CSS codes to the .css file
Add the following CSS codes given below to the  file main.css (or the css file you have created).

#main{
display: -moz-box;
display: -webkit-box;
-moz-box-pack: center;
-webkit-box-pack: center;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
}

#left{
border: 1px solid #333;
width: 40%;
}

#right{
border: 1px solid #333;
width: 40%;
}

 Step 04  Save the works and check the result
Finally save both of the .html and .css files and open the .html file in a browser. There you will get two boxes positioned side by side.


Code Description


Main DIV
We have to use <div id="main"> and </div> for the main div. The attribute id is used to define this DIV. I have used main as the value but you may use anything you like. That means the line may be <div id="div1">. Even you may use the line <div class="main"> instead of the line <div id="main">.

In the .css file I have used the codes given below to format the main DIV. Look, I have used #main to target the div, but you have to use .main if you use <div class="main"> instead of the line <div id="main">. This is the main difference of using id=" " and class=" " attributes.

#main{
display: -moz-box;
display: -webkit-box;
-moz-box-pack: center;
-webkit-box-pack: center;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
}

We have to use the lines -moz-box-orient: horizontal; and -webkit-box-orient: horizontal; to show the DIVs horizontally lying inside the main div. You may also use vertical instead of horizontal to show the divs vertically.

Soon I will add a video here so that you all can understand these properly.


No comments:

Post a Comment