1 reply [Last post]
pilsnermonkey
pilsnermonkey's picture
Offline
newbie
Last seen: 9 years 29 weeks ago
Timezone: GMT-7
Joined: 2013-01-19
Posts: 2
Points: 3

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;
}

pilsnermonkey
pilsnermonkey's picture
Offline
newbie
Last seen: 9 years 29 weeks ago
Timezone: GMT-7
Joined: 2013-01-19
Posts: 2
Points: 3

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?