how to put multiple divs on the same line.

first let us create a simple div element with a red border using a simple css.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<style>
.box1{
 width:20px;
 height:20px;
 font-size: 12px;
 color:black;
 background:#D7E5F0;
 border:.1em solid red;
 padding:30px;
 font-weight: bold;
    }
</style>

<body>
<div id="div1" class="box1">
Div 1.
</div>

Div 1.


if we add another div element, it will appear under the the first one
Div 1.
Div 2.

to put a multiple divs on the same line we will add float property (left or right)for all divs wen want to put on the same line.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<style>
.box1{
 width:20px;
 height:20px;
 font-size: 12px;
 color:black;
 background:#D7E5F0;
 border:.1em solid red;
 padding:30px;
 font-weight: bold;
 float: left;
    }
</style>

<body>
<div id="div1" class="box1">Div 1.</div>
<div id="div2" class="box1">Div 2.</div>
<div id="div3" class="box1">Div 3.</div>
<div id="div4" class="box1">Div 4.</div>
</body>

float : left;
Div 1.
Div 2.
Div 3.
Div 4.





I will add margin to right of each div to make small distance between them.
margin-right : 10px;

Div 1.
Div 2.
Div 3.
Div 4.




If this post was good and helpful for you, Please give it Like.
.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )