Pixel Border and Percentage width in Proportion

Question

I think I might already know the answer to this one but I need a sanity check!

Say I have

#gridtest{
width:590px;
}

I could change the width to a percentage by using RESULT=TARGET/CONTEXT. In this case the context is a container with a max-width set to 1000px so I can do this:

#gridtestpercent{
width:59%; /*590/1000*/
}

If I were to shrink the window down the div would always be in the proportion to the its container. But what if I wanted to do

#gridtest{
width:570px;
border:10px solid red;
}

I can work the width out based on the target now being 570 but as the window is shrunk the proportions all go out of sync.

#gridtestpercentnoborder{
width:57%; /*570/1000*/
border:10px solid red;
}

I can't use percentage border. I don't want to use JS to keep checking the context and I can't use the CSS3 box-border declaration yet.

If I wanted to use the technique described in responsive web design by Ethan Marcotte where everything shrinks in relation to each other would I be out of luck if using a border?

Cheers!

Answer 1

You could use an inset box-shadow instead of a border:

box-shadow: 0px 0px 0px 10px red inset;

Just pad the inside of the container to compensate.

Edit: I write "pad" but of course if you use padding it'll throw off the box dimensions. Margin the content inside instead.

Answer 2

This link gives nice explanation on two solutions for this problem:

http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/