How to layout my website to have 4 rows and 1 column?

问题

I expect my page to be similar to Yahoo my expected result and the code are as following. I have tried different method but does not work. It should be in the middle and has the following sections.

Expected result

 50%            |LeftHeader                middleHeader                 RightHeade|    50% 
 50%            |                    50% Menu1 Menu2 Menu3 50%                    |    50%

 50%            |Content goes here ***********************************************|    50%
                |*****************************************************************|

 50%            |                   50% text of Footer goes here 50%              |    50%

These lines >> | show the border sections for example footer is that big but its text should be in center.

My code is as following

    <html>
    <head>
       <style>
    #wrapper {
        margin: 0 auto;
        width:50%;
    }
    #header {
        background-color:#faa;
        height:50px;
        font-size: 0;
    }
    #header > div {
        display: inline-block;
        width: 33.3333%;
        font-size: 12pt;
        height: 100%;
    }
    #left {
        background-color:red;
        height:20px;
    }
    #middle {
        background-color:yellow;
        height:20px;
    }
    #right {
        background-color:green;
        height:20px;
    }
    #menu {
        width: 100%;
        margin: 0 auto;
        background-color:#faa;
        height: 20px;
        font-size: 0;
    }
    #menu > a {
        display: inline-block;
        font-size: 12pt;
        width: 33.333%
    }
    #content {
        top:50px;
        bottom:150px;
        overflow:auto;
    }
    #footer {
        bottom: 0;
        width: 100%;
        background-color:#afa;
        height:150px;
    }
    #footer > div {
        margin-left: 50%;
    }
    </style

>
    </head>
    <body>
    <div id="wrapper">
        <div id="header">
            <div id="left">
              left header
            </div>
            <div id="middle">
              middle
            </div>
            <div id="right">
              right header
            </div>
        </div>
        <div id="menu">
         <a href="#">menu1</a>
         <a href="#">menu2</a>
         <a href="#">menu3</a>
      </div>
        <div id="content">
           content
        </div>
        <div id="footer">
           footer is here
        </div>
      </div>

回答1:

Use a series of <div>s in inline-block, with relative positions and margin: 0 auto to center. The footer can be placed at the bottom with position: absolute, but you have to manually add the margins since absolute positioning doesn't support automatic centering.

CSS:

#wrapper {
    margin: 0 auto;
    width:50%;
}
#header {
    background-color:#faa;
    height:50px;
    font-size: 0;
}
#header > div {
    display: inline-block;
    width: 33.3333%;
    font-size: 12pt;
    height: 100%;
}
#left {
    background-color:red;
    height:20px;
}
#middle {
    background-color:yellow;
    height:20px;
}
#right {
    background-color:green;
    height:20px;
}
#menu {
    width: 50%;
    margin: 0 auto;
    background-color:#faa;
    height: 20px;
    font-size: 0;
}
#menu > a {
    display: inline-block;
    font-size: 12pt;
    width: 33.333%
}
#content {
    top:50px;
    bottom:150px;
    overflow:auto;
}
#footer {
    position: absolute;
    bottom: 0;
    margin-left: 12.5%;
    width: 25%;
    background-color:#afa;
    height:150px;
}

See the Fiddle here: http://jsfiddle.net/8gmdk/

回答2:

To center all the content in the center of the screen you can use this:

body {
    width: 960px; /* define yours, you can also use max-width if you're going to use a fluid layout */
    position: relative;
    margin: 0 auto;
    left: 0;
    right: 0;
}

Good luck!

来源：https://stackoverflow.com/questions/15626146/how-to-layout-my-website-to-have-4-rows-and-1-column

标签

css

css3