CSS Absolute Positioning Troubles

[system]

@Paul_O_B

1. A fixed positioned sidebar that slides out.

If it’s fixed position, how does it slide… and what does that have AT ALL to do with the OP’s post?

Though to be honest that sounds like scripted asshattery that has NO BUSINESS on a website in the first place – Especially when it’s already an unusably wide (or uselessly narrow depending on one’s point of view) 960px…

@Paul_O_B

The rest of the layout should be centered in the available space exactly even when the fixed position sidebar slides out

Sounds more like it should be apo off the width wrapper and not fixed… of course I’m not seeing anything in these posts about a fixed sidebar OR it’s content… and I just back-read again and am stuck wondering what you are even on about. Of course with fixed not scrolling, GREAT care needs to be taken with that fixed elements height, which is WHY position:fixed on a content or navigational element is usually not just a needlessly complex bit of pointless bloat, it’s also a steaming pile of accessibility /FAIL/

That again probably has NO BUSINESS on a website… and again I can’t see anything in the OP’s posts that has ANYTHING to do with a ‘fixed’ side flyout.

@Paul_O_B

3. A sticky footer

Which to be honest is the simple part of the equation in relation to the header… put it inside the min-height element and be done with it.

Or am I just not seeing it because once again it’s posts full of snippets instead of a link to an actual complete page?

[PaulOB]

@deathshadow60

If it’s fixed position, how does it slide… and what does that have AT ALL to do with the OP’s post?

post #7

Thankyou - works a treat.

One last thing. I introduce a side bar on the side of the page that is retractable. I would like the contents to be centred in the remaining screen real-estate. Assumably I put a wrapper around the content that adjust its width based on how much window width is left, so it would be centred when the sidebar is and isn’t visible. Can I do this in css? I don’t how to make the width of the wrapper adjust to the remaining screen real-estate.

Though to be honest that sounds like scripted asshattery that has NO BUSINESS on a website in the first place – Especially when it’s already an unusably wide (or uselessly narrow depending on one’s point of view) 960px…

Achieved without script in my code for modern browsers.

Sounds more like it should be apo off the width wrapper and not fixed… of course I’m not seeing anything in these posts about a fixed sidebar OR it’s content… and I just back-read again and am stuck wondering what you are even on about. Of course with fixed not scrolling, GREAT care needs to be taken with that fixed elements height, which is WHY position:fixed on a content or navigational element is usually not just a needlessly complex bit of pointless bloat, it’s also a steaming pile of accessibility /FAIL/

Again look at my example which shows how it could work and still be accessible because the overflow on the fixed sidebar is controlled.

That again probably has NO BUSINESS on a website… and again I can’t see anything in the OP’s posts that has ANYTHING to do with a ‘fixed’ side flyout.

See post #7.

[system]

@Paul_O_B

post #7

I assume you mean the main paragraph starting with “One last thing” – if so I read and re-read that and must be hitting a comprehension issue, as for the life of me I couldn’t even figure out what that meant… is it a sidebar or isn’t it? Centered in the remaining available space? Oh, means OUTSIDE the content area… gah, that’s confusing.

… and yeah, my advice would be akin to the response to “doctor doctor, it hurts when I do this”.

[PaulOB]

@deathshadow60

I assume you mean the main paragraph starting with “One last thing” – if so I read and re-read that and must be hitting a comprehension issue, as for the life of me I couldn’t even figure out what that meant… is it a sidebar or isn’t it? Centered in the remaining available space? Oh, means OUTSIDE the content area… gah, that’s confusing.

It’s pretty straight forward.

The OP wanted a sidebar to the left of the page which I duly floated left. Of course that now means that you can’t center the main layout in the available viewport space because the background would slide behind the float (the available space being from the right edge of the left sidebar to the right edge of the viewport) . Therefore I offered the overflow fix to stop this happening and the layout would center nicely in the remaining viewport space.

In post #10 the OPs requirements changed to a 100% high fixed positioned sidebar instead of the floated one which meant that a more complicated solution was needed.

Ok, this is great until there is more than a windows height worth of content.

I would like the sidebar to be 100% window height but remain fixed on the top left of the window at all times - so it does not scroll with the page.

Changing the #sidebar from position: relative; to position: fixed; fixes it to the top-left of the window but breaks the auto-adjusting content wrapper.

Then in post #13 the requirements of a sticky footer were also requested and as I said in post #14 things were now quite complicated and maybe a step too far. It started off pretty straight forward but evolved into something quite complex.

[system]

@Paul_O_B

In post #10 the OPs requirements changed to a 100% high fixed positioned sidebar instead of the floated one which meant that a more complicated solution was needed.

Funny, I got that from post one with the 100% height on the wrapper – I automatically assumed that was supposed to be a min-height.

[RyanKing1809]

If I sit the #backnav div outside the #wrapper and use absolute positioning then it would be removed from the flow right? Then I would just add some padding to first element in the #contents wrapper to account for collisions.

#backnav ul {
    position:absolute;
    top: 0;
    right: 50px;
    margin: 0;
    color: #ddd;
    background: #333;
    height: 24px;
    padding: 0 8px;
}

#searchwrapper {
    min-height: 76px;
    padding-top: 24px;
}

That should fix that 100% height issue shouldn’t it? The problem now is the #footer still sits below the fold, adding a negative top margin doesn’t seem to do anything at all. Any ideas?

@deathshadow60

You do know how MASSIVE 36pt is on a 120dpi system, right? (specifically that’s the same as saying font-size:60px for lf/120, and font-size:48px for sf/96). Also, you seem to be specifying px heights on things with default or pt measurements – that’s just BEGGING for it to break before we even TALK layout.

This h1 is intended to be an image in the future, but thanks, I’ll take this into account - I haven’t considered the varying dpi’s on modern systems.

[RyanKing1809]

Creating a negative top margin for the #contents div then adding padding on the first item in the #contents div to compensate appears to work:

#contents {
    width: 960px;
    margin: -60px auto 0px auto;
	padding: 10px;
	min-height: 100%;
	position: relative;
	padding:10px 10px 35px;/* protect footer */
	zoom:1.0;/* ie haslayout*/
}
#searchwrapper { /*previously named #searchbar*/
    min-height: 76px;
    white-space: nowrap;
    text-align: center;
	border-bottom: 1px solid #aaaaaa;
	padding-top: 84px;
}

[PaulOB]

As long as you maintain the 100% by compensating with negative margins you should be ok (which is how the sticky footer works anyway). Of course you then have to protect those elements as in the sticky footer method with padding (or wide borders) other elements.

[RyanKing1809]

Thanks Paul you’ve been a big help

[RyanKing1809]

When the window has a smaller width than the content and the sidebar - having a fixed sidebar, the content scrolls horizontally beneath it. Is there a away it could become “unfixed” (for lack of a better term) in CSS? So if the sidebar is expanded and the window width is too small - when scrolling horizontally the sidebar moves with the content and is able to move out of the window, yet it should still remain fixed when scrolling vertically.

I have also moved the #backnav inside the #wrapper div so it could position itself relative to it’s right edge - however the #wrapper no longer expands to the remaining width.

wrapper:

body{
	text-align:center;/* for inline-block centerimg*/
	white-space:nowrap;/*stop IE8/9 from dropping column*/	
}
#wrapper,#sidebar,#footer{white-space:normal;text-align:left;}/* reset whitespace and text */

html, body {
    margin: 0;
    padding: 0;
    font-family: "Georgia", Serif;
	height: 100%;
}

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
#wrapper:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}

#contents {
    width: 960px;
    margin: -60px auto 0px auto;
	padding: 10px;
	min-height: 100%;
	position: relative;
	padding:10px 10px 35px;/* protect footer */
	zoom:1.0;/* ie haslayout*/
	text-align: center;
}

* html #contents {/* ie6 and under only*/
    height:100%;
}

#wrapper {
	zoom:1.0;/* ie haslayout*/
	overflow:hidden;/* make an auto width rectangular block next to a float */
	min-width:980px;/* same total width as wrapper*/
	margin:0 auto;
	position:relative;
	z-index:1;
	min-height:100%;
	border-top:none;
	border-bottom:none;
	display:inline-block;
	vertical-align:top;
	border: 3px red solid;
}

* html #wrapper{height:100%;display:inline}/* ie6 inline-block hack*/
*+html #wrapper{display:inline}/* ie7 inline-block hack */

sidebar:

#sidebar {
	background-color: #333333;
	width: 220px;
	padding: 10px;
	margin-left:-240px;
	color:#fff;
	position:fixed;
	top: 0;
	bottom: 0;
	left: 0;
	padding:20px 20px 5px;
	height: 100%;
	overflow:auto;
	z-index:2;
	-webkit-transition:margin 1s ease-in;
	-moz-transition:margin 1s ease-in;
	-ms-transition:margin 1s ease-in;
	transition:margin 1s ease-in;
}

#sidebar:hover { margin:0 }

#dummy-column{
       width: 220px;
       float:left;
       margin-left:-240px;
       padding:0 30px 0 20px;
       height:100px;
       position:relative;
		-webkit-transition:margin 1s ease-in;
		-moz-transition:margin 1s ease-in;
		-ms-transition:margin 1s ease-in;
		transition:margin 1s ease-in;

}
#sidebar:hover + #dummy-column { margin:0 }

backnav:

#backnav ul {
    position:absolute;
    top: 0;
	right: 50px;
    margin: 0;
    padding: 0;
    color: #ddd;
    background: #333;
	height: 24px;
	-webkit-border-bottom-right-radius: 12px;
	-webkit-border-bottom-left-radius: 12px;
	-moz-border-radius-bottomright: 12px;
	-moz-border-radius-bottomleft: 12px;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
	padding: 0 8px;
	z-index:3;
}

#backnav li {
	display: inline-block;
    float: left;
    list-style: none;
    padding: 4px 5px 2px;
    font: 12px "Georgia", Serif;
}

#backnav li a{
	display: inline-block;
	color: #dddddd;
	text-decoration: none;
}

html:

<html>
<head>
	<base href="http://localhost/~RyanKing/public/" />
	<link rel="stylesheet" type="text/css" href="_stylesheets/styles.css" />
	<title><?php echo $str_pageTitle ?></title><!-- String -->
</head>
<body>
	<div id="sidebar"></div>
	<div id="dummy-column"></div>
	

	<div id="wrapper">
		<div id="backnav"><?php echo $str_backnav ?><!-- Unordered list of Links--></div>
		<div id="contents">
			<div id="searchwrapper">
				<h1><?php echo $str_heading ?><!-- String --></h1> <div id="searchbar"><input type="text" id="searchfield"/>
				<input type="image" src="_images/searchbutton.png" id="searchbutton" alt="Search"/></div>
			</div>
			<div id="marquee"><img src="<?php echo $str_imgUrl ?>" /><!-- Image 800x320 --></div>
			<div id="catnav"><?php echo $str_catnav ?><!-- Unordered list of Image-Links 238x77--></div>
		</div>
		<div id="footer"><?php echo $str_footnav ?><!-- Unordered list of Links--></div>
	</div>
</body>
</html>

[PaulOB]

Hi,

You seem to have upset the dynamics of the page with the above code. You can only use the 100% routines on the wrapper. It will not propagate to any nested elements and therefore min-height:100% on #contents will have no effect. You get one shot at achieving the 100% effect and you must use the main page wrapper to do this. Any other method will fail (apart from display:table and height:100%).

The example I posted earlier showed how to get your backnav outside the wrapper using floats and a negative margin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	text-align:center;/* for inline-block centerimg*/
	white-space:nowrap;/*stop IE8/9 from dropping column*/
}
#wrapper, #sidebar, #footer {
	white-space:normal;
	text-align:left;
}/* reset whitespace and text */
html, body {
	margin:0;
	padding:0;
	height:100%;
}
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
#wrapper:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
#sidebar {
	background-color: #333333;
	width: 220px;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	margin-left:-240px;
	color:#fff;
	overflow:auto;
	z-index:2;
}
#content {
	padding:10px 10px 35px;/* protect footer */
	zoom:1.0;/* ie haslayout*/
}
#wrapper {
	margin:0 auto;
	position:relative;
	z-index:1;
	min-height:100%;
	width:960px;
	background:#fcf;
	border: 1px solid #000;
	border-top:none;
	border-bottom:none;
	display:inline-block;
	vertical-align:top;
}
* html #wrapper {
	height:100%;
	display:inline
}/* ie6 inline-block hack*/
*+html #wrapper { display:inline }/* ie7 inline-block hack */
#footer {
	position:absolute;
	bottom:0;
	left:0;
	background:red;
	height:30px;
	width:100%;
}
#sidebar {
	border-right:10px solid gold;
	padding:0 20px 0;
	-webkit-transition:margin 1s ease-in;
	-moz-transition:margin 1s ease-in;
	-ms-transition:margin 1s ease-in;
	transition:margin 1s ease-in;
}
#sidebar:hover { margin:0 }
#dummy-column {
	width: 220px;
	float:left;
	margin-left:-240px;
	padding:0 30px 0 20px;
	-webkit-transition:margin 1s ease-in;
	-moz-transition:margin 1s ease-in;
	-ms-transition:margin 1s ease-in;
	transition:margin 1s ease-in;
	height:1px;
	position:relative;
}
#sidebar:hover + #dummy-column { margin:0 }
.backnav{
	float:right;
	width:200px;
	background:blue;
	margin-right:-210px;
}
</style>
</head>

<body>
<div id="sidebar">
		<p>Sidebar test</p>
		<p>Sidebar test</p>
		<p>Sidebar test</p>
		<p>Sidebar test</p>
		<p>Sidebar test</p>
		<p>Sidebar test</p>
		<p>Sidebar test</p>
</div>
<div id="dummy-column"></div>
<div id="wrapper">
<div class="backnav">backbav test</div>
		<div id="content">
				<h1>Hover over sidebar</h1>
				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
		</div>
		<div id="footer">Footer</div>
</div>
</body>
</html>

Regarding the fixed sidebar then fixed positioning means the element will not scroll with the document and if part of the element falls outside the viewport then there is no way to retrieve it. It can’t be fixed when you want it to be fixed and then suddenly change to normal. Its either one or the other. You would need to script that behaviour.

[RyanKing1809]

@Paul_O_B

The example I posted earlier showed how to get your backnav outside the wrapper using floats and a negative margin.

Thanks Paul - but this makes the the #backnav scroll to the right as the #sidebar expands and this is not what I’m after.

I would like it to site 50px off the right edge of the window - if the window is too small for the contents then I would like it to sit 50px off the right edge of the #wrapper containing the #contents rather than the window.

So provided the the #wrapper auto-expands to the remaining width the absolute positioning the #backnav should work.
The problem is #wrapper no longer auto-expands it has a static width (presumably 980px) when I use the css from my previous post.

On further examination what appears to be causing the problem is display:inline-block; in #wrapper - taking that out allows the #wrapper to auto-expand again but causes the wrapper to jump below the sidebar if the window’s width is too small. Do you know of a way to avoid this without scripting?

@Paul_O_B

Regarding the fixed sidebar then fixed positioning means the element will not scroll with the document and if part of the element falls outside the viewport then there is no way to retrieve it. It can’t be fixed when you want it to be fixed and then suddenly change to normal. Its either one or the other. You would need to script that behaviour.

It was bound to come at some point

[PaulOB]

You can’t really mess with the structure because it will break somewhere else.

Why can’t you just absolutely place the backnav to the right of the screen if you want it outside the wrapper.

Something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	text-align:center;/* for inline-block centerimg*/
	white-space:nowrap;/*stop IE8/9 from dropping column*/
}
#wrapper, #sidebar, #footer {
	white-space:normal;
	text-align:left;
}/* reset whitespace and text */
html, body {
	margin:0;
	padding:0;
	height:100%;
}
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
#wrapper:after {
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
#sidebar {
	background-color: #333333;
	width: 220px;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	margin-left:-240px;
	color:#fff;
	overflow:auto;
	z-index:2;
}
#content {
	padding:10px 10px 35px;/* protect footer */
	zoom:1.0;/* ie haslayout*/
}
#wrapper {
	margin:0 auto;
	position:relative;
	z-index:1;
	min-height:100%;
	width:960px;
	background:#fcf;
	border: 1px solid #000;
	border-top:none;
	border-bottom:none;
	display:inline-block;
	vertical-align:top;
}
* html #wrapper {
	height:100%;
	display:inline
}/* ie6 inline-block hack*/
*+html #wrapper { display:inline }/* ie7 inline-block hack */
#footer {
	position:absolute;
	bottom:0;
	left:0;
	background:red;
	height:30px;
	width:100%;
}
#sidebar {
	border-right:10px solid gold;
	padding:0 20px 0;
	-webkit-transition:margin 1s ease-in;
	-moz-transition:margin 1s ease-in;
	-ms-transition:margin 1s ease-in;
	transition:margin 1s ease-in;
}
#sidebar:hover { margin:0 }
#dummy-column {
	width: 220px;
	float:left;
	margin-left:-240px;
	padding:0 30px 0 20px;
	-webkit-transition:margin 1s ease-in;
	-moz-transition:margin 1s ease-in;
	-ms-transition:margin 1s ease-in;
	transition:margin 1s ease-in;
	height:1px;
	position:relative;
}
#sidebar:hover + #dummy-column { margin:0 }
.backnav{
	position:absolute;
	width:100%;
	top:0;
	min-width:960px;
	z-index:9;
}
.backnav div{float:right;background:blue;padding:0 10px;margin:0 50px 0 0}
</style>
</head>

<body>
<div id="sidebar">
		<p>Sidebar test</p>
		<p>Sidebar test</p>
		<p>Sidebar test</p>
		<p>Sidebar test</p>
		<p>Sidebar test</p>
		<p>Sidebar test</p>
		<p>Sidebar test</p>
</div>
<div id="dummy-column"></div>
<div class="backnav"><div>backnav test</div></div>
<div id="wrapper">
		<div id="content">
				<h1>Hover over sidebar</h1>
				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
				<p>Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content Lorem ispsum content </p>
		</div>
		<div id="footer">Footer</div>
</div>
</body>
</html>

[RyanKing1809]

Yeah I suppose I’m getting a bit nit-picky now - that’ll have to do for those with js disabled. Thanks Paul.