Here is what I'm currently working on: link to 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;
}
After running the code, there seems to be a yellow background appearing before the content. I am struggling to figure out how to adjust my CSS properly so that the menu box has padding and does not overlap with other elements. Any assistance or guidance would be greatly appreciated. Thank you.