How to put the text of footer in center and the links of menu in center and next to each other?

Question

I am expected result and the code are as following. My current style works but the problem is that the footer is too wide and and menu1.menu2,menu3 are not as illustrated bl

Answer 1

I'm confused by the goal. Does the footer need to be fixed? If yes, see example 2. Does the wrapper need to be height 100%?

Example 1: FIDDLE

Example 2: To fix the footer to the bottom of the window, add this to the footer:

width:50%;
position:fixed;
bottom:0;
left:50%;
margin-left:-25%;

Answer 2

A few things:

• You can size the footer and still use position:fixed at 50% as that's what the wrapper is.
• You had a few unnecessary tags (if I understand what you want)
• You were sizing your menu items by 33% when it seems like you didn't want that.

jsFiddle

HTML

<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">vbcfxbfgbfcgbfg</div>
    <div id="footer">
        And here's the footer
    </div>
</div>

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: 100%;
    margin: 0 auto;
    background-color:#faa;
    height: 20px;
    font-size: 0;
    text-align:center;
}
#menu > a {
    display: inline-block;
    font-size: 12pt;
    margin:0 .5em;
}
#content {
    top:50px;
    bottom:150px;
    overflow:auto;
}
#footer {
    bottom: 0;
    width: 50%;
    background-color:#afa;
    height:150px;
    position:fixed;
    text-align:center;
}

Answer 3

See updated code here.

I've wrapped the menu links in another div: display: inline-block with the text-align of the #menu set to center. This centers the three links.

The text in the footer is also centered through text-align: center.

Firstly, it is bad practice to open a new question asking the same thing. Secondly, avoid announcing "My code" unless you wrote the majority of it (this is not the case here). Thirdly, this question does not show much research effort as the footer text-align can easily be searched up.