View Full Version : div 100% width overshooting to the right?

12-14-2005, 12:50 PM
Hi Guys

Ive got a problem where ive got a 120px menu on the left hand side (floated or absolute doesnt make a difference) and then ive got a content div to the right of it to hold all the main content...

however when i set the percentage of this content div to 100% it overshoots to the right of the screen by an extra 120px

This happens on both IE and firefox. Ive tried creating a div for the content then a div within that to set the 100% precentage and that doesnt work, only fix can see is setting the content div width to 87% instead of 100% but it doesnt look very good when re-sized and not the ideal solution.

Any help would be much appreciated! Thanks

12-14-2005, 12:53 PM
Does the element that is too wide have padding or borders? because width of an element is the width of the content, padding and border are not included.

12-14-2005, 01:05 PM
The element that is too wide is just the div itself. There is no actual content within the div as of yet.

I can tell by setting the background colour of the div, then when previewed has scroll bars at the bottom where its overflowed to the right.

Css im using is..
div#content {
position: absolute;
top: 28px;
left: 120px;

12-14-2005, 01:25 PM
forgot to mention ive also tried replacing the 'left:120px' with 'margin-left:120px' and still no joy :confused:

12-14-2005, 02:10 PM
have you tried setting the width to 100% -120px;?

12-14-2005, 03:24 PM
lol silly me never even thought of that :)

yeh that works a lot better than using 87% width thanks!

Its still seems like a work around though, im sure that theres something else that could be done but thats the best solution so far so will use that for now cheers NancyJ!

12-22-2005, 12:05 AM
OK, to whoever sent me this message:

The info you gave here:


seems to be very much debated here:


After reading the second link, can you confirm (in either of those posts) whether the info you gave was actually correct or not?

Nothing in that link debates the correctness of the info I gave. All it shows is that there is more than one solution to any given problem when dealing with CSS layouts. The solution I provided works and is easy to implement, and thats the most important thing.