the little red square done with position:absolute is not showing in IE6; I put z-index of containing div 0 and z-index of positioned red square 800; but my understanding was that by default element done with position:absolute are placed on top of all other content… if I hide other two divs (nav, main div) then the red square shows, otherwise it doesn’t… I don’t get this…
it shows fine in all browsers except IE6…
(css is together w/markup, to make it easier to view…)
oh my gosh, you’re right – moving positioned element to the “back of the bus” did the trick (prob was only on IE6, though; IE8 & 7 no problem…) in the end though, I ended up positioning the element inside the main element on the page (main div, w/the white bg…), that was no problem at all…
thank you very much for your help, learned something new…
believe it or not, it’s a very little thing that’s causing my IE6 problem… this is what I have to do:
ttp://mayacove.com/dev/css/test_layout2.html
look at it in any browser but IE6… I have to leave a little small white gap betw. nav and main section… this is less simple than it sounds, since, in order to get the blue on the left to stretch to the bottom, I had to include everything in a div with that blue bg… oh brother… except for this tiny position:absolute problem with IE6, it works fine…
IE doesn’t like it when absolute elements follow floats in the html unless the absolute element is the last html in that context. Just move the divider div to the end of the current context and it will show.
<div id="wrapper">
<div id="mainBlue">
<div id="navLeft"> <a href="" id="" title="">LINK 1</a> <a href="" id="" title="">LINK 1</a> <a href="" id="" title="">LINK 1</a> <a href="" id="" title="">LINK 1</a> <a href="" id="" title="">LINK 1</a> <a href="" id="" title="">LINK 1</a> <a href="" id="" title="">LINK 1</a> </div>
<div id="contentInner">
<div id="mainContent">
<p>Lorem ipsum nam reque delicatissimi id, expetenda gubergren prodesset cum ne, sed putent forensibus complectitur ex. Ei idque adversarium theophrastus vel, ad pri vocibus volutpat, quidam indoctum conclusionemque has cu. Vix impedit ceteros atomorum in. At vim decore altera diceret, te semper aliquip intellegat nam, quo ei lorem tation urbanitas. Has iisque dissentiet ea, antiopam postulant facilisis eum ea.</p>
<p>Quem harum liberavisse ad sit, vocent tritani vis et. Qui primis accusata laboramus ex, mei ei brute dolore mediocrem, ius ad denique rationibus adipiscing. Est novum audiam ullamcorper eu. Vix causae similique constituam te, erant mucius saperet te ius. Te ceteros ponderum deterruisset ius, sit inimicus expetendis ei.</p>
<p>Has delicata adolescens comprehensam et, ei duo accommodare theophrastus, mei ea kasd utamur accommodare. Has id quot augue ocurreret, alienum legendos eu mea, esse errem cu vix. Ex pro mundi viderer consulatu, mei in movet partiendo assueverit. Wisi graece everti eum eu. Per clita gloriatur posidonium ea, vivendo salutatus rationibus cu sed. Deleniti luptatum dissentiet in per, quo veri voluptua singulis te.</p>
<p>Autem partem interpretaris usu ut, pri posse quaeque gloriatur no. Nusquam commune pericula ad qui, saepe iudicabit nec et, at facer commune dissentias eam. Veniam aliquando scripserit no has, no mei inani eirmod scaevola. Nec alia tollit meliore ex, no vim insolens vituperata adversarium, noster doctus molestiae vel et. Mea indoctum dissentiet ne, sint tamquam iuvaret per no. Ei puto fugit sadipscing eos, tollit legere vocent eos te, te has veniam commune referrentur.</p>
</div>
</div>
<div class="clear"></div>
[B]<div id="divider"></div>[/B]
</div>
<!-- mainBlue -->
</div>
<!-- wrapper -->
If your right column is smaller than your left it will look odd because the blue column will be taller. You would have been better off using a “faux column” approach to keep it simple. (e.g. repeat a background image on the main parent).