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
First of all create a simple webpage, later create a CSS file and link that to the HTML file.
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.
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.
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.
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