Note: I am planning an update for this article to improve the quality.
A common question from new web designers is how to make a div 100% of the browser window, many people complain that there is always some sort of border around their div, preventing them from making their element the full width of the browser window. The answer to this? Simple. Use a CSS reset.
But what’s a CSS reset?! Basically as the name suggests we can use some code to reset the values of all/certain elements on our page. Most browsers apply certain style rules to all elements so that they can kick in if here isn’t any styling appropriated. So what does a reset look like? Well the simplest (but perhaps not the best) looks like this:
* {
margin:0;
padding:0;
}
The code above selects all elements, hence the asterisk, and then sets the margin and padding at 0. This will usually remove any problems with trying to create a div that fills the entire screen. But you should be aware that this method is slightly browser intensive. And so some clever folk such as Eric Meyer came up with a more efficient method of resetting, that might look a bit longer, but in the long run is better for the end user. Head over to this page to see it.
And that’s how you make a div 100% of the browser’s width. This article is intended to be found for the new web designers searching “100% width div” via Google and I hope this very basic tip can offer a useful solution.