Menu
Stop page width collapsing
Hi
I have a simple demo here representing the problem I have.
[url]http://www.ttmt.org.uk/forum/demo/
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.
[code]
<!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>