Why does this happen? Fixed width problem...

Discussion in 'CSS' started by Brian123, Nov 4, 2008.

0
  1. #1
    On my screen a site I am working on looks fine, but when viewed on another larger screen everything looks out of proportion.
    Here is a snippet of the css where I think the problem lies.
    How do I make the site a fixed width on all screens?
    Thanks in advance.
    #wrapper {
        margin: auto;
        text-align: left;
        width: 1280×768;
        background: white;
}
    Code (markup):

     
    Brian123, Nov 4, 2008 IP
  2. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #2
    What the heck is width:1280×768;. To make it a set width, just add one, width:750px; or whatever it is
     
    rochow, Nov 4, 2008 IP
  3. Brian123

    Brian123 Well-Known Member

    Messages:
    784
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    108
    #3
    LOL, thanks rochow. I think I have it sorted now!
    I just can't get my head around why it looks okay on my screen, and not on others. I want the index to be the full length of the screen you see.
     
    Brian123, Nov 4, 2008 IP
  4. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #4
    Fluid? Then use % instead of px, 100% = 100% of the browser window. 50% = 50% of the browser window etc.
     
    rochow, Nov 4, 2008 IP
  5. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Pls give out more css files. How about the left and right column css (if you have)
    Basically there are two types of layout, fixed and liquid width layouts.
     
    justinlorder, Nov 4, 2008 IP
  6. witsols

    witsols Peon

    Messages:
    102
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Creating a fixed-width layout with CSS

    <body>
    <div id="head">
    <h1>header</h1>
    </div>
    <div id="columns">
    <div id="side1">
    <h3>side1</h3>
    <ul>
    <li>Let me not to the marriage of true minds</li>
    <li>Admit impediments; love is not love</li>
    <li>Which alters when it alteration finds</li>
    <li>Or bends with the remover to remove</li>
    <li>Oh, no, it is an ever fixed mark</li>
    </ul>
    </div>
    <div id="content">
    <h2>main content</h2>
    <p>That looks on tempests ... his height be taken.</p>
    <p>But bears it out ... alteration finds.</p>
    <p>Whose worth's unknown, ... the remover to remove.</p>
    </div>
    <div id="side2">
    <h3>side2</h3>
    <ul>
    <li>Let me not to the marriage of true minds</li>
    <li>Admit impediments; love is not love</li>
    <li>Which alters when it alteration finds</li>
    </ul>
    </div>
    </div>
    <div id="foot">
    <h3>footer</h3>
    <p>Or bends with ... height be taken. </p>
    </div>
    </body>

    Here's the CSS code that styles the page as a fixed-width layout.

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    }
    h2,h3 {
    margin-top: 0px;
    padding-top: 0px;
    }
    div#head {
    position: absolute;
    width:750px;
    height:100px;
    left:0px;
    top: 0px;
    background-color: #FFFF66;
    }
    div#columns {
    position: relative;
    width: 750px;
    top: 100px;
    background-color: #CCCCCC;
    }
    div#side1 {
    position:absolute;
    width:150px;
    top: 0px;
    left:0px;
    background-color: #FF6666;
    }
    div#content {
    position: relative;
    width: 450px;
    top: 0px;
    left: 150px;
    background-color: #999999;
    }
    div#side2 {
    position:absolute;
    width:150px;
    top: 0px;
    left: 600px;
    background-color: #00FF66;
    }
    div#foot {
    position: relative;
    width: 750px;
    clear: both;
    margin-top: 100px;
    background-color: #99FFFF;
    }
     
    witsols, Nov 4, 2008 IP