Div Not Filling Page?

nickolas80 · Sep 28, 2005

I have a DIV which I want to completely go from one side of the page to
the other, with not whitespace or margins. I can not seem to get it to
work, it is flush on the left, but leaves about 15px of whitespace on
the right side.

Here is my CSS:

#MidBar {
position: absolute;
height: 50px;
width: 100%;
left: 0px;
top: 110px;
background-color: #0066CC;
right: 0px;
}

and my div:

<div class="MidBar" id="MidBar"></div>

any suggestions?

Els · Sep 28, 2005

I have a DIV which I want to completely go from one side of the page to
the other, with not whitespace or margins. I can not seem to get it to
work, it is flush on the left, but leaves about 15px of whitespace on
the right side.

Here is my CSS:

#MidBar {
position: absolute;
height: 50px;
width: 100%;
left: 0px;
top: 110px;
background-color: #0066CC;
right: 0px;
}

and my div:

<div class="MidBar" id="MidBar"></div>

any suggestions?

Yes, I have two.
One: leave out the width, and the 'right' property. Any div by default
automagically stretches to 100% of what's the available width for it.
Two: the 15px space is probably the padding or margin on <html> or
<body>.
Add this to your styles:
html,body{margin:0;padding:0;}
and see if that helps. If it doesn't, you'll need to show an actual
example of your problem, for further investigation

(and Three: I hope this div isn't meant to have text in it, and also
doesn't have text above it)

Leif K-Brooks · Sep 28, 2005

Els said:
Any div by default automagically stretches to 100% of what's the
available width for it.

Not when absolute positioning is applied.

Els · Sep 28, 2005

Leif said:
Not when absolute positioning is applied.

You're right, didn't realize that.

Neredbojias · Sep 28, 2005

With neither quill nor qualm, (e-mail address removed) quothed:

I have a DIV which I want to completely go from one side of the page to
the other, with not whitespace or margins. I can not seem to get it to
work, it is flush on the left, but leaves about 15px of whitespace on
the right side.

Here is my CSS:

#MidBar {
position: absolute;
height: 50px;
width: 100%;
left: 0px;
top: 110px;
background-color: #0066CC;
right: 0px;
}

and my div:

<div class="MidBar" id="MidBar"></div>

any suggestions?

Did you check in more than 1 browser and see the same effect? Els
suggestion of setting the margins and padding to 0 is a must, but IE can
react strangely to some css.

Help with my responsive home page	2	Dec 14, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Justify-content not working	1	Mar 29, 2021
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
Gallery - mosiac/grid layout with filtering and information page popup	1	Apr 13, 2020
Trouble with css	4	Mar 20, 2020
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Why is the e.target not working here?	1	Dec 29, 2022

Div Not Filling Page?

nickolas80

Els

Leif K-Brooks

Els

Neredbojias

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads