Reputation: 283
i AM new to web development (1 month) and for some reason, a simple CSS issue i am finding hard to understand.
I have 2 DIVs:
<div class="full">
<div class="banner">
My Company logo/slogan
</div>
</div>
With CSS:
.full {
width: 100%;
}
.banner {
background: red;
height: 45px;
}
What i don't understanding is, why does DIV with banner not consume the entire page width? Even though its parent, full, has width: 100%
??
I have had to apply margin-left
and right
to take full width e.g:
Thanks
Upvotes: 1
Views: 134
Reputation: 2857
You need to reset the body.
body {
margin : 0px !important;
padding : 0px !important;
}
With your existing css.
Upvotes: 0
Reputation: 3130
Web pages by default have a little margin/padding. Most CSS starts with:
html, body {margin: 0; padding: 0}
By the way, if you did that, divs automatically expand to fit their parent containers, i.e. 100% width wouldn't be necessary.
Upvotes: 0
Reputation: 10305
All browsers inherently give certain elements styling.
Just add this CSS to your code :
* {
margin: 0;
padding: 0;
border: 0;
}
Some people leave out border, but I like to put it in because I find IE often adds a border to certain <a>
elements
Upvotes: 0
Reputation: 6836
You have to set width
on the banner div to 100%
.banner {
background: red;
height: 45px;
width: 100%;
}
And if you have some padding, set the padding and margin to html/body to 0.
body
{
padding: 0;
margin: 0;
}
Upvotes: 0
Reputation: 1376
This is because the browser applies padding inside a frame. You can overcome this by using a CSS Reset. In your case, simply adding * { padding: 0; margin: 0 }
works.
Upvotes: 0
Reputation: 40990
It is related with the User agent styles which every browser applies to the html elements by default. To avoid it we need to reset these values. Like in your case you need to reset these values for body element
body
{
padding:0;
margin:0;
}
Now try your code. it will work.
Upvotes: 3