CSSPLAY
Doing it with style
Doing it with style
This is the OUTSIDE box
This is the INSIDE box and it is
25% wide + 100px
and it is 25% wide
This box is 50% wide + 150px
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.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.
