1 reply [Last post]
Sommunist
Offline
newbie
Last seen: 16 years 6 weeks ago
Timezone: GMT-5
Joined: 2005-04-30
Posts: 6
Points: 0

Alright, if anyone remembers my last topic, Icleanedup my code considerably and completely eliminated the table layout. The new 3-column layout is much better, but there's a problem:

The two outer columns are positioned absolutely. This can cause some problems with the footer. It displays fine when the content of the page is longer then the side columns (like [url="http://home.ripway.com/2004-8/160001/index.php"]this[/url],) but it overlaps when the content is shorter (like [url="http://home.ripway.com/2004-8/160001/kyle.php"]this[/url].)

To avoid cluttering this topic too much, I'm not going to post the HTML I used - just go to one of those links and view the source. I will, however, post the CSS in it's entirety:

body {
 background: #000000;
 color: #ffffff;
 font-size: 12px;
 font-family: Veranda, Arial, Helvetica, sans-seriff;
 margin: 10px;
 padding: 0px;
 }

body a {
 color: #ffffff;
 }

body a:hover {
 background: #303030;
 }

#banner {
 text-align:center;
 padding: 0px 0px 1px 0px;
 background: url("./images/logo2.gif") #000000 no-repeat scroll top right;
 height: 125px;
 border-top: 1px solid #ffffff;
 border-left: 1px solid #ffffff;
 border-right: 1px solid #ffffff;
 }

.head {
 font-size: 12px;
 text-align: center;
 font-weight: bold;
 padding: 5px;
 background: #303030;
 margin: 0px;
 border-bottom: 1px solid #ffffff;
 }

#leftcontent {
 font-size: 10px;
 position: absolute;
 left: 10px;
 top: 136px;
 width: 150px;
 background: #000000;
 border: 1px solid #ffffff;
 }

#centercontent {
 background: #000000;
 margin-left: 149px;
 margin-right: 149px;
 margin-bottom: 10px;
 border: 1px solid #ffffff;
 }

#centercontent p {
 padding: 0px 5px 10px 5px;
 border-bottom: 1px dashed #ffffff;
 }

#centercontent .noborder {
 padding: 0px 5px 0px 5px;
 border: none;
 }

html>body #centercontent {
 margin-left: 151px;
 margin-right: 151px;
 }

#rightcontent {
 font-size: 10px;
 position: absolute;
 right: 10px;
 top: 136px;
 width: 150px;
 background: #000000;
 border: 1px solid #ffffff;
 }

#rightcontent p {
 padding: 0px 5px 10px 5px;
 border-bottom: 1px dashed #ffffff;
 }

#rightcontent .noborder {
 padding: 0px 5px 0px 5px;
 border: none;
 }

#footera {
 font-size: 10px;
 float: left;
 position: relative;
 bottom: 10px;
 left: 0px;
 width: 150px;
 height: 40px;
 text-align: center;
 vertical-align: middle;
 }

#footerb {
 font-size: 10px;
 float: right;
 position: relative;
 bottom: 10px;
 right: 0px;
 height: 40px;
 text-align: right;
 vertical-align: middle;
 }

html>body #banner {
 height: 124px;
 }

.menu {
 background: #000000;
 padding: 0px;
 margin: 0px;
 }

.menu a {
 color: #ffffff;
 text-decoration: none;
 font-weight: bold;
 }

.menu a:hover {
 text-decoration: none;
 }

.menu li {
 list-style-type: none;
 position: relative;
 margin: 0px;
 padding: 5px 5px 6px 5px;
 }

.menu li:hover {
 background: #303030;
 }

.menu ul {
 display: none;
 }

.menu li:hover ul {
 background: #000000;
 margin: 0px;
 padding: 0px;
 display: block;
 width: 150px;
 border: 1px solid #ffffff;
 position: absolute;
 top: -1px;
 left: 100%;
 }

.menu li:hover ul li {
 padding: 5px;
 }

.menu li a {
 display: block;
 }

.portrait {
 padding: 10px;
 }

Both the CSS and HTML are valid. Thanks in advance for any help.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 38 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Problem positioning a footer.

Yes, that is a problem with positioning your side columns absolutely. You could:

  • narrow your footer so it doesn't get overwritten by the sidebars.
  • set a min-height (height for IE) to ensure your content is always longer than the sidebars.
  • use floats instead of position:absolute.
[/]