By Nick Butler
Tags: Development
Recently I have been using the “calc()” css property to add more precision to the fluid layouts I’m working on.
If I wanted a combination of fixed & flexible width columns incorporated into my designs, I can simply use “calc()”. In the past, creating this layout was highly difficult, but this has been made easy with “calc()”.
First, You set up the width of the fixed column, then you make the width of the fluid object 100%, then you subtract the styles that make up the total width of the fixed width object.
.fixedWidthElement {
width: 200px;
margin-right: 2em;
float: left;
}
.fluidWidthElement {
width: calc(100% - 200px - 2em);
float: right;
}
View the working example here
The “calc()” css property has a great range of support across all browsers, as you can view here.
To make sure you have all browsers supported, you can install Modernizr, which detects HTML5 and CSS3 features in the user’s browser. You will want to manually add the “css-calc” detection, which is under the “Non-core detects” drop down. Click here for a link to the custom build of Modernizr.
/*=======================================
Fallback for browsers with no support
=======================================*/
.fluidWidthElement {
width: 80%;
float: right;
}
.csscalc .fluidWidthElement {
width: calc(100% - 200px - 2em);
}
