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

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

    

        
left header
        
middle
        
right header
    
    

        menu1
        menu2
        menu3
    
    
vbcfxbfgbfcgbfg
    

        And here's the footer
    

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;
}