Forum Moderators: not2easy
It works in Opera 6, Konqueror, and several Mozilla-based browsers. However, in IE it's a mess - about the only thing it honors is my margin settings.
The CSS looks something like this (in an external file):
body
{
color: #000000;
background: #ffffff;
margin-left: 10.5em;
margin-top: 10.5ex;
}
#navbar
{
background: lightblue;
vertical-align: top;
position: fixed;
left: 0px;
top: 0px;
height: 100%;
width: 9em;
padding: .5em;
}
#header
{
position: fixed;
background: #ffffff;
top: 0px;
height: 10ex;;
}
and the HTML looks like:
<div id="main">
The main content of the page
</div>
<div id="footer">
a witty quote from `fortune` - my users love this.
</div>
<div id="navbar">
Site navigation
</div>
<div id="header">
Site title, greeting, status kinds of stuff
</div>
This has its quirks - there doesn't seem to be a reliable way to make the header as wide as the rest of the page without making it scroll, for example - one thing works in Gecko, another in Opera - and Opera likes to display form elements right through the fixed-position divs if they get scrolled there, but it seemed promising until I looked at it in IE. Is there any hope here?
IE doesnt supprot this property as far as I know....
Nick
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body{
}
#main{
margin-left: 9em;
}
#footer{
margin-left: 9em;
}
#navbar{
width: 9em;
left: 0px;
top: 0px;
background-color: lightblue;
height: 100%;
float: left;
position: absolute;
}
#header{
margin-left: 9em;
}
</style>
</head>
<body>
<div id="main">The main content of the page</div>
<div id="footer">a witty quote from `fortune` - my users love this.</div>
<div id="navbar">Site navigation</div>
<div id="header">Site title, greeting, status kinds of stuff</div>
</body>
</html>
I await the verdict eagerly ;)
Are we talking IE6 that that works on?
I was pretty sure 5+ wouldnt do it....
Nick
Nick
(1) Is there a way, without sacraficing my nice structural mark-up, to make the header div in that first example fill all the horizontal space to the right of the navbar? Setting its width property to "100%" makes it as wide as the viewport, and therefore makes it go off the screen to the right. In Gecko, that's OK as long as there isn't content that far right in the <div>, so it doesn't scroll. In Opera, though, it scrolls left-right no matter what. I can get the width I want in Opera by setting some element inside the div to 100% width, but Gecko doesnt care about that unless that element is actually going to take all the space.
(2) Can I make the footer div stick to the bottom of the viewport when the page is otherwise not long enough to get it there, and the bottom of the page if the pages is long enough to scroll, without Javascript?
I know, I'm asking a lot and some of this may not be doable, but I also know there are people here who know far more about CSS than I do yet.
Here are another two. All 3 work fine in IE6, Mozilla 1.1, Opera 6.05
And your heading's fixed.
--------------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body{
}
#main{
margin-left: 9em;
margin-top: 20px;
}
#footer{
margin-left: 9em;
}
#navbar{
width: 9em;
left: 0px;
top: 0px;
background-color: lightblue;
height: 100%;
float: left;
position: absolute;
}
#header{
float: left;
left: 9.5em;
top: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="main">The main content of the page</div>
<div id="footer">a witty quote from `fortune` - my users love this.</div>
<div id="navbar">Site navigation</div>
<div id="header">Site title, greeting, status kinds of stuff</div>
</body>
</html>
-----------------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
body{
margin-left: 150px;
}
#main{
margin-top: 25px;
}
#footer{
}
#navbar{
width: 150px;
left: 0px;
top: 0px;
background-color: lightblue;
height: 100%;
position: absolute;
}
#header{
left: 150px;
top: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="main">The main content of the page</div>
<div id="footer">a witty quote from `fortune` - my users love this.</div>
<div id="navbar">Site navigation</div>
<div id="header">Site title, greeting, status kinds of stuff</div>
</body>
</html>
asp
Thanks, though. I'm kinda new to positioning with CSS.
