100% Width

Please note: This post was written 8 years ago, which is an age in programming terms, so please don't treat this as gospel! I'll be updating all posts soon enough, but if you'd especially like this one to be updated let me know.


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:

* {

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.


If you found this particularly useful and want to share the ♥ you can donate here.


No Responses

~ Comments are now closed ~

Get in touch here