CODEWITHSUNDEEP
htmlcss
user3731438
user3731438

Reputation: 283

Simple CSS Width Issue

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:

http://jsfiddle.net/4eaGv/2/

Thanks

Upvotes: 1

Views: 136

Answers (6)

Indranil Mondal
Indranil Mondal

Reputation: 2857

You need to reset the body.

body {

margin : 0px !important;
 padding : 0px !important;
}

With your existing css.

Upvotes: 0

rdoyle720
rdoyle720

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

Adjit
Adjit

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

Updated fiddle : http://jsfiddle.net/4eaGv/3/

Upvotes: 0

Marcx
Marcx

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

http://jsfiddle.net/4eaGv/4/

Upvotes: 0

goldins
goldins

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.

http://jsfiddle.net/4eaGv/6/

Upvotes: 0

Sachin
Sachin

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.

Demo

Upvotes: 3

Related Questions