austinstace
asked on
left and right fixed "frames" with css - fixed width page
It's either been to long of a day or I'm just lacking a piece of knowledge. This is what I'm attempting (widths for demo purposes only):
wrapper div centered on page, 800px wide
left column - 150 px wide, background and contents do not scroll with the page
center column - 500 px wide, scrolls up and down
right column - 150px wide, background and contents do not scroll with the page
any help is greatly appreciated. You don't have to go into a ton of detail. It's my guess that I'm just not thinking.
wrapper div centered on page, 800px wide
left column - 150 px wide, background and contents do not scroll with the page
center column - 500 px wide, scrolls up and down
right column - 150px wide, background and contents do not scroll with the page
any help is greatly appreciated. You don't have to go into a ton of detail. It's my guess that I'm just not thinking.
...in addition to that last message, if you just generally spam a load of <BR />'s and random letters in the "Middle" it works! i have the CSS for the header and footer for this as well if you need it :)!
- Animasu
- Animasu
ASKER
Animasu,
Thank you for the suggestion but by using the fixed property, the columns break out of the normal flow of the document (to be expected) so they are no longer contained within the parent div (#container). I am also looking for a fixed width, 3 column layout centered in the page. Left and right columns do not scroll with the page but remain fixed.
Thank you for the suggestion but by using the fixed property, the columns break out of the normal flow of the document (to be expected) so they are no longer contained within the parent div (#container). I am also looking for a fixed width, 3 column layout centered in the page. Left and right columns do not scroll with the page but remain fixed.
ASKER
A little sleep goes a long way. Yesterday must have been a long day. lol
This is how I accomplish what I'm attempting:
body {
text-align: center;
margin: 0px;
padding: 0px;
}
#left {
width: 50%;
position: fixed;
left: 0px;
top: 0px;
}
#right {
width: 50%;
position: fixed;
right: 0px;
top: 0px;
}
#l_col {
float: right;
width: 150px;
margin-right: 250px;
background-color: #330099;
}
#r_col {
float: left;
width: 150px;
margin-left: 250px;
background-color: #330099;
}
#center {
background-color: #00FF00;
width: 500px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #000000;
}
The HTML has the l_col and r_col as children of their respective left and right divs
This is how I accomplish what I'm attempting:
body {
text-align: center;
margin: 0px;
padding: 0px;
}
#left {
width: 50%;
position: fixed;
left: 0px;
top: 0px;
}
#right {
width: 50%;
position: fixed;
right: 0px;
top: 0px;
}
#l_col {
float: right;
width: 150px;
margin-right: 250px;
background-color: #330099;
}
#r_col {
float: left;
width: 150px;
margin-left: 250px;
background-color: #330099;
}
#center {
background-color: #00FF00;
width: 500px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 1px solid #000000;
}
The HTML has the l_col and r_col as children of their respective left and right divs
Oh i see what you did there! its a nice layout :) sorry i couldnt be of assistance!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<html>
<head>
<style type="text/css">
#container{margin:0px auto;width:100%;}
div#left {position:fixed;left:10px;
div#right {position:fixed;left:600px
div#middle {position:absolute;left:11
</style>
</head>
<body>
<div id="container">
<div id="left">Left 1</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
</div>
</body>
</html>