Hello.
I have a 3 column liquid layout. All columns are liquid: .sidebar1 (left), .content (middle) and .sidebar2 (right). 20% - 60% -20%. They live within .container which sets full page view at 90% with max-width: 1260px and min-width: 780px.
I want .sidebar2 to be fixed so it is visible at all times while scrolling. It will contain a page menu for named html anchors on long pages.
I tried the css position:fixed; property but .sidebar2 breaks out of the HTML and appears on the left side of the page. (Without position:fixed; .sidebar2 displays correctly: as a right sidebar on the page.)
I messed with position:absolute; for .sidebar2 but then the right column displays all over the place in different screen sizes because of the full liquid layout.
Is it possible to use position:fixed; in a full liquid layout? Any help greatly appreciated.
HTML <div class="container"> <div class="sidebar1"> <div class="content"> <div class="sidebar2"> CSS .container { width: 90%; max-width: 1260px; min-width: 780px; } .sidebar1 { float: left; width: 20%; background-color: #93A5C4; padding-bottom: 10px; color: #FFF; } .sidebar2 { float: left; width: 20%; background-color: #93A5C4; padding: 1px 0; } .content { padding: 10px 0; width: 60%; float: left; }
Duh. Got it. The old nested
Duh. Got it.
The old nested Div trick. Even works in Internet Explorer
<div class="sidebar2"> <div class="quickpagelinks"></div> </div> .sidebar2 { float:left; width: 20%; background-color: #93A5C4; padding: 0px 0; margin:0px; } .quickpagelinks { float: left; width: 18%; background-color: #93A5C4; padding: 0px 0; position:fixed; margin: 0; }
Looks OK?