Best way to represent 1/3rd of 100% in CSS?
I have a big <div>
with three little <div>
's inside of it, inline. They each have 33% width, but that causes some alignment problems because 3 * 33% != 100%. What is the best way to represent a perfect third in CSS like this? Maybe just 33.33%?
Now that calc
is widely supported among modern browsers, you can use:
#myDiv {
width: calc(100% / 3);
}
Or you can use this as a fallback if your browser wouldn't support it:
#myDivWithFallback {
width: 33.33%;
width: calc(100% / 3);
}
Are you making any allowance for margins? You could go 30% per column with 5% margin either side of the center column.
Quick example
.col_1_3 {
width: 33%;
float: left;
}
.col_1_3:nth-of-type(even) {
width: 34%;
}