I'm having an issue with creating a header with fixed dimensions and aligning it center on my webpage. I want to have small 1 px images repeat along the remaining width of the header from each edge of the main image.
However, when I try to repeat the background image to the right of the header, it ends up jumping down to the next "row" instead of staying in line with the header. Adding the left header background image causes it to repeat across the entire "row" and pushes the right header image below it.
Here is the HTML code at jsfiddle: http://jsfiddle.net/kEdGb/
Below is the structure of the html:
<div id="HeaderContainer">
<div id="HeaderLeft"></div>
<div id="Header">
<div id="Menu">
<ul class="tab">
<li><a href="page.html">Link</a></li>
</ul>
</div>
</div>
<div id="HeaderRight"></div>
</div>
And here is the corresponding CSS:
#HeaderContainer {
width: 100%;
}
#Header
{
background-image: url(images/header_image.png);
background-repeat: no-repeat;
background-color: #707173;
height: 210px;
width: 990px;
max-width: 990px;
margin: 0px auto;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
position: relative;
border-top-style: solid;
border-top-color: #707173;
border-top-width: 1px;
border-left-style: solid;
border-left-color: #707173;
border-left-width: 1px;
border-right-style: solid;
border-right-color: #707173;
border-right-width: 1px;
}
#HeaderLeft {
background-image: url(images/headerLeft.png);
background-repeat: repeat-x;
position: absolute;
height: 210px;
width: 100%;
}
#HeaderRight {
background-image: url(images/headerRight.png);
background-repeat: repeat-x;
position: absolute;
height: 210px;
width: 100%;
}
#Menu {
max-width: 95%;
position: absolute;
bottom: 0px;
left: 5%;
}
This setup does not seem to work properly in any browser. Can someone point out what might be missing? :)