1

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
Gandalf
  • 1
  • 29
  • 94
  • 165
  • Oh, if that's your question, then simply write `html, body { padding: 0; margin 0; } ` at the top of your css – JakeParis Jan 12 '11 at 12:43
  • 1
    This CSS is just wrong. Please learn about CSS 'position', 'display' and 'float' and you will know why I'm telling you this. The combination of this CSS properties will give you nothing. If you want the 'div' in all the window just do 'body { padding: 0; margin 0; }' and 'div { width:100% }' – Jonathan Jan 12 '11 at 12:43

5 Answers5

1

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

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

benhowdle89
  • 36,900
  • 69
  • 202
  • 331
  • I'm not sure that setting the height with 100% works. At least it usually doesn't for me...? – JakeParis Jan 12 '11 at 12:33
  • did you use the css reset? Different browsers show borders, padding and margins differently, you can set these to 0 with css resets – benhowdle89 Jan 12 '11 at 12:37
  • Found this: http://stackoverflow.com/questions/447456/what-the-typical-viewport-size-on-a-1024x768-screen – Gandalf Jan 12 '11 at 14:40
1

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

JakeParis
  • 11,056
  • 3
  • 42
  • 65
1

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>
Floern
  • 33,559
  • 24
  • 104
  • 119
1

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

David Yell
  • 11,756
  • 13
  • 61
  • 100
0
  #container {
    background: blue;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    2border: 1px solid red;
  }



<div id="container"></div>
ЯegDwight
  • 24,821
  • 10
  • 45
  • 52
johnnyma
  • 1