treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Div doesn't reach edge of browser page

  • Okay, I've tried searching for this and I apologize if this has already been answered, but here's my question:



    When I create a div say, like this:
    <div style="height:25px; width:100%; background-color:blue">
    </div>




    It should just be a blue bar across the page, right? the thing is, I get white space around it. It doesn't extend all the way to the edges. It has like a 10px space on top and a 15 px space on either side. I thought that all the padding/margin/border and stuff should automatically be 0 so I don't have to worry about it. Is there something I need to put in to get it to go all the way?



    I can provide a screenshot if necessary...
  • Default browser behavior probably - look up CSS resets :D



    html, body {

    margin:0;
    padding:0;

    }

  • A browser put some standard margins and paddings on elements. You must reset them, look for the code on the post above.

    Better is to reset youre hole CSS and then build op youre own styles. A good css reset is: http://meyerweb.com/eric/tools/css/reset/

    You use inline style (height, style, width attributes). This isn't a very good way to make you're CSS. Beter is working with a stylesheet (.css file). And load this file in youre page with de link tag in the head.
  • Robski, are you setting that as a style in a stylesheet?

    wouterJ: I usually use style sheets but I figured this was the easiest way to show what was going on.

    Okay, so I read a little bit into CSS resets... and I just want to make sure I'm understanding it correctly. I might already have CSS frameworks in place which have predefined rules that I may or may not know about? And resetting that just takes it all out so the only rules that exist are the ones that I write?
  • The reset goes at the start of the style sheet or if you are using a fancy one can be it's own separate style sheet. Be careful with pre-written resets as they can mess up other things that you might find out about later down the line, and there are 2 schools of thought on whether they are a good idea or not.
  • It worked! Thanks so much guys it's been bothering me for a while.
  • Yes what they said :)

    Sorry I didn't have much time to reply.
  • Hey, so I was looking at a few other forum posts, and people seemed to be really bothered by doing a
    html, body{margin:0px; padding:0px;}


    I don't see the problem since this seems to work great. Just wondering why they dislike it so much.
  • Its perfectly acceptable - except that you don't need the unit type with a zero value
    html, body { margin: 0; padding: 0; } 
    Setting specific elements' margin and padding to zero is different than a generic reset, which is what some people are bothered with (me, for example).
  • Oh, what other stuff does a CSS reset affect?
  • It depends on what reset you use, but they affect most of your elements (resetting them back to 0 margin and padding).

    I personally use a hybrid of a reset and a normalizer.

    It is near impossible to get pixel perfection across all browsers so I am not too worried about a complete reset.