Width: 100% - Problem in Firefox

Discussion in 'CSS' started by jorgy, Apr 17, 2008.

  1. #1
    I've noticed that when you set the width of a div to 100%, often Firefox will show a horizontal scroll bar, as if the div is wider than the page. This isn't the first time I've had to deal with this issue, so I'm wondering if anyone has a quick fix?
     
    jorgy, Apr 17, 2008 IP
  2. Bagi Zoltán

    Bagi Zoltán Well-Known Member

    Messages:
    364
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    110
    #2
    I suppose it is because there is no padding:0 and margin:0 set for the containing div.
     
    Bagi Zoltán, Apr 18, 2008 IP
  3. itcn

    itcn Well-Known Member

    Messages:
    795
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    118
    #3
    That is not true, I have sites where the containing body div is 100% and I don't get a horiz. scroll bar. Paste the rest of your code, must be something else.
     
    itcn, Apr 21, 2008 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Agreed. Post the code.
     
    Dan Schulz, Apr 23, 2008 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I guess whatever is set at 100% you have added either a padding, margin or border to it.. thus meaning 100%+padding/margin/border.
     
    wd_2k6, Apr 23, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I agree, so far as I can without seeing code. Zoltan got it, I think with sarcasm?
    Cause I've been bitten by this myself. Someone had to point out to me that I started with 100% width and then tried to make it wider by adding padding to the sides. I thought padding just moved content away from the edge. Well, it does, and it's inside the "edge" of the div, but it's added on TOP of the div's original (content) width.

    Except in IE5.5 and below.
     
    Stomme poes, Apr 23, 2008 IP
  7. pipes

    pipes Prominent Member

    Messages:
    12,766
    Likes Received:
    958
    Best Answers:
    0
    Trophy Points:
    360
    #7
    Something ive learned today when someone was helping me sort a few things, i made this same mistake, ive still so much to learn though. :eek:
     
    pipes, Apr 26, 2008 IP
  8. Bagi Zoltán

    Bagi Zoltán Well-Known Member

    Messages:
    364
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    110
    #8
    Guys, I designed so far many websites all with external css. I faced with tons of problem. Of course I might be wrong, but behind my statement there was pure experience.

    The math is as simple as wd_2k6 posted..

     
    Bagi Zoltán, Apr 27, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    ^ pretty much. Although normally, with something that isn't 100% wide, then for "width" we're only counting content, padding and border, as technically the margins are on the outside... but, yeah.
     
    Stomme poes, Apr 28, 2008 IP
  10. St. Anger

    St. Anger Banned

    Messages:
    211
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Try adding paddings and margins.
    it might solve the problem.
     
    St. Anger, Apr 28, 2008 IP
  11. ein2310

    ein2310 Peon

    Messages:
    98
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    In my opinion: Total Width = 100% + padding + margin + border, This rule is works on all browser. If want to add padding/margin/border in the box, try to add an extra div inside it and apply the padding/margin/border in that extra div.
     
    ein2310, Apr 28, 2008 IP