I have two columns the left will contain the nav and the right the content.
When the page scrolls down I want to keep the nav in view so the left column has position:fixed;
The right column has position:relative for other position code.
My problem is when the window is made narrower than the content and the horizontal scroll bar is used
the left content goes over the right nav column.
I can see why this is happening - the right column has position:fixed which removes it from the flow of the document so the left column just flows over it.
I know this is a simple problem but I can’t work out how to fix it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
*{
margin:0;
padding:0;
overflow:inherit;
}
#pageWrap{
width:800px;
}
#left{
background:red;
width:200px;
float:left;
position:fixed;
height:500px;
}
#left p{
width:120px;
margin:20px;
color:white;
}
#right{
background:yellow;
margin:0 0 0 200px;
width:600px;
float:left;
position:relative;
}
#right p{
margin:30px;
width:550px;
}
</style>
</head>
<body>
<div id="pageWrap">
<div id="left">
<p>Left Side</p>
</div><!-- #left -->
<div id="right">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical……</p>
</div><!-- #right -->
</div>
</body>
</html>
It’s not a major concern but I would of liked it if the left column was fixed when the vertical scroll bar moved up/down and for the left and right columns to scroll left/right if the window was narrower then the content
Like here where i have removed the position:fixed from the left column.
No that’s not possible because a fixed element basically means that it doesn’t scroll because its fixed. It’s just one of the reasons that fixed elements are best used for small footers or headers or for very small elements to the side.
If you think about it then you are not losing any function in your page because in your demo above the red column slides out of the viewport whiile in the fixed version the content slides over the fixed column. In both cases you lose the red columns content but in different ways.
That’s just the way fixed positioning works I’m afraid. What other outcome would you have expected (or wanted)?
It’s either fixed or it isn’t.
You can change the stacking levels so the yellow content passes behind the fixed element but you can’t make the content scroll and still not travel over the red fixed element.
The only other alternative would be to put a scrollbar on thge right content rather than the viewport but that’s not a nice solution eiether.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
* {
margin:0;
padding:0;
}
#pageWrap {max-width:800px; }
#left {
background:red;
width:200px;
float:left;
position:fixed;
height:500px;
}
#left p {
width:120px;
margin:20px;
color:white;
}
#right {
background:yellow;
margin:0 0 0 200px;
max-width:600px;
position:relative;
overflow:auto;
}
#right p {
margin:30px;
width:550px;
}
</style>
</head>
<body>
<div id="pageWrap">
<div id="left">
<p>Left Side</p>
</div>
<!-- #left -->
<div id="right">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical……</p>
</div>
<!-- #right -->
</div>
</body>
</html>
Or remove the width from the p element in the rightside in the above code and let the text compress with the page. You verey rarely want to keep setting width on the p elements anyway as a simple margin or padding will give you the same effect without being tied down to specifics.
