CODEWITHSUNDEEP
csshtml
Reseed Grey
Reseed Grey

Reputation: 41

Have a div stretch across the window browser

I have a div which I want to stretch the whole screen. It does with a 100% width but when the browser size is changed, shrunk in size, it only does 100% of that size. I the changed it to 1000 px, but on my desktop it doesn't stretch.

Basically I want a div similar to the one Google has at the top of its homepage. Where, if the window is shrunk, it doesn't change at all and is stretched 100% on every single desktop/ laptop resolution

Upvotes: 2

Views: 2218

Answers (4)

rizalp1
rizalp1

Reputation: 6554

This is how google does it :)

min-width: 980px; position: absolute; width: 1663px;

Upvotes: 0

Paulo R.
Paulo R.

Reputation: 15619

Google has is a minimum width defined on its header:

header {
    /* width: auto; possible to omit since it's the default value*/
    min-width: 1000px;
}

Example: http://jsfiddle.net/E78WE/

Upvotes: 2

Zoltan Toth
Zoltan Toth

Reputation: 47687

You should use min-width to stretch the <div> for the bigger screens and not go under 1000px on smaller ones:

div {
    min-width: 1000px;
    width: 100%;
}

Upvotes: 4

Losbear
Losbear

Reputation: 3314

you could try something like this:

.thisStyle { min-width: 1000px; position:absolute; z-index: 9999; width:100%; height:20px; top: 0; left: 0; color: #ffffff;}

and add a div to the body:

<div class="thisStyle">this is some content</div>

and style it the way you want it to look (background color, etc.)

Upvotes: 0

Related Questions