CODEWITHSUNDEEP
csscross-browserwebbrowser-control
Gandalf
Gandalf

Reputation: 13693

How to make my web page display in full in any browser window of any size

I have made a webpage and this is the code to the main div.

#Div {
    margin-left: 0px;
    position:absolute;
    margin-top: -1px;
    display: inline;
    float: left;
    margin-bottom: 0;
    background-color: #030;
    width: 660px;
    margin-left:-330px;
    left:50%;
    padding-top: 0px;
    height: 440px;
}

Is there a css technique i can use to make sure the page occupies the whole page no matter the size of the computer screen the browser is on.

Upvotes: 1

Views: 10524

Answers (5)

johnnyma
johnnyma

Reputation: 1

  #container {
    background: blue;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    2border: 1px solid red;
  }



<div id="container"></div>

Upvotes: 0

David Yell
David Yell

Reputation: 11855

Perhaps you can take some inspiration from a CSS framework and strip out the bits that you need? http://cssgrid.net/

Upvotes: 1

JakeParis
JakeParis

Reputation: 11210

Why are you setting margin-left twice? Why are you floating (and displaying inline) a div that you want to take up the whole screen? Setting a negative left margin will move your whole div to the left, and therefore cause it to not reach all the way to the right even when the width: 100%.

Take away all margins. Do width:100%. change display:inline to display:block. Take away the float. If you have to set this to position:absolute, then be sure to specify: top: 0px; left: 0px

Upvotes: 1

Floern
Floern

Reputation: 33904

You want to center your webpage, without beeing cut at the left on small screens?

Use following:

#outer{
  text-align: center;
}
#inner{
  margin:0 auto;
  width: 660px;
  text-align: left;
}

<div id="outer">
  <div id="inner">
    content
  </div>
</div>

Upvotes: 1

benhowdle89
benhowdle89

Reputation: 37464

min-height: 100%; min-width: 100%;

and use a CSS Reset - http://meyerweb.com/eric/tools/css/reset/

Upvotes: 1

Related Questions