CSS Layout Fixed-Width_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-25 10:58 出处：网络

I am aiming for a fixed width layout, with width:1008px across all monitors. Here\'s my HTML- <body>

I am aiming for a fixed width layout, with width:1008px across all monitors. Here's my HTML-

<body>
<div id="god_container">
    <div id="root">
        ... all content ...
    </div>
</div>
</body>

and CSS -

#god_container{                                                                                                       
    background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;                           
    margin:auto;                                                                                                      
    position:static;                                                                                                  
    width:auto;                                                                                                       
}                                                                                                              开发者_如何学运维       

#root {                                                                                                               
    background-color:#FFFFFF;                                                                                         
    margin:auto;                                                                                                      
    width:1008px;                                                                                                     
    color:#000000;                                                                                                    
    font-family:Verdana,Arial,sans-serif;                                                                             
    font-size:10pt;                                                                                                   
}
body{
    color:#373737;
    font:16px arial;
    line-height:1;
    background-color:#D4D9DD;
}

I thought this would solve it. But when I render, the root css does not adhere to 1008px value. Also root's background-color does not show as #FFFFFF i.e. White. It still shows my body's background-color. What am I doing wrong?

UPDATE: To anyone interested I have found excellent ready-made CSS layouts at http://www.dynamicdrive.com/style/layouts/category/C12/

Giving the background-image and color to the body, makes sure it is displayed on all pages, and have the #god_container act as a wrapper for the page, center it by margin:0 auto; and give it the width:1008px;.

Also you don't have to give the position:static; to the #god_container wrapping div, instead use position:relative; to make sure all child divs, are placed inside it even if positioned absolutely.

At last, giving #root a width:100% will place the div to it's parent div width.

Try using this CSS:

body{
  color:#373737;
  font:16px arial;
  line-height:1;
  background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
}

#god_container{
  margin:0 auto;
  position:relative;
  width:1008px;
}

#root{
  background-color:#FFFFFF;
  margin:auto;
  width:100%;
  color:#000000;
  font-family:Verdana,Arial,sans-serif;
  font-size:10pt;
}

Not sure if I'm missing something here, but it could be much simpler. You don't need a wrapper DIV... the body can handle that. All you need is your root DIV.

CSS

body{
    background: #D4D9DD url("/site_media/images/bg-1008.png") repeat-y center;
    color:#373737;
    font: 16px/1 Arial;
}
#root {
    background: #FFFFFF;
    color: #000000;
    margin: 0 auto;
    width: 1008px;
}

HTML

<body>
    <div id="root">
        ... all content ...
    </div>
</body>

Here ya go: http://jsfiddle.net/XdA92/1/

Try the below.

give the back ground url to the main body so that it will go to all pages

#god_container{                                                                                                       
        background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;                           
        margin:auto;                                                                                                      
        position:static;                                                                                                  
    text-align:left;
    width:1008px;                                                                                                   
    }