5 replies [Last post]
ICP Fan
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-01
Posts: 5
Points: 0

I have been trying all day to create this layout. The header, footer, right column, and left column need to be fixed. The center column needs to utilize the browser scroller. It also needs to degrade gracefully. I had a pretty good 3 column design with fixed header and footer, but my boss wants the right and left columns fixed.

body { background: #333333 url(img/bg1.jpg); color: #2B2B2B; margin: 0; font-family: arial, times, Times, georgia, serif; text-align: center; margin-bottom: 15px; margin-top: 170px; margin-left: 200px; margin-right: 200px; } #header { position: absolute; top: 0; left: 0; width: 100%; height: 170px; z-index: 13; background-color: #333; } #head { margin: 0; text-align: left; color: #ffffff; letter-spacing: 5px; word-spacing: 10px; background: #252525; padding-right: 0px; padding-left: 0px; padding-bottom: 5px; padding-top: 5px; float: left; } #masterNavigation { background: #6ABC21; margin: auto; padding: 0 10px 0px 10px; clear: both; width: 100%; text-align: center; } #left { position: absolute; width: 200px; color: #fff; line-height: 20px; word-spacing: 2px; margin-top: -1px; top: 170; left: 0; z-index: 11; min-height: 510px; background-color: #333; } #right { position: absolute; width: 200px; color: #fff; line-height: 20px; word-spacing: 2px; margin-top: -501px; top: 170; right: 0; z-index: 12; background-color: #333; min-height: 510px; } #content { background-color: #fff; text-align: center; padding-top: 3px; overflow: visible; margin-top: 5px; min-width: 600px; min-height: 500px; } #footer { background: #6ABC21; text-align: center; color: #2D4E0E; font-size: 0.8em; padding: 4px; line-height: 12px; height: 15px; width: 100%; position: absolute; bottom: 0; left: 0; z-index: 10; } .clear { clear: both; } /* Stay where you are! */ html > body #footer { position: fixed; } html > body #header { position: fixed; } html > body #left { position: fixed; } html > body #right { position: fixed; }
















Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Can we see the code as it's

Can we see the code as it's actually output to the browser (including the doctype)?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ICP Fan
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-01
Posts: 5
Points: 0

Its not pretty

Untitled Page

.ctl00_masterNavigationMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_masterNavigationMenu_1 { text-decoration:none; }
.ctl00_masterNavigationMenu_2 { width:910px; }
.ctl00_masterNavigationMenu_3 { border-style:none; }
.ctl00_masterNavigationMenu_4 { }
.ctl00_masterNavigationMenu_5 { border-style:none; }
.ctl00_masterNavigationMenu_6 { }




Televerde




Skip Navigation Links


Enroll Client



Manage Clients


Manage Client Images



Manage Client CSS


Manage Users










Test Client 0






Test Grouping 0






Test Campaign G...







Test Campaign G...










Test Grouping 1






Test Campaign G...







Test Campaign G...












Test Client 1







Test Grouping 0







Test Campaign G...







Test Campaign G...









Test Grouping 1







Test Campaign G...








Test Campaign G...













Test Client 2






Test Grouping 0






Test Campaign G...







Test Campaign G...










Test Grouping 1






Test Campaign G...







Test Campaign G...












Test Client 3






Test Grouping 0







Test Campaign G...








Test Campaign G...










Test Grouping 1






Test Campaign G...







Test Campaign G...













Test Client 4






Test Grouping 0






Test Campaign G...







Test Campaign G...










Test Grouping 1







Test Campaign G...







Test Campaign G...












Marklar






Marklar Group










Left Bottom




//


function setCaretToEnd(textbox)
{
var control = document.getElementById(textbox);
if (control.createTextRange)
{
var range = control.createTextRange();
range.collapse(false);
range.select();
}
else if (control.setSelectionRange)
{
control.focus();
var length = control.value.length;
control.setSelectionRange(length, length);
}
}
function CallOnKeyPress(textbox)
{
var t = document.getElementById(textbox);
if (t)
{
t.onchange();
}
}







Campaign Projects

Campaign Name:







Projects


 


function setCaretToEnd(textbox)
{
var control = document.getElementById(textbox);
if (control.createTextRange)
{
var range = control.createTextRange();
range.collapse(false);
range.select();
}
else if (control.setSelectionRange)
{
control.focus();
var length = control.value.length;
control.setSelectionRange(length, length);
}
}

function CallOnKeyPress(textbox)
{
var t = document.getElementById(textbox);
if (t)
{
t.onchange();
}
}









>>" id="ctl00_ContentPHCenter_projectList_btnRemove" />



0Test
10Test
11Test
12Test
13Test

14Test
15Test
16Test
17Test
18Test
19Test

1Test
20Test
21Test
22Test
23Test
24Test

25Test
26Test
27Test
28Test
29Test
2Test

30Test
31Test
32Test
33Test
34Test
35Test

36Test
37Test
38Test
39Test
3Test
40Test

41Test
42Test
43Test
44Test
45Test
46Test

47Test
48Test
49Test
4Test
50Test
51Test

52Test
53Test
54Test
55Test
56Test
57Test

58Test
59Test
5Test
60Test
61Test
62Test

63Test
64Test
65Test
66Test
67Test
68Test

69Test
6Test
70Test
71Test
72Test
73Test

74Test
75Test
76Test
77Test
78Test
79Test

7Test
80Test
81Test
82Test
83Test
84Test

85Test
86Test
87Test
88Test
89Test
8Test

90Test
91Test
92Test
93Test
94Test
95Test

96Test
97Test
98Test
99Test
9Test
















Right Bottom





ICP Fan
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-01
Posts: 5
Points: 0

This may help

If I remove the right column, it works exactly the way I want.

ICP Fan
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-01
Posts: 5
Points: 0

Fixed

Why didn't I think of this before?

#content: added "padding-right: 200px;"
body: removed "margin-right: 200px;"

Thanx for your time,

ICP-Fan

If I were any smarter, I would hurt myself!

ICP Fan
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2007-03-01
Posts: 5
Points: 0

Summary

This is how to make a three column layout where the header, footer, left, and right are fixed AND the center uses the browser scrollers. It may not be the best way, but it works for me!

Oh, the backgrounds for the fixed div's are used to "hide" the content in the center column as its scrolling.

body { background: #333333; color: #2B2B2B; margin: 0; text-align: center; margin-bottom: 15px; margin-top: 170px; margin-left: 200px; } #header { position: absolute; top: 0; left: 0; width: 100%; height: 170px; z-index: 13; background-color: #333; } #head { margin: 0; text-align: left; color: #ffffff; background: #252525; padding-right: 0px; padding-left: 0px; padding-bottom: 5px; padding-top: 5px; float: left; } #masterNavigation { background: #6ABC21; margin: auto; padding: 0 10px 0px 10px; clear: both; width: 100%; text-align: center; } #left { position: absolute; width: 200px; color: #fff; margin-top: -1px; top: 170; left: 0; z-index: 11; min-height: 500px; background-color: #333; } #right { position: absolute; width: 200px; color: #fff; margin-top: -1px; top: 170; right: 0; z-index: 12; background-color: #333; min-height: 500px; } #content { background-color: #fff; text-align: center; padding-top: 3px; overflow: visible; margin-top: 5px; min-width: 500px; min-height: 500px; padding-right:200px; } #footer { background: #6ABC21; text-align: center; color: #2D4E0E; padding: 4px; height: 15px; width: 100%; position: absolute; bottom: 0; left: 0; z-index: 10; } .clear { clear: both; } /* Stay where you are! */ html > body #footer { position: fixed; } html > body #header { position: fixed; } html > body #left { position: fixed; } html > body #right { position: fixed; }

<%-- nav menu --%>