...

View Full Version : 3 Column, Fluid, fixed, oyoyoy



jayemvee
05-19-2007, 09:13 AM
Here's what I am trying to do.

The page should be set up like so
______________
|___header____|
| | | |
| | | |
|___|____|____|

I want the header and the right column to be fixed, but I want the left and the middle to scroll

Any thoughts on how to do this? I've tried it in CSS and in tables neither is working like I would want it to.

_Aerospace_Eng_
05-19-2007, 09:50 AM
Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Fixed Header and Right Column</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
font-size:0.9em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#container {
height:100%;
min-width:780px;
}
#header {
position:fixed;
height:8em;
border-bottom:1px solid #000;
background:#F00;
top:0;
left:0;
width:100%;
z-index:1;
}
#right {
position:fixed;
height:100%;
background:#00F;
width:200px;
border-left:1px solid #000;
right:0;
top:0;
z-index:0;
}
#rightcontent, #main {
padding-top:8.25em; /*this needs to be equal or greater than the height of #header*/
}
#main {
padding-right:201px; /*this needs to be equal or greater than the width of #right*/
}
#left {
width:200px;
float:left;
}
#content {
margin-left:200px; /*this needs to be equal to or greater than the width of #left*/
}
#content p {
padding:10px;
text-align:justify;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html {
overflow-x:auto;
overflow-y:hidden;
}
body {
overflow-y:auto;
/*the below is to fake min-width in IE6 and below. Change 780 to match the min-width in #container*/
width:expression( documentElement.clientWidth < 780 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 780 ? "780px" : "auto") : "780px") : "auto" );
}
#header, #right { /*anything position:absolute or position:relative; will now become position:fixed in IE6*/
position:absolute;
}
#left {
margin-right:-3px;
}
#content {
margin-left:0;
height:1%;
}
#header {
width:expression(parseFloat(document.body.clientWidth)+'px');
}
#right { /*101 is the width of the #right column, be sure to adjust this accordingly*/
left:expression(parseFloat(document.body.clientWidth - 201) + 'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">This is the header</div>
<div id="right">
<div id="rightcontent">This is the right column</div>
</div>
<div id="main">
<div id="left">This is the left column</div>
<div id="content">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec semper orci et justo. Quisque iaculis tempor dui. Sed sed lacus. Donec aliquam. Aenean eu mi laoreet libero hendrerit facilisis. Donec blandit, nisi at feugiat facilisis, arcu tortor porta nulla, quis tincidunt diam ipsum ac risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed non metus nec sem elementum auctor. Sed posuere, diam ac vehicula congue, libero massa rhoncus diam, sed eleifend enim risus non mi. In hac habitasse platea dictumst. Mauris tristique nibh sit amet diam. Integer ac leo. Fusce id ante quis lectus cursus cursus. Cras lacus nulla, malesuada ac, pretium in, sollicitudin in, nunc. </p>
<p> Curabitur eget dolor. Duis condimentum orci sed turpis. Vivamus dictum mattis lorem. Cras sit amet sem. Aliquam erat volutpat. Suspendisse interdum, leo sed posuere gravida, justo justo faucibus orci, id suscipit nunc augue at mauris. Praesent eu massa at orci vulputate varius. Nam pellentesque feugiat libero. Mauris tortor tortor, auctor vitae, euismod id, cursus ut, odio. Donec fermentum vehicula mauris. Maecenas vulputate ligula in lorem. </p>
<p> Duis euismod. Sed euismod enim euismod leo. In aliquet. Morbi erat odio, auctor et, pellentesque a, aliquet quis, enim. Nulla lobortis odio ac diam. In vestibulum erat ac elit. Sed at diam. Donec tempus, urna ac pretium pellentesque, neque nunc varius purus, eu posuere purus leo ac lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin aliquam tellus id felis. Vivamus odio. Nulla tellus. Proin euismod blandit nulla. Integer ultrices, risus varius hendrerit laoreet, turpis diam sodales tellus, a ultricies sapien augue sed nunc. Aliquam eu ante. Donec cursus pede id eros. Ut pulvinar diam quis ante. Nullam iaculis, leo id consectetuer condimentum, est dui aliquam nisl, nec ultrices enim diam eget nisl. Aliquam porta. </p>
<p> Donec lobortis euismod mauris. Integer velit pede, imperdiet in, feugiat eu, tincidunt gravida, ante. Morbi odio. In hac habitasse platea dictumst. Mauris feugiat. Sed malesuada leo. In massa orci, porttitor eget, congue quis, auctor quis, magna. Curabitur viverra nulla vitae enim. Proin elementum pulvinar justo. Vestibulum a purus. Aliquam erat volutpat. Vivamus sed purus sit amet lorem venenatis rutrum. Etiam ut nisi. Ut sit amet odio. Praesent rutrum hendrerit lectus. Ut tempor. In ligula. Proin a metus. </p>
<p> Sed at felis. Aenean nonummy malesuada metus. Phasellus cursus hendrerit turpis. Pellentesque rutrum sapien sed enim. Mauris mi. Cras tempor, leo a convallis ultricies, lorem purus lobortis diam, eu tristique mauris sem ac massa. Morbi tempor libero quis orci. Etiam pellentesque, purus vitae congue cursus, lacus nulla malesuada nibh, ut rhoncus erat nibh id justo. Nulla faucibus. Phasellus a diam. Aliquam egestas, elit at feugiat volutpat, lectus velit imperdiet magna, accumsan dictum eros quam scelerisque mi. Etiam vulputate. Nullam vel leo. Duis pulvinar congue urna. Curabitur mattis. Suspendisse potenti. </p>
<p> Aliquam erat volutpat. Sed nisi. Morbi ultrices massa non elit. Integer mattis. In ligula. Sed congue fringilla tellus. Aliquam justo. Etiam dignissim consectetuer elit. Vivamus vestibulum, lectus non pharetra aliquet, odio ante facilisis magna, nec porta eros lorem id urna. Nunc placerat arcu nonummy nibh. Nunc egestas dignissim lorem. In consequat, dui ac suscipit cursus, urna elit tincidunt tellus, id malesuada metus lorem vestibulum nulla. Nam tempus eros id ipsum. Ut imperdiet. Phasellus aliquet. Quisque sapien quam, vehicula vel, ullamcorper sed, porttitor in, augue. Nunc ornare, lacus eget consectetuer accumsan, ipsum dolor volutpat tellus, a malesuada dui nulla vitae justo. Aliquam ante. </p>
<p> Donec eleifend risus id risus. Aenean aliquet est tristique quam. Praesent eget magna a risus faucibus mollis. Nulla commodo sem nec elit. Phasellus blandit pharetra lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis odio velit, sagittis a, tincidunt non, pulvinar quis, tortor. Vivamus ut arcu id sapien suscipit pulvinar. Nulla nec velit. Curabitur mi quam, vulputate fermentum, porta interdum, sagittis at, est. Morbi accumsan est. Cras interdum. Quisque varius lacus non nunc. Vestibulum at arcu in dolor lacinia malesuada. Aenean vulputate massa sit amet quam. Curabitur tempor nisl eu metus. </p>
<p> Nunc ac magna. Sed aliquet. Nullam eleifend eleifend libero. Cras arcu. Integer sollicitudin dolor bibendum justo. Etiam congue. Suspendisse neque. Vivamus eu nunc. Proin tellus magna, commodo in, consectetuer et, blandit et, libero. Nulla tempor. Cras lorem. Pellentesque posuere. Suspendisse non lorem et orci condimentum cursus. </p>
<p> Mauris pulvinar, purus eget tempus scelerisque, quam odio mattis ligula, in pulvinar neque felis nec nulla. Etiam feugiat. Cras in ante in arcu eleifend pharetra. Vestibulum id nibh. Sed molestie pretium magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent aliquet ipsum vitae mauris. Ut ac leo et ligula semper tristique. Vivamus sit amet massa. Phasellus sodales. Cras sagittis, sem at consectetuer lobortis, est orci molestie diam, fermentum tincidunt elit lectus at purus. Duis eu felis. Maecenas non turpis a nibh condimentum lacinia. Maecenas eget nisl. Sed bibendum sagittis dui. Donec et magna id quam iaculis fringilla. Suspendisse ipsum massa, imperdiet aliquet, euismod nec, ultricies vel, nisl. </p>
<p> Aenean lorem. Nunc pede felis, tempor sed, varius eu, dapibus in, libero. Donec dui orci, interdum eu, ullamcorper eget, dapibus vitae, sem. Phasellus at magna a tellus consectetuer tincidunt. Sed vitae nisl nec nisi facilisis tincidunt. Nullam orci turpis, luctus ut, malesuada eget, elementum in, ante. Phasellus erat lectus, tincidunt consectetuer, adipiscing ut, hendrerit ac, urna. Nullam adipiscing nisl et neque. Nunc aliquet tellus id nulla. Cras eu dolor. Pellentesque tempus posuere dui. Nunc ac diam. Quisque pellentesque nisi non metus. Sed fringilla metus. In hac habitasse platea dictumst. Morbi vestibulum. </p>
</div>
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum