CODEWITHSUNDEEP
htmlcss
Jess McKenzie
Jess McKenzie

Reputation: 8385

Cross Browser Full Width CSS

I have been given a challenge of recreating a certain website but I am unsure what the best way is to create a full width cross browser template. I would be using HTML 5 and so far I have:

Do I just use 100% as width?

HTML 

<div id="wrapper">
    <header>
        <h1>Logo Position</h1>
        </header>

CSS:

#wrapper{
    width:990px;
    height:100%;
    min-height:100%;
    background:#000;
}
header{
    width:100%;
    height:100px;
    color:#184C82;
}

Upvotes: 2

Views: 1963

Answers (4)

Brilliand
Brilliand

Reputation: 13714

Generally speaking, you can just ignore the width (that is, not set it anywhere, or set it to auto if it was previously set by something you don't control), and it will default to full width... with a small margin around the edges. If you want that margin gone (cross-browser), you need to set both margin and padding to 0 on both body and html:

body, html {
    margin: 0;
    padding: 0;
}

Messing with the height is generally only needed if you want to push a footer down to the bottom of the screen when the page content is short. You didn't ask for that, so I won't elaborate. (There are existing Stack Overflow questions on that topic anyway.)

Certain elements - particularly tables - do need a width: 100% declaration, but divs and the body do not, unless you've used one of the various CSS declarations that cause shrinkwrapping (i.e. display: inline-block, float: left or position: absolute). Note that width: 100% is not exactly the same as the default behavior of block elements (including the body) - block elements take up as much room as is available, respecting their margins, border and padding, whereas anything with width: 100% will be just as wide as its parent element - and any margin, border or padding will stick out beyond that.

Upvotes: 2

CSS Guy
CSS Guy

Reputation: 1984

You should also use like that..

#wrapper {
 width:100%; /* or width:990px; */
 height:100%;
 position:absolute;
}

Upvotes: -1

Nathanael
Nathanael

Reputation: 7173

Simply use width:100% on the header, and then remove the wrapper. Build the separate parts of your layout as separate DIVs, using <body> as your parent element. You'll be golden!

Upvotes: 0

Sampson
Sampson

Reputation: 268364

Setting the <header> width to 100% will only make it the width of its parent, which is 990px. If you wish to make it extend to 100% the viewport width, you will need to either take it out of the wrapper, position it with absolute or fixed, or use :before and/or :after to give the impression of it being the width of the viewport.

Chris Coyier demonstrated this last method in his article Full Browser Width Bars.

Upvotes: 0

Related Questions