div inside another div

first let us create a simple div element with a red border using a simple css, that will be the main div.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
 
<style>
.box1{
   width:400px;
   height:100px;
   background:#D7E5F0;
   border:.1em solid red;
   padding:10px;
   }
</style>

<body>
<div id="div1" class="box1">main div</div>
</body>

main div


I will add four divs inside the main div, floating two of them to the left, others to the right by using float property, and using padding property to make some distance between div elements. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<style>
.main_box{
   width:400px;
   height:100px;
   background:#D7E5F0;
   border:.1em solid red;
   padding:10px;
   }

 .inner_box{
   width:40px;
   height:30px;
   background:#FFF0F0;
   border:.1em dotted green;
   padding:10px;
   margin:10px;
   font-size:12px;
   color: black;
   font-weight: bold;
   }
   
 .left_box{
   float: left;
   }

 .right_box{
   float: right;
   }   
</style>

<body>
<div id="div1" class="main_box">
   <div id="div_a" class="inner_box left_box">A</div>
   <div id="div_b" class="inner_box left_box">B</div>
   <div id="div_c" class="inner_box right_box">C</div>
   <div id="div_d" class="inner_box right_box">D</div>
</div> 
</body>

A
left
B
left
C
right
D
right


How to expand the main container div.
the last example was good to show how to put some elements inside the main div, but what if the inner elements were big and the main div height didn't expand to still hold them.
A
left
B
height:100px;
C
right
D
right


in the case we should replace the fixed height of the main div with the
display: inline-block; property. 
 1
 2
 3
 4
 5
 6
 7
 8
 9

<style>
.box1{
   width:400px;
   display:inline-block;
   background:#D7E5F0;
   border:.1em solid red;
   padding:10px;
   }
</style>


A
left
B
height:100px;
C
right
D
right


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 )