CODEWITHSUNDEEP
htmlcss
Cameron
Cameron

Reputation: 28853

CSS Fixed sidebar

The following HTML creates a simple layout with a fixed sidebar, but I want to put the sidebar on the right-hand side of the content

Please see the code snippet:

#container
    {
    	width: 1140px;
    	max-width: 98%;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;
    	min-height: 100%;
    }
    #header
    {
    	position: fixed;
    	z-index: 20;
    	width: 180px;
    	padding-top: 100px;
    	text-align: right;
    }
    #maincontent
    {
    	padding-left: 220px;
    	padding-top: 100px;
    }
<!doctype html>
    <html lang="en">
    	<head>
    		<title>Test</title>
    		<link rel="stylesheet" href="master.css" type="text/css" />
    	</head>
    	<body>
    	
    		<div id="container">
    		
    			<header id="header">
    				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    			</header>
    			
    			<div id="maincontent">
    				<div style="height:1280px;background:#333;"></div>
    			</div>
    		
    			<div style="height:100px;"></div>
    		
    		</div>
    	
    	</body>
    </html>

The problem is that I would need to specify the right on the sidebar (#header) and in doing so would mean the sidebar WOULD NO LONGER honour the container...

Any ideas how I could get around this? Thanks

Upvotes: 1

Views: 10757

Answers (3)

Jake
Jake

Reputation: 2086

The trick to this that I just found is to position the item that you want to show up on the right side (header) how you want it to show up. So float it over there.

Then add an inner container that is fixed.

Full working example: http://jsfiddle.net/jupitercow/MjPC4/

So, I updated your header CSS like this:

#header
{
    float: right;
    z-index: 20;
    width: 180px;
    padding-top: 100px;
    text-align: right;
}
#header .inner {
    position: fixed;
    width: 180px;
}

And the HTML:

<header id="header">
    <div class="inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</header>

Upvotes: 1

Jose Faeti
Jose Faeti

Reputation: 12314

#header {
  float:right;
}

Remove those huge paddings from #maincontent and if necessary fix #maincontent width.

Upvotes: 0

NGLN
NGLN

Reputation: 43664

Do you mean something like this? See http://jsfiddle.net/NGLN/fDxdj/.

Tip: rename header to sidebar... ;)

But I don't understand what you mean by

doing so would mean the sidebar WOULD NO LONGER honour the container

since position: fixed doesn't honour anything. Not in your current sample, not never. It only honours the browser window, like it's supposed to.

Upvotes: 0

Related Questions