So this is what I'm doing: jsfiddle code
* { margin: 0; padding: 0; } html { height: 100%; } header, nav, section, article, aside, footer { display: block; } body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; width: 100%; height: 100%; } a { color: blue; outline: none; text-decoration: underline; } a:hover { text-decoration: none; } p { margin: 0 0 18px } img { border: none; } input { vertical-align: middle; } #wrapper { width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } .menu { background-color: #c00e0e; opacity: 0.5; filter: Alpha(opacity=50); /* IE8 and earlier */ clear: both; margin: 0 auto; width: 730px; text-align: center; color: #FFF; border-radius: 5px; box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.4); } .menu ul { list-style: none; margin: auto; display: block; } .menu ul li { display: inline-block; width: auto; height: 42px; padding: 0; font-family:'Chela One', cursive, Helvetica, sans-serif; font-size: 20px; } .menu ul li a { height: 42px; width: auto; float: left; text-decoration: none; padding: 0 0 0 25px; margin: 0px 10px 0px 10px; color: #fff; text-align: center; } .menu ul li a:hover { height:42px; width: auto; text-decoration: none; color: #000000; } .menu ul li a.current { height: 42px; width: auto; float: left; text-decoration: none; padding: 0px; color: #fff; } /* Header------------------------------------------*/ #header { height: 291px; background: #FFE680 url('http://i43.tinypic.com/2ivb7mh.png') no-repeat; padding-top: 30px; } .big { font-family:'Luckiest Guy', cursive; font-size: 50px; margin: 0px auto; padding-top: 50px; text-align: center; color: #FFF; } /* Middle--------------------------------------*/ #content { text-align: center; margin: auto; padding: 0 0 800px; background-color: #343436; } .footer_misc { background-color: #000; width: 1000px; position: relative; margin: 0 auto; text-align: center; color: #FFF; height: 50px; } /* Footer-------------------------------------------------------*/ #footer { width: 1000px; margin: -100px auto 0; height: 100px; background: #b40b0b; position: relative; } /* tell the imgwithtxt's children to float left: */ .imgwithtxt > * { float:left; margin-right:5px; } /* this is called a clearfix. it makes sure that the imgwithtxt's children floats are cleared, without using extra markup */ .imgwithtxt { *zoom:1 /* for IE */ } .imgwithtxt:before, .imgwithtxt:after { content:" "; display: table; } .imgwithtxt:after { clear: both; } /* end clearfix*/ #title { text-align:center; font-size: 20px; color: #FFF; margin: 10px auto; font-family:'Luckiest Guy', cursive; } .columns { width: 1000px; text-align: center; margin: 0 auto; padding: 0 auto; } .col1 { float: left; width: 200px; } .col2 { float: left; width: 200px; } .col3 { float: left; width: 200px; } When you run the code, it's getting a yellow background before the content. What should I miss in my css? I just want my menu box to have a padding so it won't be on top. I've tried to fix the issue to no avail. I would gladly appreciate your help. Thanks.
