computermax2328 Posted February 18, 2013 Share Posted February 18, 2013 Hey All, I have two divs, one floats right and the other left, right next to each other. The one of the left has a z-index, is set to absolute positioning, and has a drop shadow on its right edge so it looks like it is over the other column. The problem is that when the left div goes longer than the right it falls out of the wrapper and past the footer. I have a br tag styled with clear both to give the wrapper its height after the two floating divs. Any help with this height problem?? Thanks in advance, Quote Link to comment https://forums.phpfreaks.com/topic/274634-absolute-position-and-height/ Share on other sites More sharing options...
crmamx Posted February 18, 2013 Share Posted February 18, 2013 It would help to post the code. Quote Link to comment https://forums.phpfreaks.com/topic/274634-absolute-position-and-height/#findComment-1413166 Share on other sites More sharing options...
computermax2328 Posted February 18, 2013 Author Share Posted February 18, 2013 (edited) Sorry, I thought it would be easy to understand. Code is below. As you can see this is for a joomla template. If you don't have any Joomla experience don't worry about that code, just the divs it lives in. HTML <section id="wrapper"> <section id="left"> <div id="sobox" class="width"> <jdoc:include type="modules" name="FeaturedContent" /> </div> <div id="sobox" class="width"> <jdoc:include type="modules" name="SectionSlide" /> </div> <jdoc:include type="component" /> </section> <section id="right"> <div id="box" class="width"> <div id="rib"> <h3>Follow Quad News</h3> </div> <div id="boxcon"> <div id="sobox" class="width"> <jdoc:include type="modules" name="socialbanner" /> </div> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner1" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner2" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner3" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner4" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner5" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner6" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner7" /> </div> </div> </section> <br style="clear: both;"/> </section> CSS #wrapper { background-color: #f0f0f0; padding: 30px 20px; } /* Article Page right column*/ #right { width: 36%; float: right; background-color: #dbdbdb; margin-top: 20px; } /* Article Page left column*/ #left { width: 60%; float: left; background-color: #ffffff; -moz-box-shadow: 5px 0px 5px #888888; -webkit-box-shadow: 5px 0px 5px #888888; box-shadow: 5px 0px 5px #888888; padding: 20px; } Thanks in advance Edited February 18, 2013 by computermax2328 Quote Link to comment https://forums.phpfreaks.com/topic/274634-absolute-position-and-height/#findComment-1413168 Share on other sites More sharing options...
computermax2328 Posted February 20, 2013 Author Share Posted February 20, 2013 Can anyone provide a solution for my problem?? Quote Link to comment https://forums.phpfreaks.com/topic/274634-absolute-position-and-height/#findComment-1413684 Share on other sites More sharing options...
haku Posted March 4, 2013 Share Posted March 4, 2013 Considering that you mentioned your div was absolutely positioned, and the code you showed us had no absolute positioning, it's hard when you ask us a question about one thing, and show us code for something else. Quote Link to comment https://forums.phpfreaks.com/topic/274634-absolute-position-and-height/#findComment-1416348 Share on other sites More sharing options...
teynon Posted March 5, 2013 Share Posted March 5, 2013 (edited) As haku has stated, your code is not representing what you asked. But this might do what you are trying to do (http://jsfiddle.net/LW47W/): <html> <head> <style> #wrapper { background-color: #f0f0f0; position: relative; padding: 20px; } /* Article Page right column*/ #right { width: 36%; float: left; background-color: #dbdbdb; margin-top: 20px; margin-left: 0px; z-index: 1; position: relative; } /* Article Page left column*/ #left { width: 60%; float: left; background-color: #ffffff; -moz-box-shadow: 5px 0px 5px #888888; -webkit-box-shadow: 5px 0px 5px #888888; box-shadow: 5px 0px 5px #888888; z-index: 2; position: relative; } .width { padding: 20px; } </style> </head> <body> <section id="wrapper"> <section id="left"> <div id="sobox" class="width"> <jdoc:include type="modules" name="FeaturedContent" /> I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />I'm a banana!<br /> I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />I'm a banana!<br /> I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />nkeys and bananas and I'm a banana! and I'm a banana! and I'm a banana! and </div> <div id="sobox" class="width"> <jdoc:include type="modules" name="SectionSlide" /> </div> <jdoc:include type="component" /> <br style="clear: both;"/> </section> <section id="right"> <div id="box" class="width"> <div id="rib"> <h3>Follow Quad News</h3> </div> <div id="boxcon"> <div id="sobox" class="width"> I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />I'm a banana!<br /> I'm a banana!<br />I'm a banana!<br />I'm a banana!<br />I'm a banana!<br /> <jdoc:include type="modules" name="socialbanner" /> </div> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner1" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner2" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner3" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner4" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner5" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner6" /> </div> </div> <div id="box" class="mod"> <div id="boxcon"> <jdoc:include type="modules" name="banner7" /> </div> </div> </section> <br style="clear: both;"/> </section> <br style="clear: both;"/> </body> </html> Edited March 5, 2013 by teynon Quote Link to comment https://forums.phpfreaks.com/topic/274634-absolute-position-and-height/#findComment-1416620 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.