How to make a
full width to the browser edge?

Question

I have created a quick example of a problem I am having. As noted by the black border the div isn't going directly to the horizontal edge of the browser (screenshot). Here is the relevant code.

border: 1px solid black;
display: block;
width: 100%;
height: 50px;

How can I change this?

Remove margins from body and remember to use search, you would've found the answer faster than typing up this question. — Etheryte, Jun 10 '15 at 22:13
Check any base stylesheets. You might need to apply a CSS Reset: http://meyerweb.com/eric/tools/css/reset/ — BJ Safdie, Jun 10 '15 at 22:14
All of the answers are covered. You might need to remove padding/margins from and/or or just nuke it and apply a reset. @Nit -- way to Nit Pick! :-) — BJ Safdie, Jun 10 '15 at 22:23

score 4 · Accepted Answer · answered Jun 10 '15 at 22:13

4

You'll just need to reset the default margin values from the browser default stylesheet.

body {
    margin: 0;
}

answered Jun 10 '15 at 22:13

Stickers

75,527
23
147
186

score 2 · Answer 2 · answered Jun 10 '15 at 22:13

2

Html-pages have margin by default. Remove it:

html{margin:0}

answered Jun 10 '15 at 22:13

Okku

7,468
4
30
43

Claudiu Creanga · Answer 3 · 2015-06-10T22:15:47.893

html,body{margin:0} or try more complex reset styles like the one below. It will save you a lot of time in the future when checking inconsistencies between browsers:

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;
}

Completely unnecessary for what was asked. – Etheryte Jun 10 '15 at 22:14 — Etheryte, Jun 10 '15 at 22:14

How to make a full width to the browser edge?

3 Answers3

How to make a
full width to the browser edge?