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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Location
    Somewhere
    Posts
    103
    Thanks
    4
    Thanked 3 Times in 3 Posts

    Help me find why "section" tag = too wide on right?

    I'm trying to track down why my page section (the main text) is wider than the rest of it. It used to be fine. I was adding new pages and added a bit of padding in the nav bar ('primary menu' in the first CSS page), and I'm not sure what happened to mess up the sections.

    I've run some string searches to check for syntax errors and am coming up blank, and I'm not finding any missing closing tags.

    To me, it looks like an issue with the width attribute or a margin, but I'm not seeing it. Look on the right of the page—the border should be going all the way down.

    Problem fixed. Links removed.

    Thanks!
    Last edited by Carradee; 10-02-2013 at 06:35 PM. Reason: Resolved

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    It's because of this css:

    Code:
    section {
        float: left;
        padding: 2em;
        width: 100%;
    }
    padding is added to width, so the whole width becomes 100%+4em and is wider than its container.

    I'd take both the width and the float off this (no reason to float here I think), and that should fix it.
    Last edited by SB65; 10-02-2013 at 04:58 PM.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    Carradee (10-02-2013)

  • #3
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    This is what happens when people learn HTML/CSS without learning the box model.

    You made the width 100%. Then you added a padding of 2em on top of it. That's why the width is 4em (2em on each side) wider than it should be.

    There are a few ways to fix this, but this would probably be the simplest solution:

    Take out the width or change it to auto.

    To understand why, learn about the box model. Whoever taught you HTML/CSS probably left that out (because so many people do) when it is one of the most fundamental concepts.

    Long time ago, IE used to use the much more intuitive method of having the width and height include the padding and border. But, this wasn't the standard method. This is called "border-box" box model.

    The standard method is called the "content-box" box model. The width only measures the content itself, without the padding and border.
    My signature :)

  • Users who have thanked ttkim for this post:

    Carradee (10-02-2013)

  • #4
    Regular Coder
    Join Date
    Oct 2006
    Location
    Somewhere
    Posts
    103
    Thanks
    4
    Thanked 3 Times in 3 Posts
    Oh! I completely forgot that width added to padding. *facepalm*

    The float is a provision for further pages on the site, for when I use "aside".

    Thanks!


  •  

    Tags for this Thread

    Posting Permissions

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