SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 34
  1. #1
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Absolute Positioning Troubles

    I have the following divs:
    Code HTML4Strict:
    <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:
    Code 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!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    For the absolutely positioned elements to sit in relation to their container, the container needs to have position: relative ... e.g.

    Code:
    #searchbar {
    	height: 76px;
    	display: block;
            position:relative;
    }
    Mind you, I tend to avoid positioning—at least for major elements—but that's another issue.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    You probably need something like this:

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

  5. #5
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code CSS:
    #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;
    }

    Quote Originally Posted by Paul O'B View Post
    You probably need something like this:

    Code:
    <!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.

    Code CSS:
    #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;
    }


    Code HTML4Strict:
    <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>

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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 -
    Code:
    <!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 {
        position:relative;/*IE6/7 needs this*/
        float: right;
        margin: 0 0 -100% 0;/*allow #searchbar to slide up w/ neg margin*/
        padding: 0;
        color: #ddd;
        background: #333;
    }
    #backnav li {
        float: left;
        list-style: none;
        padding: 0 5px 2px;
        font: 14px/16px "Georgia", Serif;
    }
    #searchbar {
        clear: both;
        min-height: 76px;
        white-space: nowrap;
        text-align: center;
        background: red;
    }
    #searchbar h1 {
        font-style: italic;
        font-size: 48px;
        line-height:76px;
        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>

  7. #7
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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 -
    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:

    Code HTML4Strict:
    <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:

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

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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.

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

  9. #9
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, you css savant.

  10. #10
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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:

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

  12. #12
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! - works a charm

  13. #13
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code CSS:
    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;
    }

    Code HTML4Strict:
    <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>

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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:

    Code:
    <!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.

  15. #15
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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:
    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:

    Code CSS:
     
    /*----------------------------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;
    }

    Code HTML4Strict:
    <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.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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.

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

  17. #17
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    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?

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code:
    <!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.

  19. #19
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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>
    Code:
    #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...

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Again, I think you guys are making this WAY more complicated than it needs to be...
    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:

    1) A fixed positioned sidebar that slides out.

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

    3) A sticky footer

  21. #21
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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...

    Quote Originally Posted by Paul O'B View Post
    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.

    Quote Originally Posted by Paul O'B View Post
    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?

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.

  23. #23
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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".

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.

  25. #25
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •