Flexible Box Model
The flexible model allows us to get away from the floats. It will wrap according to the properties.Let’s create a simple two-column layout.
HTML:
<div id="container">
<div id="column1"> Column1content here </div>
<div id="column2"> Column2 content here </div>
</div>
Syntax: css
#container {
background: none repeat scroll 0 0 #EEEEEE;
display: -moz-box;
height: 350px;
margin: auto;
width: 870px;
}
#column1 {background: #33FFFF ;}
#column2 {background: #9900CC ;}
Example:
When we fix width of the content area #column1, let see what will happen.
Syntax: css
#column1 {background: #33FFFF; width: 700px ;}
Example:
Note:
Still the second column hasn’t taken all of the remaining space. By using the new box-flex property, the instruct element will take up all available space.
Syntax:
#column2{background:#9900CC;display: block; /* cause is HTML5 element */
/* take up all available space */
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
Example:
