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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2011
    Location
    Utah
    Posts
    37
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Div Cutting Off Part of My Page

    I am having a weird problem with a page I am designing. I have simplified my page to find what is causing the problem.

    If you condense your browser window and use the horizontal scroll bar, you will notice that the .line div (thiner line with a background of black) gets cut off. Can anyone explain to me why this happens and how to fix it? I would like the .line div to go on forever.

    http://dl.dropbox.com/u/14080718/testing/line.html

    I am a beginner designer and its probably something simple, but I cant figure it out and my page is kind of at a stand still until I do.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I honestly never understood this, but I believe it has something to do with margin: 0 auto;
    I typically set containers with min-width: ; for the header, content, and footer.

    I believe this fixes it:
    Code:
    .line { min-width: 50em; }
    I believe it is because the nav with width of 50em is setting the 100% width of the parent, when we say min-width, we are allowing it to go past the set 100%, along with margin: 0 auto;
    I remember reading about this a long time ago, and now that I can fix it, I don't remember why
    Don't worry about it, it's something you learn how to fix in time
    Last edited by Sammy12; 11-01-2011 at 01:06 AM.

  • Users who have thanked Sammy12 for this post:

    NateG (11-01-2011)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello again NateG,
    try setting .line to min-width: 50em;
    Note: IE6 and earlier versions does not support the min-width property.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    NateG (11-01-2011)

  • #4
    New Coder
    Join Date
    Oct 2011
    Location
    Utah
    Posts
    37
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Worked like a charm! Sammy12 you are awesome!

    I would however, like to understand why it worked. Does anyone know why min-width would let the line go one forever?

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I think this is why, and it may be wrong but I'm going to explain it in my own words:


    the width of the parent is dependent on the width of its children.
    your <nav> has a margin: 0 auto; width: 50em; which is restricing the width of the parent to 50em; therefore all its children (.line) have a set width of 50em
    by setting .line to min-width: 50em; you are breaking that rule that it is set at 50em;


    as I said before, I'm not a 100% sure, and I can't find the article I read a while ago. realize that even the google homepage has this problem

  • Users who have thanked Sammy12 for this post:

    NateG (11-01-2011)


  •  

    Posting Permissions

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