Simple CSS Width Issue

Question

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

Sachin · Accepted Answer · 2014-06-11 19:01:18Z

3

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

answered Jun 11, 2014 at 19:01

Sachin

41.1k7 gold badges94 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3731438 Over a year ago

Thank you for the explanation and demo, it makes sense now.

goldins · Accepted Answer · 2014-06-11 19:01:20Z

0

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/

answered Jun 11, 2014 at 19:01

goldins

1,4061 gold badge12 silver badges14 bronze badges

Comments

Marcx · Accepted Answer · 2014-06-11 19:01:25Z

0

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/

answered Jun 11, 2014 at 19:01

Marcx

6,8365 gold badges50 silver badges69 bronze badges

Comments

Adjit · Accepted Answer · 2014-06-11 19:01:51Z

0

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/

answered Jun 11, 2014 at 19:01

Adjit

10.3k13 gold badges57 silver badges102 bronze badges

Comments

rdoyle720 · Accepted Answer · 2014-06-11 19:02:17Z

0

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.

answered Jun 11, 2014 at 19:02

rdoyle720

3,2003 gold badges20 silver badges19 bronze badges

Comments

Indranil Mondal · Accepted Answer · 2014-06-11 19:05:09Z

0

You need to reset the body.

body {

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

With your existing css.

answered Jun 11, 2014 at 19:05

Indranil Mondal

2,8673 gold badges29 silver badges42 bronze badges

Collectives™ on Stack Overflow

Simple CSS Width Issue

6 Answers 6

1 Comment

Comments

Comments

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

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

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

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related