0

I'm laying out a website design and I have run into an error...

The html element is assigned a fixed width of 800px, the body element ID 'page' will not take up 100% width no matter what I try?

Heres the code...

<html>
<body id="page" >
    / content /
</body>
</html>


html {
    width: 800px;
    margin:0;
    padding:0;
}

#page {

}

I have tried setting the #page to 'width:800px', 'width:100%', 'margin:0', 'margin:0 auto', etc. but no matter what there is always a 1px gap on the right side of #page. I've even tried setting 'width:801px' which didn't work, as well as setting the relative position left 1px in case it was overflowing left for some reason, but it's not...

Am I missing something stupid, is the program I am using buggy, or is it something else? Where I am from, 800px is the same as 800px so what's going on?

Thanks guys....

EDIT: So, going back through previous projects I discovered what works for me. Whether it be the program I am using(free), or just something I'm missing this is what works for me and so resolves my issue.

<html>
<body>
/ content /
</body>
</html>

html {
    width: 800px;
}

body {
    margin: 0;
}
mrkd1991
  • 388
  • 1
  • 3
  • 15

2 Answers2

0

There's probably some extra css sneaking in somewhere. Check for any border property on your #page element.

Run this snippet, and there shouldn't be a single pixel gap.

html {
  width: 800px;
  background: lightgrey;
}

#page {
  margin: 0;
  border: none;
  background: yellow;
}
<html>

<body id="page">
  / content /
</body>

</html>
Håken Lid
  • 22,318
  • 9
  • 52
  • 67
  • The css shown above is literally all there is, but I tried your suggestion with no luck unfortunately. – mrkd1991 Sep 13 '17 at 04:15
0

it appears you are running into an inconsistency problem in the way browsers inject scrollbars into the page, see here:

Styling the `<html>` element in CSS?

I would start by using a css reset like normalize.css to get cross-browser consistency in behaviour then use your custom styles from there. Personally I never style the html element and work from the body down. Working like that I dont encounter these kinds of problems becuase they are dealt with by normalize.css.

Anthony Cregan
  • 960
  • 11
  • 25
  • I've never had this issue previously, so a css reset shouldn't be necessary(for now). I've looked back over previous works and found that the styling only works for me by setting the width of html and a 0 margin on body. I'll update my post with the 'answer'. – mrkd1991 Sep 13 '17 at 04:30
  • OK, but perhaps give it a try: Remove your own html styles, add normaliser, then style as required. If you style from the body down then normalize.css should ensure the correct behaviour on your html element. – Anthony Cregan Sep 13 '17 at 09:19