Stretching DIV totally across screen

Question

So, here's my situation:

I have a div (see the code below), a pretty simple . When running the code, I come up with a gray box. BUT, my intention was for that gray box to span from the start of the browser window to the END of that browser window, while what the code below does is creating a gray box with what seems to be a white border.

<div style="height: 30px; background-color: gray; color: white;">
   Hey
</div>

I'm sorry for the lack of explanation, but I found no good way to word what I was trying to do. Thanks in advance,

Tom.

without seeing more code I think about `width:100%;` did you try that? — Sergio, Jul 03 '13 at 17:23
Possible duplicate (just realized) of http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space?rq=1 — Christian Stewart, Jul 03 '13 at 17:25
Yeah, it still has a white border. I would recommend entering it into your localhost to see what's wrong. — Thomas Gouder, Jul 03 '13 at 17:25

score 3 · Answer 1 · answered Jul 03 '13 at 17:24

3

If you want a div to fill all available space use the following:

width: 100%; 
height: 100%;

You can define sizes in percentages of available space.

answered Jul 03 '13 at 17:24

Christian Stewart

15,217
20
82
139

score 2 · Answer 2 · answered Jul 03 '13 at 17:25

2

If I understand your correctly, you need width to be set to 100%

<div style="width: 100%; height: 30px; background-color: gray; color: white;">
   Hey
</div>

answered Jul 03 '13 at 17:25

Nikola

817
13
19

score 2 · Answer 3 · answered Jul 03 '13 at 17:25

2

Add width:100%; to say to the div to fill all the horizontal space.

answered Jul 03 '13 at 17:25

Sergio

28,539
11
85
132

Brian · Accepted Answer · 2013-07-03T17:31:57.940

2

If you want to keep you height:

<div style="height: 30px; width: 100%; background-color: gray; color: white;">
   Hey
</div>

Also to get rid of white borders, add this: body { padding: 0; margin: 0 }

edited Jul 03 '13 at 17:31

answered Jul 03 '13 at 17:25

Brian

4,958
8
40
56

1

You don't need quotes around 100% – Christian Stewart Jul 03 '13 at 17:25

starscape · Answer 5 · 2013-07-03T17:31:14.323

2

<head>  
<style>
    body {
        padding: 0;
        margin: 0;
    }
</style>
</head>

<body>
<div style="height: 30px; width: 100% background-color: gray; color: white;">
   Hey
</div>
</body>

I am assuming you want your div to be 30px high and the width all the way. To do that you just set the width of the div to 100% and make sure the body has no padding(this can shift your elements to the the right a little. I recommend using reset.css)

Hope this helps!

edited Jul 03 '13 at 17:31

answered Jul 03 '13 at 17:26

starscape

2,739
5
26
36

You should eliminate "px" after your sizes, I.E. `padding: 0;` as 0 needs no units. – Christian Stewart Jul 03 '13 at 17:27
This is the correct answer. The `body` has margins and or padding by default on most browsers. You need to zero it out, as shown here. Many people use a CSS Reset (e.g. Meyer's CSS Reset) to zero out all the little oddities like this and make all browsers start from a common point. – brentonstrine Jul 03 '13 at 17:30

Stretching DIV totally across screen

5 Answers5