Hi,
I am mocking up a quick example layout for a forthcoming project.
My layout consists of two columns, a left hand navigation bar (.leftcol) which has a fixed width of 300px and sits top left of the page. The second column (.centrecol) is 600px and needs to sit in the centre of the screen and will contain the content for the pages.
However, I want the .centrecol div to sit exactly in the centre of the screen rather than center of the space created from the left hand col to the edge of the right of the screen (if that makes sense??).
I can get it to do this fine but when viewed on a small browser the centercol overlaps the leftcol. I have tried setting paddings / margins on the centercol but then I get a horizontal scroll when I do not want one??
I have attached two mock up to demonstrate what I mean. The first (mockup-1.jpg) shows what I DO NOT want which is the centercol centered between the edge of the leftcol div and the right hand side of the browser. The second (mockup-2.jpg) shows how I want it to work, with the centercol centered equally in the center of the screen (so it is closer to the leftcol than to the edge of the right of the browser). However, when viewed on a small screen the centercol needs to butt up against the leftcol.
I hope this makes sense - let me know if not!!
Thanks for your help.
http://csscreator.com/files/mockup-1.jpg
http://csscreator.com/files/mockup-2.jpg
My Code:
#wrapper {
width:100%;
min-height:100%;
background-image: url(images/nav-bg-main.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
* html #wrapper {height:100%}/*IE6 treats height as min-height*/
/*Navigation */
#leftcol {
width:300px;
min-height:100%;
position:absolute;
left:0;
top:0;
}
#centercol {
margin-left:auto;
margin-right:auto;
width:600px;
}
<body>
<div id="wrapper">
<div class="leftcol">Content for class "leftcol" Goes Here</div>
<div class="centrecol">Content for class "centrecol" goes here</div>
</div>
</body>