I have a little "floating" menu type thing to the left of a profile displaying some info and it looks good, however i used a different pc before and it was overlapping the main page body (due to screen resolution).

So this is the original CSS(with CSS3 fancy stuff stripped out):

position: absolute;
border: 1px solid #73a7f0;
width: 200px;
left:10px;
top: 160px;
padding: 5px 14px;
border-radius: 4px;

and this is what i am trying to do, the line that has changed is:

width: 10%;

Any ideas how it can look the same depending on screens?

Thanks!

I have a little "floating" menu type thing to the left of a profile displaying some info and it looks good, however i used a different pc before and it was overlapping the main page body (due to screen resolution).

So this is the original CSS(with CSS3 fancy stuff stripped out):

position: absolute;
border: 1px solid #73a7f0;
width: 200px;
left:10px;
top: 160px;
padding: 5px 14px;
border-radius: 4px;

and this is what i am trying to do, the line that has changed is:

width: 10%;

Any ideas how it can look the same depending on screens?

Thanks!

• javascript
• html
• css

• What's wrong with width: 10%;? – Alexander Pavlov Commented Mar 6, 2012 at 16:35

2 Answers 2

Diodeus' answer is true if the container has static positioning. If the container has a width set, even a percentage width, and the container has a position other than static (the default), the child will use that as the context for its percentage width.

Fiddle here: http://jsfiddle/USJnN/

Absolutely-positioned elements are no longer part of the layout. When a width is specified for a block element, the width is relative to its container. Without a fixed-sized container, a percentage doesn't really have a size context other than the browser window, which is variable.

Using a width in pixels is what you need in this situation.