CODEWITHSUNDEEP
csswidthposition
thisisdee
thisisdee

Reputation: 878

CSS: Can I set the width to screen size when position is static or relative?

EDIT: Sorry for all the confusion. It was just a stupid thing I missed. All of my webpages are drawn inside a form (uniform throughout the whole company) and that form has a fixed width. I had just found it thanks to Chrome's "Inspect Element". All these code should work as intended.

Here's my CSS:

#header {
 position:fixed;
 left:0px;
 right:0px;
 height:75px;
}

#main {
 position: relative;
 padding-top: 75px;
 padding-bottom: 100px;
 left: 0;
 right: 0;
 background-color: #EFEFEF;
}

#footer {
 position:relative;
 height: 100px;
 left: 0;
 right: 0;
 background-color:#333333;
}

And my HTML:

<div id='header'>
 Header
</div>
<div id='main'>
 main
</div>
<div id='footer'>
 Footer
</div>

This doesn't seem to do anything. Neither does width: 100%; They only work when position is absolute or fixed. How can I stretch the width when position is static or relative?

Upvotes: 0

Views: 1202

Answers (2)

Dark Falcon
Dark Falcon

Reputation: 44181

After a few minor tweaks, the CSS works fine in my browser:

http://jsfiddle.net/fwvd2/

Upvotes: 1

Benjie
Benjie

Reputation: 7946

When you set left: on a position:relative it tells itself to move that many pixels left.

Then when you set right:, it says 'ignore, left, instead move this many pixels right'

As such, you've not actually defined a width for the element.

Also: have you tried:

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

Upvotes: 1

Related Questions