Percentage Plus Pixel Sizing

Pre 2006

This is the OUTSIDE box

Thinking outside the box

This is the INSIDE box and it is
25% wide + 100px

and it is 25% wide

Thinking outside the box

This box is 50% wide + 150px


Copyright © stu nicholls - CSS play


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.

Example divs

Works in IE5.5, IE6, IE7, FF, Opera on a PC. Mac browsers not tested, but would appreciate feedback.


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.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.

Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.

Follow CSS play

Facebook   Twitter   Facebook Fan Page