Working on revamping my ancient HTML skills... I'm making a 3 column liquid layout. I'm close to finishing the skeleton. Here are stumbles.

  1. I have 3 columns that I want want sized: 25%,50%,25% respectively. But in my case, since the L and R cols have a border of one pixel, I can only get theme to float correctly left if I set each to 24% (I'm assuming this compensates for the 1 pixel border in each. But then, if you expand the browser, there is a small gutter space in the rightmost column. why is this happening?

  2. In IE: I'm not able to see the padding I set around my images (works fine in FF/Saf,Chrome). Is there a fix for this? The gutter appears in the middle column.

Link to the code:

Link to graphic showing my issues:

Any suggestions are appreciated!

1 answer


What you're up against are the rules of the box model. In modern browsers, the default method of calculating the width of a block element is to add the width + padding + border + margin properties together.

Now because the specified width is the sum of these values, specifying a width as a percentage and then a border, padding and/or margin in pixels can produce undesired results as you've witnessed.

Ironically, our new and improved browsers can take a lesson from IE6 in this case! Microsoft implemented their own interpretation of the box model in IE that had a different approach to computing box sizes. They approached it with the idea that a specified width should hold true, regardless of these other properties and that these properties should be applied inward from the outer-box sizing. So width of 50%, border of 1 pixel and padding of 15px still results in a box that contains 50% of the page width. Eureka! So you're probably thinking "Yeah that's what I want to do!" -- Well, my friend, you're in luck.


* { box-sizing: border-box; }

What this simple and amazing css declaration will do is tell our fancy-pants browsers that they, too, should adopt this (some say better) box model and behave like the good old IE6 that we've all grown to hate and ridicule virtually ever day of our lives. :)

BEWARE, however -- there is a major catch-22 when using this solution. You'll come across css frameworks that utilize this approach to support fluid grids (i.e. Zurb Foundation) that don't support IE 7 -- and there's a reason. Microsoft was ridiculed and dealing with a lot of negative PR in the development community back in the day because their approach of the box model was different and made it harder for developers to standardize styles and actually removed the feature when they released IE7! They realized too late though, that they were in fact onto something great that people really needed to have and added it back into IE 8, 9 and beyond. So this fixes up everything except IE7 (which a lot of people are considering an acceptable sacrifice at this point in the game). Make sure this approach fits the needs of your audience of users and try and justify your decision with analytic data that supports using this method.


Answered almost 5 years ago by Gary Hepting