19

I'm developing a webpage and I noticed this issue.

body full width issue print screen Please, post anything you get in mind it will be very helpful!

Check the website here

EDIT: Added the website link

1
  • add clear:both; where you have use the float:property
    – Ashish sah
    Feb 16, 2018 at 2:11

11 Answers 11

25

Might want to check if this might work, it did for my particular issue.

body {
    min-width: fit-content;
}

Added the answer of John Mcnulty as an paste because weblinks might go as 404. And this actually helped a bit to normalize the css without having browsers put their own css in it.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
1
  • 1
    I don't know why the body wasn't respecting the width and had to force a min-width: fit-content but it worked... Dec 6, 2020 at 18:06
10

you need to use CSS reset:

use this code:

body, html{
    margin:0;
    padding:0;
}

all element have some style in default you need to reset them.

2
  • I don't know why this will be the problem since I'm using normalize to reset all my css.
    – Cald
    Dec 5, 2013 at 13:20
  • 1
    @Cald i need to see you html and css, can you create a online demo ? Dec 5, 2013 at 13:26
2

try this

body
{
margin:0px;
padding:0px;
width:100%;
}
1
  • 2
    Just as a tip, you should not specify a unit when setting a property to 0. It is unnecessary.
    – Bobort
    Jul 6, 2018 at 15:39
2

Ähm, your div.container has a width of 970px. And this breaks your body width because your layout isn't fluid. Use media queries or procentual widths will help a lot.

2

Though this is a very old issue, I have personally run into this thread twice without being able to resolve this issue (I keep forgetting what I did to fix it). For future viewers (me included) where setting padding and margin to 0 didn't magically fix your problem try "position: fixed" in the body.

body {
  position: fixed;
  overflow-y: scroll;
  padding: 0;
  margin: 0;
  width: 100%;
}
1

Maybe some clear:both; that are missing..

Up : It's probably not that, but maybe other sub-elements block width and does not allow the page to take its total width. If you have any float should think about making a clear before the footer (as I see a div on the right).

See your html / css code would be better :)

2
  • 1
    Please expand on where and why clear:both; may be missing, and give a link to relevant articles/documentation.
    – arne
    Dec 5, 2013 at 13:34
  • that was really a perfect answer, That happenes due to clear both
    – Ashish sah
    Feb 16, 2018 at 2:10
0

set the max-width of your image using the percent, rather than pixel, rem, em, etc.

.resizable-img {
    max-width: 100%;
 }
0

Ok so this worked for me:

    -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

My padding on sections of 100% was adding the padding to the page width resulting in width 100% + (padding value * 2)

-1

Have you included a CSS reset in your page?

http://meyerweb.com/eric/tools/css/reset/

3
  • Yes I did. I'm using normalize!
    – Cald
    Dec 5, 2013 at 13:12
  • @Cald good practice but Normalize.css does not put the width of <html> and <body> to 100%. Dec 5, 2013 at 13:14
  • @ArnaudDenoyelle I know that but I did it myself in my less file! body, html {min-width: 100%; width: 100%; font-size: 1em;}
    – Cald
    Dec 5, 2013 at 13:16
-2

if you don't need responsive or fluid design(mentioned in other answers), final solution is to set minimum width for body.

set min-width on body to the most wide element width(in most cases - .container) and remove width and min-width form html element.

body {
    width:100%;        
    min-width:980px;
}

you must expect that you will lose customers when your design is non-responsive

-5

The issue persist only if you resized the Browser window. As its not breaking the website, You could leave that issue.

or

If you are creating a non-responsive site, You can do this simply by adding specific width to html and body. something like this

html, body {
  width:1170px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.