...

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



dl_whitehouse
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

mrruben5
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.

dl_whitehouse
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;
width:100%;
background-color:#F60;
}
------------------

dl_whitehouse
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:

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

dl_whitehouse
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!

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


The info you gave here:

http://www.codingforums.com/showthread.php?p=385706#post385723

seems to be very much debated here:

http://www.tek-tips.com/viewthread.cfm?qid=1165011&page=1

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum