Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div 100% width overshooting to the right?

    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

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    CATdude about IE6: "All your box-model are belong to us"

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    }
    ------------------

  • #4
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    forgot to mention ive also tried replacing the 'left:120px' with 'margin-left:120px' and still no joy

  • #5
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,169
    Thanks
    19
    Thanked 65 Times in 64 Posts
    have you tried setting the width to 100% -120px;?

  • #6
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #7
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,169
    Thanks
    19
    Thanked 65 Times in 64 Posts
    OK, to whoever sent me this message:

    The info you gave here:

    http://www.codingforums.com/showthre...706#post385723

    seems to be very much debated here:

    http://www.tek-tips.com/viewthread.c...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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •