A CSS question...
I'm using a 2 column layout with header and footer.
body {
margin: 20px;
background: #9A823A;
color: #4C401C;
text-align: center;
padding: 0;
}
#outer {
text-align:left;
border:1px solid #000000;
width:650px;
margin:auto;
}
#hdr {
height: 60px;
background: #4C401C;
color: White;
}
#bar {
height: 25px;
background: #CCB777;
color: #21270E;
border: solid #000000;
border-width: 1px 0 1px 0;
}
#bodyblock {
/* position:relative; */
background:transparent; background-image: url('../images/joe-birds1.jpg'); background-repeat: no-repeat; background-attachment:scroll;
color: #333333;
width:650px;
padding:0;
}
#l-col {
float: left;
background: transparent; /* #dcdcdc*/
color: #27200E;
width: 120px;
}
#cont {
width:525px;
background:transparent;/* #ffffff */
color: #303030;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#ftr {
height: 25px;
background: #4c401c;
color: #EDE7D0;
border: solid black;
border-width: 1px 0 0 0;
margin: 0;
}
Now, this page expands as needed. If there are 1000 lines in the content div, the footer moves down to the bottom of the page.
My question: Is there a way, without breaking the layout's flexibility (it positions itself quite well in the center of the browser, etc...) to lock the header, left column, and footer, and scroll the content div vertically??
JohnSure.
Check my test out...
<!-- w --><a class="postlink" href="http://www.geocities.com/stmasi">www.geocities.com/stmasi</a><!-- w -->
Only having problems with the display in Opera 7.11. All others seem to work just fine.Originally posted by stmasi
Sure.
Check my test out...
<!-- w --><a class="postlink" href="http://www.geocities.com/stmasi">www.geocities.com/stmasi</a><!-- w -->
Only having problems with the display in Opera 7.11. All others seem to work just fine.
add in the left column and what happens? Are your 'positions' all absolute?
JohnI just went ahead and made everything absolute.
Check it out now...
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/">http://www.geocities.com/stmasi/</a><!-- m -->
Thanx.
I'm using a 2 column layout with header and footer.
body {
margin: 20px;
background: #9A823A;
color: #4C401C;
text-align: center;
padding: 0;
}
#outer {
text-align:left;
border:1px solid #000000;
width:650px;
margin:auto;
}
#hdr {
height: 60px;
background: #4C401C;
color: White;
}
#bar {
height: 25px;
background: #CCB777;
color: #21270E;
border: solid #000000;
border-width: 1px 0 1px 0;
}
#bodyblock {
/* position:relative; */
background:transparent; background-image: url('../images/joe-birds1.jpg'); background-repeat: no-repeat; background-attachment:scroll;
color: #333333;
width:650px;
padding:0;
}
#l-col {
float: left;
background: transparent; /* #dcdcdc*/
color: #27200E;
width: 120px;
}
#cont {
width:525px;
background:transparent;/* #ffffff */
color: #303030;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#ftr {
height: 25px;
background: #4c401c;
color: #EDE7D0;
border: solid black;
border-width: 1px 0 0 0;
margin: 0;
}
Now, this page expands as needed. If there are 1000 lines in the content div, the footer moves down to the bottom of the page.
My question: Is there a way, without breaking the layout's flexibility (it positions itself quite well in the center of the browser, etc...) to lock the header, left column, and footer, and scroll the content div vertically??
JohnSure.
Check my test out...
<!-- w --><a class="postlink" href="http://www.geocities.com/stmasi">www.geocities.com/stmasi</a><!-- w -->
Only having problems with the display in Opera 7.11. All others seem to work just fine.Originally posted by stmasi
Sure.
Check my test out...
<!-- w --><a class="postlink" href="http://www.geocities.com/stmasi">www.geocities.com/stmasi</a><!-- w -->
Only having problems with the display in Opera 7.11. All others seem to work just fine.
add in the left column and what happens? Are your 'positions' all absolute?
JohnI just went ahead and made everything absolute.
Check it out now...
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/">http://www.geocities.com/stmasi/</a><!-- m -->
Thanx.