CSS Absolute Positioning Troubles

RyanKing1809 · February 8, 2012, 8:06am

I have the following divs:


<div id="contents">
		<div id="searchbar">
			<h1>Heading</h1> <input type="text" name="search" id="search"/>
			<input type="submit" value="Search" id="searchbutton"/>
		</div>
</div>

and css:


#contents {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
}

#searchbar {
	height: 76px;
	display: block;
}

#searchbar h1{
	font-style: italic;
	font-size: 36pt;
	display:inline-block;
	position:absolute;
	bottom: 26px;
	left: 50px;
	float: left;
	
}

#search{
	width: 400px;
	height: 24px;
	margin-top: 26px;
	margin-bottom: 26px;
	float: left;
	display: inline-block;
}

#searchbutton{
	margin-top: 26px;
	margin-bottom: 26px;
	float: left;
}
body{
	margin:0px;
	font-family: "Georgia", Serif;
}

Ok so the #contents div is suppose to be 960 wide and centred - that works. Within that div is the #searchbar div, 76px in height positioned right at the top. Within this container is the Heading, a Search-box and Search-button, they are required to all be aligned horizontally and vertically aligned in the centre (well not perfectly centre) of the parent #searchbar div.

I figured this would be a job for absolute positioning, so the Heading, a Search-box and Search-button, could be positioned relative to the the parent #searchbar container. This however doesn’t work and the elements position themselves in accordance to the the whole page, not the parent container. Another solution would be to apply a margin of 26px to the bottom of the Heading and top & bottom of the searchbox and button, however the elements seem to be ignoring their parent container and are darting about all over the place.

What am I doing wrong here?

Thanks!

ralphm · February 8, 2012, 9:03am

For the absolutely positioned elements to sit in relation to their container, the container needs to have position: relative … e.g.

#searchbar {
	height: 76px;
	display: block;
        [COLOR="#FF0000"]position:relative;[/COLOR]
}

Mind you, I tend to avoid positioning—at least for major elements—but that’s another issue.

RyanReese · February 8, 2012, 4:59pm

What ralph said, try to avoid absolutely positioning elements when possible. You should be doing minor aesthetical effects with it.

PS-giving position:absolute and float:left makes the float:left; not even work. Position:absolute will win out.
Same if you are specifying position:absolute and display:inline-block…

PaulOB · February 8, 2012, 5:20pm

You probably need 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{
	margin:0;
	padding:0;
	font-family: "Georgia", Serif;
}
#contents {
	width: 960px;
	margin: auto;
	border:1px solid #000;
	padding:10px 0;
}
#searchbar {
	height: 76px;
	line-height:76px;
	text-align:center;
	background:red
}
#searchbar h1{
	font-style: italic;
	font-size: 36pt;
	margin:0;
}
#search{
	width: 400px;
	height: 24px;
}
#searchbar h1,#searchbar div,#searchbar input{
	display: inline-block;
	vertical-align:middle;

}
* html #searchbar h1,* html #searchbar div{display:inline}/* ie6 hack for inline block - must follow after  original rule of inline-block */ 
*+html #searchbar h1,*+ html #searchbar div{display:inline}/* ie7 hack for inline block - must follow after  original rule of inline-block */ 

</style>
</head>

<body>
<div id="contents">
		<div id="searchbar">
				<h1>Heading</h1>
				<div>
						<input type="text" name="search" id="search"/>
						<input type="submit" value="Search" id="searchbutton"/>
				</div>
		</div>
</div>
</body>
</html>

RyanKing1809 · February 9, 2012, 12:51am

Thanks guys, this is all really helpful. I now have the following css which works fine. I would rather these elements to remain static in relation to their wrapper. I don’t see how this could be a a problem especially considering I plan on replacing the heading with an image - so all elements within the wrapper will be a fixed size. Is there any reason I should be avoiding absolute positioning in this case?


#contents {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
}

#searchbar {
	height: 50px;
	padding-top: 40px;
	display: block;
	position:relative;
}

#searchbar h1{
	font-style: italic;
	font-size: 36pt;
	position:absolute;
	bottom: -26px;
	left: 50px;
	
}

#search{
	width: 400px;
	height: 24px;
	position: absolute;
	bottom: 18px;
	left: 380px;
}

#searchbutton{
	position: absolute;
	height: 20px;
	width: 20px;
	bottom: 20px;
	left: 758px;
}

Paul_O_B:

You probably need 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{
	margin:0;
	padding:0;
	font-family: "Georgia", Serif;
}
#contents {
	width: 960px;
	margin: auto;
	border:1px solid #000;
	padding:10px 0;
}
#searchbar {
	height: 76px;
	line-height:76px;
	text-align:center;
	background:red
}
#searchbar h1{
	font-style: italic;
	font-size: 36pt;
	margin:0;
}
#search{
	width: 400px;
	height: 24px;
}
#searchbar h1,#searchbar div,#searchbar input{
	display: inline-block;
	vertical-align:middle;

}
* html #searchbar h1,* html #searchbar div{display:inline}/* ie6 hack for inline block - must follow after  original rule of inline-block */ 
*+html #searchbar h1,*+ html #searchbar div{display:inline}/* ie7 hack for inline block - must follow after  original rule of inline-block */ 

</style>
</head>

<body>
<div id="contents">
		<div id="searchbar">
				<h1>Heading</h1>
				<div>
						<input type="text" name="search" id="search"/>
						<input type="submit" value="Search" id="searchbutton"/>
				</div>
		</div>
</div>
</body>
</html>

Thanks, this works great until I introduce this css for a small nav bar up top the page:
This sends the #searchbar div haywire, it moves out of it’s wrapper about halfway down the page.


#backnav {
	background-color:#333333;
	display:inline-block;
	color: #dddddd;
	height: 24px;
	font-size: 9pt;
	font-weight: 100;
	float: right;
	margin-right:50px;
}

#backnav ul{
	margin-top: 5px;
	margin-left: -18px;
	margin-right: 8px;
}

#backnav li{
	list-style-type: none;
	display: inline;
	padding-right: 10px;
}

<div id="backnav">
		<ul>
			<li>Test</li>
			<li>Test</li>
			<li>Test</li>
			<li>Test</li>
			<li>Test</li>
			<li>Test</li>
			<li>Test</li>
		</ul>
	</div>
<div id="contents">
		<div id="searchbar">
			<h1>Heading</h1> <input type="text" name="search" id="search"/>
			<input type="submit" value="Search" id="searchbutton"/>
		</div>
</div>

Rayzur · February 9, 2012, 4:23am

Thanks, this works great until I introduce this css for a small nav bar up top the page:
This sends the #searchbar div haywire, it moves out of it’s wrapper about halfway down the page.

Hi,

Working with the code Paul posted: you can float (or AP) that UL to the top right. Either one of those will keep it removed from the normal page flow and allow you to keep the #searchbar div intact.

You can also do away with that div you nested the UL in and simply apply those styles to the UL itself.

See if this gets close to what you were after -


<!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 {
    margin: 0;
    padding: 0;
    font-family: "Georgia", Serif;
}
#contents {
    width: 960px;
    margin: auto;
    border: 1px solid #000;
}
ul#backnav {
    [COLOR=#0000cd]position:relative;/*IE6/7 needs this*/
    float: right;[/COLOR]
    [COLOR=#0000cd]margin: 0 0 -100% 0;/*allow #searchbar to slide up w/ neg margin*/[/COLOR]
    padding: 0;
    color: #ddd;
    background: #333;
}
#backnav li {
    float: left;
    list-style: none;
    padding: 0 5px 2px;
    font: 14px/16px "Georgia", Serif;
}
#searchbar {
    [COLOR=#0000cd]clear: both;
    min-height: 76px;
    white-space: nowrap;[/COLOR]
    text-align: center;
    background: red;
}
#searchbar h1 {
    font-style: italic;
    [COLOR=#0000cd]font-size: 48px;
    line-height:76px;[/COLOR]
    margin: 0;
}
#search {
    width: 400px;
    height: 24px;
}
#searchbar h1, #searchbar div, #searchbar input {
    display: inline-block;
    vertical-align: middle;
}
* html #searchbar h1, * html #searchbar div {display: inline}/* ie6 tripswitch */
*+html #searchbar h1, *+ html #searchbar div {display: inline}/* ie7 tripswitch */ 

</style>
</head>

<body>
<div id="contents">
    <ul id="backnav">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
    <div id="searchbar">
        <h1>Heading</h1>
        <div>
            <input type="text" name="search" id="search"/>
            <input type="submit" value="Search" id="searchbutton"/>
        </div>
    </div>
</div>
</body>
</html>

RyanKing1809 · February 9, 2012, 9:22am

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.
Would javascript be necessary? The code is now:


<body>
	<div id="sidebar"></div>
	<div id="backnav">
		<ul>...</ul>
	</div>
	<div id="wrapper">
	<div id="contents">
		<div id="searchbar">
			<h1>Heading</h1> <div><input type="text" name="search" id="search"/>
			<input type="submit" value="" id="searchbutton"/></div>
		</div>
	</div>
        </div>
</body>

with the additional css:


#sidebar {
	background-color: #333333;
	height: 100%;
	width: 220px;
	padding: 10px;
	float:left;
}

#wrapper {
	float:left;
}

PaulOB · February 9, 2012, 10:03am

Hi,

If you use a wrapper with overflow:hidden (and haslayout) applied it will form a rectangluar block to the side of the float and then you can center the content within that.


<!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">
html, body {
	margin:0;
	padding:0;
	height:100%;
}
#sidebar {
	background-color: #333333;
	width: 220px;
	padding: 10px;
	float:left;
	margin-left:-240px;
	color:#fff;
	position:relative;
}
#content {
	width: 960px;
	margin: auto;
	border: 1px solid #000;
	background:#fcf;
	padding:10px;
}
#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*/
}
#sidebar {
	border-right:10px solid gold;
	padding:20px 20px 5px;
	-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 }
</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="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>
</body>
</html>

RyanKing1809 · February 9, 2012, 3:41pm

Thank you Paul, you css savant.

RyanKing1809 · February 14, 2012, 12:19pm

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.

PaulOB · February 14, 2012, 1:51pm

Hi,

Absolute elements (of which fixed re a subset) are removed from the flow and will not affect other elements on the page unlike static elements and floats (to some degree).

Therefore if you change the sidebar to fixed then everything else on the page will act as if it isn’t there.

What you could do is add a dummy floated column to hold the space open and you would also need to animate it at the same time as the fixed column.

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">
html, body {
	margin:0;
	padding:0;
	height:100%;
}
#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 {
	width:960px;
	margin: auto;
	border: 1px solid #000;
	background:#fcf;
	padding:10px;
	zoom:1.0;
	position:relative;
	z-index:1;
}
#wrapper {
zoom:1.0;/* ie haslayout*/
overflow:hidden;/* make an auto width rectangular block next to a float */
margin:auto;
}

#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:100px;
	position:relative;
}
#sidebar:hover + #dummy-column { margin: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 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>
</body>
</html>

RyanKing1809 · February 14, 2012, 2:13pm

Thanks! - works a charm

RyanKing1809 · February 19, 2012, 8:50am

Ok hopefully this is last bit a of help I need. I have a footer that sits on the bottom of the page, it works pretty well until you resize the window then it starts colliding with the divs above it. In this particular case I have 3 images in the div #catnav, up shrinking the window the #footer slides over the #catnav div border & padding however remains bounded below by the images contained within. I assume this has something to do with absolute positioning, the #footer doesn’t slide over the div with relative positioning, but I can’t get it to stick to the bottom of the page. How can I avoid this?


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

#contents {
    width: 960px;
    margin: auto;
	padding: 10px;
	min-height: 100%;
	height: auto !important; /*for IE6*/
	height: 100%;
	position: relative;
}

#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*/
}


#marquee {
	text-align: center;
	width: 960px;
	padding: 26px 0;
	border-bottom: 1px solid #aaaaaa;
}

#catnav {
	clear: both;
	white-space: nowrap;
	text-align: center;
	padding: 26px 0;
	border-bottom: 1px solid #aaaaaa;
}

#catnav img {
	display: inline-block;
	height: 77px;
	width: 238px;
	margin: 0 40px 0 40px;
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
}


#footer {
	min-height: 30px;
	width: 960px;
	border-top: 1px solid #aaaaaa;
	position: absolute;
	bottom: 0;
	text-align: center;
	clear: both;
}

#footer ul {
    position:relative;/*IE6/7 needs this*/
    padding: 0;
	margin: 5px 0 0 0;
	display: inline-block;
	vertical-align: middle;
    color: #444444;
}

#footer li {
    float: left;
    list-style: none;
    padding: 0px 8px 0px;
    font: 12px "Georgia", Serif;
}

#footer li a{
	display: inline-block;
	color: #444444;
	text-decoration: none;
}


<body>
	<div id="wrapper">
	<div id="contents">
		<div id="marquee"><img src="marqueeimage.jpg" /></div>
		<div id="catnav">
			<img src="_images/cat1.png" />
			<img src="_images/cat2.png" />
			<img src="_images/cat3.png" />
		</div>
		
		<div id="footer">
			<ul>
				<li><a href="test.html">test</a></li>
				<li><a href="test.html">test</a></li>
				<li><a href="test.html">test</a></li>
				<li><a href="test.html">test<a></li>
				<li><a href="test.html">test</a></li>
			</ul>
		</div>
	</div></div>
</body>

PaulOB · February 19, 2012, 11:15am

Hi

Absolute elements are removed from the flow so you would have to accommodated the absolute footer with some padding on the element above the footer so that the footer becomes protected. This means the footer must be a fixed height otherwise you cannot account for it.

If you are looking for a good sticky footer method then see the css faq (see my sig) as it explains all the details and the best way to do it.

However, if you are trying to add a sticky footer to your fixed sidebar page then that may be a step too far as there are a lot of problems to overcome.

You’d have to so something like this but its gets pretty complicated:


<!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 }
</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 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>

That will work from ie7 upwards but IE7 needs the window to be open wider than the layout or the columns overlap. Other browsers should be ok though.

RyanKing1809 · February 19, 2012, 2:29pm

Thanks a lot for you help Paul but this is really starting to go beyond my understanding. The good news is I managed to get the footer not overlap with the divs, however it displays below the window & the wrapper with the auto-adjusting-width has died. I have no clue on why that’s happening. So here’s the mish-mash that is everything I got:



/*----------------------------CRAZYPANTS LAYOUT WRAPPERS---------------------------*/
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: auto;
	padding: 10px;
	min-height: 100%;
	position: relative;
	padding:10px 10px 35px;/* protect footer */
	zoom:1.0;/* ie haslayout*/
}

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

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


/*----------------------------TOP NAVIGATION BAR---------------------------*/
#backnav ul {
    position:relative;/*IE6/7 needs this*/
    float: right;
    margin: 0 50px 0 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;
}

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

#backnav li a:link {color:#dddddd}
#backnav li a:visited {color:#dddddd}
#backnav li a:hover {color:#ffffff}
#backnav li a:active {color:#ffffff}


/*----------------------------SEARCHFEILD + TITLE---------------------------*/
#searchwrapper {
    clear: both; /*avoids collision with #backnav*/
    min-height: 76px;
    white-space: nowrap;
    text-align: center;
	border-bottom: 1px solid #aaaaaa;
}

#searchwrapper h1 {
    font-style: italic;
    font-size: 48px;
    line-height: 76px;
    margin: -6px 0 0 -150px;
}

#searchfield {
    width: 360px;
    height: 24px;
	margin: 1px 0 0 10px;
	border: none;
	background:none;
}

#searchbutton {
	height: 20px;
	width: 20px;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
	margin: 0 3px 1px 0;
}

#searchbutton:hover {
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
}

#searchbar {
	margin-left: 20px;
	border-radius: 13px;
	border: 1px solid #cccccc;
	border-top: 1px solid #999999;
	height: 25px;
	display: inline-block;
/*	-moz-box-shadow: inset 0 5px 5px -5px #aaa;
	-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
	box-shadow: inset 0 5px 7px -5px #aaa;*/
}

#searchbar:hover {
	-moz-box-shadow: inset 0 5px 5px -5px #aaa;
	-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
	box-shadow: inset 0 5px 7px -5px #aaa;
}

/*<-------Use Javascript or Paul O'B's CSS Madness------->*/
/*#searchbar > #searchfield:focus {
	-moz-box-shadow: inset 0 5px 5px -5px #aaa;
	-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
	box-shadow: inset 0 5px 7px -5px #aaa;
}*/

#searchwrapper h1, #searchwrapper div, #searchwrapper input {
    display: inline-block;
    vertical-align: middle;
}

* html #searchwrapper h1, * html #searchwrapper div {display: inline}/* ie6 tripswitch */
*+html #searchwrapper h1, *+ html #searchwrapper div {display: inline}/* ie7 tripswitch */


/*----------------------------MARQUEE---------------------------*/
#marquee {
	text-align: center;
	width: 960px;
	padding: 26px 0;
	border-bottom: 1px solid #aaaaaa;
}


/*----------------------------CATEGORY NAVIGATION---------------------------*/
#catnav {
	clear: both;
	white-space: nowrap;
	text-align: center;
	padding: 26px 0;
	border-bottom: 1px solid #aaaaaa;
}

#catnav ul {
    position:relative;/*IE6/7 needs this*/
    padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align: middle;
}

#catnav li {
	display: inline-block;
	float: left;
	height: 77px;
	width: 238px;
	margin: 0 40px 0 40px;
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
}

#catnav img:hover{
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}


/*----------------------------FOOTER---------------------------*/
#footer {
	min-height: 30px;
	width: 100%;
	border-top: 1px solid #aaaaaa;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	clear: both;
	margin: auto;
}

#footer ul {
    position:relative;/*IE6/7 needs this*/
    padding: 0;
	margin: 5px 0 0 0;
	display: inline-block;
	vertical-align: middle;
    color: #444444;
}

#footer li {
    float: left;
    list-style: none;
    padding: 0px 8px 0px;
    font: 12px "Georgia", Serif;
}

#footer li a{
	display: inline-block;
	color: #444444;
	text-decoration: none;
}

#footer li a:link {color:#444444}
#footer li a:visited {color:#444444}
#footer li a:hover {color:#000000}
#footer li a:active {color:#000000}


/*----------------------------SIDEBAR---------------------------*/
#sidebar {
	background-color: #333333;
	width: 220px;
	padding: 10px;
	margin-left:-240px;
	color:#fff;
	position:fixed;
	top: 0;
	bottom: 0;
	left: 0;
	border-right:10px solid gold;
	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 }




/*---------------------EXTRAS--------------------*/
input {
	font-family: "Georgia", Serif;
	font-size: 14px;
}


input:focus {
	outline:none;
}


<html>
<head>
	<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="backnav"><?php echo $str_backnav ?><!-- Unordered list of Links--></div>
	<div id="wrapper">
		<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>

Thanks again for all the time you’ve been putting in to this.

PaulOB · February 19, 2012, 2:49pm

The code you posted seems to be working except that you need to have your backnav inside #contents or you make the page too tall.

The auto adjusting wrapper seems to be working though.


<!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>
/*----------------------------CRAZYPANTS LAYOUT WRAPPERS---------------------------*/
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: auto;
	padding: 10px;
	min-height: 100%;
	position: relative;
	padding:10px 10px 35px;/* protect footer */
	zoom:1.0;/* ie haslayout*/
}
* 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;
}
* html #wrapper {
	height:100%;
	display:inline
}/* ie6 inline-block hack*/
*+html #wrapper { display:inline }/* ie7 inline-block hack */
/*----------------------------TOP NAVIGATION BAR---------------------------*/
#backnav ul {
	position:relative;/*IE6/7 needs this*/
	float: right;
	margin: 0 50px 0 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;
}
#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;
}
#backnav li a:link { color:#dddddd }
#backnav li a:visited { color:#dddddd }
#backnav li a:hover { color:#ffffff }
#backnav li a:active { color:#ffffff }
/*----------------------------SEARCHFEILD + TITLE---------------------------*/
#searchwrapper {
	clear: both; /*avoids collision with #backnav*/
	min-height: 76px;
	white-space: nowrap;
	text-align: center;
	border-bottom: 1px solid #aaaaaa;
}
#searchwrapper h1 {
	font-style: italic;
	font-size: 48px;
	line-height: 76px;
	margin: -6px 0 0 -150px;
}
#searchfield {
	width: 360px;
	height: 24px;
	margin: 1px 0 0 10px;
	border: none;
	background:none;
}
#searchbutton {
	height: 20px;
	width: 20px;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
	margin: 0 3px 1px 0;
}
#searchbutton:hover {
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
}
#searchbar {
	margin-left: 20px;
	border-radius: 13px;
	border: 1px solid #cccccc;
	border-top: 1px solid #999999;
	height: 25px;
	display: inline-block;/*	-moz-box-shadow: inset 0 5px 5px -5px #aaa;
	-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
	box-shadow: inset 0 5px 7px -5px #aaa;*/
}
#searchbar:hover {
	-moz-box-shadow: inset 0 5px 5px -5px #aaa;
	-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
	box-shadow: inset 0 5px 7px -5px #aaa;
}
/*<-------Use Javascript or Paul O'B's CSS Madness------->*/
/*#searchbar > #searchfield:focus {
	-moz-box-shadow: inset 0 5px 5px -5px #aaa;
	-webkit-box-shadow: inset 0 5px 5px -5px #aaa;
	box-shadow: inset 0 5px 7px -5px #aaa;
}*/
 
#searchwrapper h1, #searchwrapper div, #searchwrapper input {
	display: inline-block;
	vertical-align: middle;
}
* html #searchwrapper h1, * html #searchwrapper div { display: inline }/* ie6 tripswitch */
*+html #searchwrapper h1, *+ html #searchwrapper div { display: inline }/* ie7 tripswitch */
/*----------------------------MARQUEE---------------------------*/
#marquee {
	text-align: center;
	width: 960px;
	padding: 26px 0;
	border-bottom: 1px solid #aaaaaa;
}
/*----------------------------CATEGORY NAVIGATION---------------------------*/
#catnav {
	clear: both;
	white-space: nowrap;
	text-align: center;
	padding: 26px 0;
	border-bottom: 1px solid #aaaaaa;
}
#catnav ul {
	position:relative;/*IE6/7 needs this*/
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align: middle;
}
#catnav li {
	display: inline-block;
	float: left;
	height: 77px;
	width: 238px;
	margin: 0 40px 0 40px;
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
}
#catnav img:hover {
	opacity:1.0;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}
/*----------------------------FOOTER---------------------------*/
#footer {
	min-height: 30px;
	width: 100%;
	border-top: 1px solid #aaaaaa;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	clear: both;
	margin: auto;
}
#footer ul {
	position:relative;/*IE6/7 needs this*/
	padding: 0;
	margin: 5px 0 0 0;
	display: inline-block;
	vertical-align: middle;
	color: #444444;
}
#footer li {
	float: left;
	list-style: none;
	padding: 0px 8px 0px;
	font: 12px "Georgia", Serif;
}
#footer li a {
	display: inline-block;
	color: #444444;
	text-decoration: none;
}
#footer li a:link { color:#444444 }
#footer li a:visited { color:#444444 }
#footer li a:hover { color:#000000 }
#footer li a:active { color:#000000 }
/*----------------------------SIDEBAR---------------------------*/
#sidebar {
	background-color: #333333;
	width: 220px;
	padding: 10px;
	margin-left:-240px;
	color:#fff;
	position:fixed;
	top: 0;
	bottom: 0;
	left: 0;
	border-right:10px solid gold;
	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 }
/*---------------------EXTRAS--------------------*/
input {
	font-family: "Georgia", Serif;
	font-size: 14px;
}
input:focus { outline:none; }
</style>
</head>

<body>
<div id="sidebar"></div>
<div id="dummy-column"></div>
<div id="wrapper">
		<div id="contents">
				<div id="backnav">test<?php echo $str_backnav ?><!-- Unordered list of Links--></div>
				<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">footer<?php echo $str_footnav ?><!-- Unordered list of Links--></div>
</div>
</body>
</html>

RyanKing1809 · February 19, 2012, 10:24pm

Thanks Paul, oddly, putting the #backnav inside #contents fixed the #wrapper. The thing is I would like the #backnav to sit outside #wrapper floating to the right of the wrapper. I can do this inside the #wrapper but it get pushed out of the window with the expansion of the sidebar - and when I put it outside the #wrapper - it no longer auto-adjusts its width. Why does it break the #wrapper?

PaulOB · February 19, 2012, 10:59pm

Hi,

#wrapper is min-height:100% high which means it goes from top to bottom of viewport. If you place anything above it then it will go 100% from where it is and then push below the fold because the 100% will start from its new position.

If you place something outside of that wrapper then it will be a bit wide. You’d need to lose the overflow:hidden as in the last method I posted.


<!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>

Your best option would be to keep everything else inside that centred wrapper though.

system · February 20, 2012, 4:57am

I just end up with more questions than answers watching this thread… why is OP declaring inline-block on floats (since they’re inherently block and that doesn’t trip the margin doubling fix?!?), Why all the floats on stuff that’s aligned LEFT? Where’s your form? Your fieldset? Why is the H1 considered part of the search bar?!? 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.

If I WERE to APo anything in this layout, it would be the form, NOT the h1.


<div id="pageWrapper">
	<h1>Heading</h1>
	<form id="search" action="#" method="get">
		<fieldset>
			<input type="text" name="search" id="search"/>
			<input type="submit" value="Search" id="searchbutton"/>
		</fieldset>
	</form>
</div>


#pageWrapper {
	position:relative;
	width:960px;
	min-height:100%;
	margin:0 auto;
}

h1 {
	margin-top:2em; /* == search bar height */
	font:italic 36pt/40pt georgia,times,serif;
}

#search {
	position:absolute;
	top:0;
	left:0;
	/* setting both height and line-height makes vertical-align predictable */
	height:2em;
	line-height:2em;
}

#search input {
	vertical-align:middle;
}

… then let flow do the work for you… This way that pt declaration doesn’t end up broken-height; I’d SERIOUSLY look at %/EM or even PX for that h1 before I’d even THINK about PT in this day and age… Probably PX at that massive size so it’s predictable height since NOBODY is going to kvetch about 48px to 60px being ‘too small’.

Again, I think you guys are making this WAY more complicated than it needs to be…

PaulOB · February 20, 2012, 9:10am

You’ll need to look at my posts 11 and 14 to understand the dynamics of this as it is not quite as simple as you make out. The main point being that the centred layout reacts to the fixed positioned sidebar that slides out and the layout remains centred in the available space. The sticky footer was an additional requirement that followed later making it more complicated.

In my example I removed the floats and used inline-block instead to counter the fact that IE8/9 would drop the floats if the window was squeezed. Using inline-block allows white-space:nowrap to work in iE8+ and thus the layout doesn’t drop anymore.

So the basic requirements are:

A fixed positioned sidebar that slides out.
The rest of the layout should be centered in the available space exactly even when the fixed position sidebar slides out
A sticky footer