I'm currently in the process of designing a Homepage and working on creating a banner with a linkbar underneath it. To keep these elements organized, I want to place them within a div labeled #content-top. The banner will span 1000px in width and 100px in height, while the linkbar below will have the same width but only 40px in height. The banner comprises two divs, each 500px wide and 100px high, each with its own background image. The linkbar consists of six divs, each 16.6% wide.
Here is the relevant code:
CSS:
#content-top {
border: 1px solid #00FF00;
position: relative;
width: 1000px;
height: 140px;
}
#logotype-banner {
border: 1px solid #FF0000;
position: relative;
width: 500px;
height: 100px;
top: 0px;
left: 0px;
background-image: url(../images/logotype1.jpg);
background-repeat: no-repeat ;
}
HTML:
<div id="content-top">
<div id="logotype-banner"></div>
</div>
My issue is that some of the div boxes are not rendering correctly based on my specifications, including one's incorrect width and another missing a background image.