Information
At last a use for my 'Border Writing' ... Hoorah.
I have been asked the following question many, many times over the last year or two:
Is it possible to set the size of a div by adding a percentage value and a pixel value, for instance 25% + 200 pixels?
And my answer has always been 'NO'.
Well, now I have changed my mind. Adapting my 'border writing' example I now have a way of defining just such div sizes.
It is possible using a nested outer and inner div where the inner div is LARGER than the outer one. How?... by using negative margins, that's how.
The OUTER div is used to set the percentage width, and the inner div is used to set the extra pixel width by using negative left/right margins that total the additional pixel value.
So a width of 20% PLUS 200px is set up using an outer div with width 20% and an inner div with left/right margins of -100px each (or a right margin of -200px and a left margin of 0px).
The only major problem with this is that IE doesn't fully understand the technique, but with a bit of coaxing it too can be made to display correctly. All that is needed is to make the inner div into an 'inline-block' and voila! IE conforms.
The following link gives several examples for you to play with. Resize your browser window to see the divs resize at different rates. An extra bonus to this method is that the divs take on a minimum width value equal to the pixel width. I have given the outer div a top 5px black border to show how the percentage width reduces whilst the pixel width stays the same.
Works in IE5.5, IE6, IE7, FF, Opera on a PC. Mac browsers not tested, but would appreciate feedback.
Copyright
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
Testimonial
"The 
web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth
