Jump to content

Structure issue


MagicHat
 Share

Recommended Posts

Hello All, I'm having trouble with my CSS structure. I have a div=content-container and a div=content. In my editor it shows my content-container shorter than my content, but if I change the content-container to auto, it screws up the positioning of the entire page. I am trying to have a fixed leftSidebar and a fixed header (the header does not fix top center when I define fixed for the header). I would like the page to be centered starting at the leftSidebar and ending at the content-container. Thanks for the help!You can see what I have so far on my site. Sorry it doesn't look pretty, I was testing a background.I figure it might be easier to show the code:

body{	background-image:url(Images/armada.gif);}#container{		margin: 0 auto;	width: auto;	height: auto;	/*z-index: 0;*/}#header{		padding: 20px;	text-align:center;	font-style:oblique;	font-size:18px;	}#content-container{	float: none;	width: 900px;	height: 900px;	}#content{	background-color:#CCCCCC;	float:right;	width: 700px;	padding: 10px;	margin: 10px;	border:groove;	line-height:155%;}#leftSidebar{	position: fixed;	float: left;	width: 50px;	padding: 20px;	margin: 20px;}

<body><div id="container"><div id="header"> UNDER CONSTRUCTION</div><div id="content-container"><div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum interdum ligula et pharetra. Aenean pretium semper libero vel tristique. Nam eget libero et nisl commodo elementum a in arcu. Vestibulum sollicitudin tincidunt libero, sit amet porta lorem bibendum ut. Mauris vulputate euismod diam, et fringilla augue dapibus sed. Vestibulum elementum massa ut ipsum dignissim tincidunt. Phasellus justo neque, vehicula eu viverra quis, ornare ac nibh. Aenean at massa sapien, nec pretium neque. Morbi ultrices semper nulla, eu varius nisl malesuada ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris sodales fringilla viverra.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum interdum ligula et pharetra. Aenean pretium semper libero vel tristique. Nam eget libero et nisl commodo elementum a in arcu. Vestibulum sollicitudin tincidunt libero, sit amet porta lorem bibendum ut. Mauris vulputate euismod diam, et fringilla augue dapibus sed. Vestibulum elementum massa ut ipsum dignissim tincidunt. Phasellus justo neque, vehicula eu viverra quis, ornare ac nibh. Aenean at massa sapien, nec pretium neque. Morbi ultrices semper nulla, eu varius nisl malesuada ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris sodales fringilla viverra.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum interdum ligula et pharetra. Aenean pretium semper libero vel tristique. Nam eget libero et nisl commodo elementum a in arcu. Vestibulum sollicitudin tincidunt libero, sit amet porta lorem bibendum ut. Mauris vulputate euismod diam, et fringilla augue dapibus sed. Vestibulum elementum massa ut ipsum dignissim tincidunt. Phasellus justo neque, vehicula eu viverra quis, ornare ac nibh. Aenean at massa sapien, nec pretium neque. Morbi ultrices semper nulla, eu varius nisl malesuada ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris sodales fringilla viverra.</p><p>Vestibulum vel lacus pellentesque magna molestie pellentesque nec pretium nibh. Morbi molestie ultrices elit, et gravida odio cursus sit amet. Sed at interdum diam. Duis mollis dolor sed nulla sollicitudin vitae ultrices mi aliquam. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat enim, faucibus sed bibendum vehicula, semper ac purus. Aliquam vestibulum mattis laoreet. In convallis pharetra sodales. Curabitur a nisi neque, tempus eleifend felis. Aliquam erat volutpat. In condimentum augue et ligula eleifend feugiat. Proin vel eros quis est auctor accumsan et dictum nisl.</p><p>Nullam quis urna vel arcu malesuada interdum nec in justo. Duis eu orci fringilla sem sollicitudin gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pellentesque, odio id ornare vulputate, justo ipsum adipiscing est, eu laoreet tellus risus interdum augue. Duis ac sapien purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque mollis laoreet magna, nec mattis metus iaculis ac. Vestibulum in felis eget nisl pulvinar dapibus vitae at dui. Aliquam hendrerit, ipsum eu congue semper, dui risus pharetra sapien, eget cursus neque lacus quis urna. Vestibulum posuere tellus eget nibh adipiscing eget condimentum mauris venenatis. Maecenas vestibulum erat at mauris malesuada et tristique velit vehicula. Nulla facilisi. Donec eu ante et velit vulputate ultrices sit amet ac felis. Donec ligula arcu, vulputate id blandit eu, suscipit non mauris.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum interdum ligula et pharetra. Aenean pretium semper libero vel tristique. Nam eget libero et nisl commodo elementum a in arcu. Vestibulum sollicitudin tincidunt libero, sit amet porta lorem bibendum ut. Mauris vulputate euismod diam, et fringilla augue dapibus sed. Vestibulum elementum massa ut ipsum dignissim tincidunt. Phasellus justo neque, vehicula eu viverra quis, ornare ac nibh. Aenean at massa sapien, nec pretium neque. Morbi ultrices semper nulla, eu varius nisl malesuada ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris sodales fringilla viverra. Vestibulum vel lacus pellentesque magna molestie pellentesque nec pretium nibh. Morbi molestie ultrices elit, et gravida odio cursus sit amet. Sed at interdum diam. Duis mollis dolor sed nulla sollicitudin vitae ultrices mi aliquam. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat enim, faucibus sed bibendum vehicula, semper ac purus. Aliquam vestibulum mattis laoreet. In convallis pharetra sodales. Curabitur a nisi neque, tempus eleifend felis. Aliquam erat volutpat. In condimentum augue et ligula eleifend feugiat. Proin vel eros quis est auctor accumsan et dictum nisl. Nullam quis urna vel arcu malesuada interdum nec in justo. Duis eu orci fringilla sem sollicitudin gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pellentesque, odio id ornare vulputate, justo ipsum adipiscing est, eu laoreet tellus risus interdum augue. Duis ac sapien purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque mollis laoreet magna, nec mattis metus iaculis ac. Vestibulum in felis eget nisl pulvinar dapibus vitae at dui. Aliquam hendrerit, ipsum eu congue semper, dui risus pharetra sapien, eget cursus neque lacus quis urna. Vestibulum posuere tellus eget nibh adipiscing eget condimentum mauris venenatis. Maecenas vestibulum erat at mauris malesuada et tristique velit vehicula. Nulla facilisi. Donec eu ante et velit vulputate ultrices sit amet ac felis. Donec ligula arcu, vulputate id blandit eu, suscipit non mauris.</p><!-- content end -->  </div><div id="leftSidebar"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum interdum ligula et pharetra. Aenean pretium semper libero vel tristique. Nam eget libero et nisl commodo elementum a in arcu. Vestibulum sollicitudin tincidunt libero, sit amet porta lorem bibendum ut.<!-- leftSidebar end --></div><!-- content-container end--></div><!-- container end --> </div></body>

Link to comment
Share on other sites

I am trying to have a fixed leftSidebar and a fixed header (the header does not fix top center when I define fixed for the header). I would like the page to be centered starting at the leftSidebar and ending at the content-container.
There are several ways to accomplish this. one way is to use z-index to make the body scroll UNDERNEATH the header. See code below with comments. Add some meat to the sidebar and body and test it out in various browsers
<head><style type="text/css">div.header	{	position: fixed;	/*so it will not scroll*/	top: 0px;	padding-left: 150px;	/*width of sidebar*/	height: 100px;	/*see sidebar offset*/	border: solid black 1px;	/*for demonstration and testing only*/	background: #ffffff;	/*needs dfault color to be opaque*/	z-index:	100;		/*place it on top*/	}div.sidebar	{	position: fixed;	top:	100px;		/*same as header size*/	left:	0px;	width:	150px;		/*see padding for header*/	z-index: 100;		/*also opn top*/	}div.content	{	margin-left: 150px;	/*match sidebar width*/	z-index:	1;		/*so it scrolls under the header*/	}</style></head><body><div class="header"><h1>page header</h1></div><div class="sidebar">sidebar goes here</div><div class="content">main content goes here</div></body>

The centering of the header across the CONTENT can be calculated is you assign content a fixed width - however I do not recommend it. Your content should flow without a horizontal scrollbar regardless of my browser width.I have a concern with your theory. If my browser height is less than your total sidebar content, I will miss some important information.good luck......Guy

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...