html - CSS Floating, overflow and absolute position -
i have left floated sidebar dropdown menu absolutely positioned , extends out on main content.
the main content has background colors must not go under sidebar.
some of content contains drop downwards absolutely positioned , content extends beyond parents boundaries.
the content in blocks. blocks should float left of side bar, or 1 time side bar cleared should take whole horizontal width.
normally of these rules satisfied except drop downwards in content. done applying 'overflow: hidden' content elements contain background. in case dropdown in content area causing problems because expands beyond parent vertical boundary , causes hidden. (i've used 'overflow: scroll' rather 'hidden' on demo highlight problem).
edit add: i've tried using 'overflow-x: hidden' , overflow-y: visible' reason doesn't work.
here fiddle
alternatively here html , css:
<body> <div id="sidebar"> <div id="sidebar_dropdown"> sidebar_dropdown </div> </div> <div class="content"> content </div> <div id="content_2"> more content absolutly positioned drop down. <div id="dropdown"> dropdown content <br/> dropdown content <br/> dropdown content <br/> dropdown content <br/> dropdown content <br/> dropdown content <br/> </div> <br/> <br/> <br/> content hidden dropdown. </div> <div class="content"> content </div> <div class="content"> content </div> <div class="content"> content </div> </body> css:
#sidebar { float: right; margin:0 1em; background-color: #8888ff; height: 10em; width: 5em; position:relative; } #sidebar_dropdown { position: absolute; right: 0; top: 1em; background-color: #888888; } .content { margin: 1em 0; background-color: #ff8888; overflow: hidden; } #content_2 { margin: 1em 0; background-color: #88ff88; position: relative; overflow: scroll; } #dropdown { background-color: #88ffff; position: absolute; }
if want utilize overflow:hidden on absolute elements - in case -, have wrap them absolute element reflecting it's parent (width , height must same).
html
<div id="hideoverflow"> <div id="sidebar_dropdown"> sidebar_dropdown </div> </div> css
#hideoverflow { width: 5em; height: 10em; position:absolute; overflow:hidden; } html css
No comments:
Post a Comment