CSS3 Box Sizing

Defining the main div Container and sizing the div boxes in it virtually to create the layout of pages.

CSS allows us to define box sizing virtually. Like we can create two main containers for example as the main contents and side bar. We can fix the width and height of these containers and can paste contents in them so they well be arranged accordingly.

In this article we will learn to size the div box using arguments in percentage. Lets start.

1
2
3
4
5
6
7
8
.container {
}

.box {
}

We have defined the two blocks, Container will contain the div boxes in it. So we may call container as parent and box as child.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container {
             width:450px;
}

.box {
      box-sizing: border-box;
     -moz-box-sizing: border-box; /* Firefox */
     -webkit-box-sizing: border-box; /* Safari */
}

We added the main width of container so the div with class box can use maximum 450px in width.
In box block we defined the CSS property Box-sizing and webkits for Opera and Mozilla Browsers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container {
             width:450px;
}

.box {
      box-sizing: border-box;
     -moz-box-sizing: border-box; /* Firefox */
     -webkit-box-sizing: border-box; /* Safari */
      width:50%;
}

We added the width property in box block of CSS. So whoever div uses this class will optimize itself to 50% width of the total width of the container. Lets decorate it a little to make it feel better.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container {
             width:450px;
}

.box {
      box-sizing: border-box;
     -moz-box-sizing: border-box; /* Firefox */
     -webkit-box-sizing: border-box; /* Safari */
      width:50%;
      border:2px solid green;
      float:left;
}

2 pixels are added as solid green border of the div and float is set to left, we can use float in container div as well to make it stick to the desired location but i will go with simple code right now.

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
<style type="text/css">
.container {
             width:450px;
}

.box {
      box-sizing: border-box;
     -moz-box-sizing: border-box; /* Firefox */
     -webkit-box-sizing: border-box; /* Safari */
      width:50%;
      border:2px solid green;
      float:left;
}
</style>

<div class="container">
<div class="box">This div get the left half.</div>
<div class="box" style="color:#a0f;">This div get the rite half.</div>
</div>

With the help of HTML we can use these CSS classes and make some thing like following

Example:



Related posts

Tags: , , , , , ,

No Response

Post your response

Copyright © 2010 - 2014 Handy CSS Designed By Anotix, Powered By WordPress, all right reserved.