Heading div images should be displayed at a lower depth
Posted
by
Mack
on Stack Overflow
See other posts from Stack Overflow
or by Mack
Published on 2011-06-28T05:48:13Z
Indexed on
2011/06/28
8:22 UTC
Read the original article
Hit count: 270
I have a webpage where the top 25% of the page is the heading(with images in it) & the rest of the page has the content.
I am trying to get the heading div to display is pictures at a lower depth as the content div because currently the heading images overflow into the content div(intentionally) & when they do they mess up the positioning of the HTML elements in the content div.
My code below should make the heading div display below the content div but it doesn't. Can you help me figure out why & how to fix it?
My CSS:
html, body { height: 100%; width: 100%; }
body { background-color: RGB(255, 255, 255); margin: 20px; text-align: center; }
#outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; }
#header { width: 1200px; height: 25%; background-color: blue; margin-left: auto; margin-right: auto; overflow: visible; z-index: -5; }
#main { display: block; width: 1200px; height: 60%; background-color: blue; margin-left: auto; margin-right: auto; z-index: 5; }
#navBar { float: left; height: 800px; width: 240px; background-color: red; }
#content { float: left; height: 800px; width: 760px; background-color: yellow; }
#kamaleiText { float: left; }
#kamaleiLogo { float: left; padding-top: 30px; background-color: green; z-index: inherit; }
#kamaleiLeaves { float: right; z-index: -2; background-color: cyan; z-index: inherit; }
And my HTML is the following:
<body>
<div id="outerContainer">
<div id="header">
<img id="kamaleiLogo" src="" alt="Pic1" height="98%" width="300px"/> <!-- Knowtice if I set the width to something smaller then everything is spaced out correctly, so these elements are not being shown below others when they should be -->
<img id="kamaleiLeaves" src="" alt="Pic2" height="300px" width="300px"/>
</div>
<br/>
<div id="main">
<div id="navBar">
</div>
<div id="content">
abcdef
</div>
</div>
</div>
</body>
© Stack Overflow or respective owner
