CSS Help: Footers

Mr.Fibbles · 08-28-2009, 03:22 PM

OK, I have been working on this issue for a while now and I am getting very frustrated with it.
I have a wordpress blog and custom tripanel theme with a header and footer. I recently revamped the theme again to try to get rid of the problem that has been haunting me when I write shorter blogs (which isn't often but it happens). The footer is always at the bottom of the "main" panel and when a post is exceptionally short, that causes it to collide with the side panels (see attached img).
Pertinent CSS

Code:

#header {
  top: 10px;
  position: relative;
  margin-left: 57px;
  margin-right: 57px;
  height: 110px;
  width: 900px;
  text-align: left;
  border-bottom: 2px ridge silver;
}
#footer {
  clear: both;
  position: relative;
  top: 10px;
  width: 900px;
  font-size: 12px;
  text-align: center;
  margin-left: 57px;
  margin-right: 57px;
  padding-bottom: 10px;
}
#content {
  text-align: left;
  width: 1024px;
  top: 10px;
  position: relative;
  margin-bottom: 40px;
  padding-bottom: 10px;
}
#main {
  padding: 0;
  margin-top: 10px;
  margin-left: 210px;
  margin-right: 210px;
  text-align: left;
  width: 575px;
}
#sidebar{
  text-align: left;
  margin-bottom: 10px;
  }
.sidebar-left {
  background-color: #333333;
  position: absolute;
  top: 10px;
  width: 190px;
  left: 10px;
}
.sidebar-right {
  background-color: #333333;
  position: absolute;
  top: 10px;
  width: 190px;
  left: 800px;
}

Pertinent HTML (Template style)

Code:

<body>
<div id="header"><!--header-->
<h1>Awesomeness</h1>
<h2>Super Duper Awesome Postage</h2>
</div><!--header-->

<div id="content"><!--content-->
<div id="sidebar"><!--sidebar-->
<div class="sidebar-left"><!--sidebar-left-->

</div><!--sidebar-left-->
<div class="sidebar-right"><!--sidebar-right-->

</div><!--sidebar-right-->
<div id="main"><!--main-->
<div class="post"><!--post-->
<h2>This is the title</h2>
<div class="entry"><!--entry-->

</div><!--entry-->
</div><!--post-->
</div><!--main-->
</div><!--sidebar-->
</div><!--content-->

<div id="footer"><!--footer-->

</div><!--footer-->
</body>

A full example of this can be found in this zip file.
This is not limited to any browser (so don't comment on that) and it happens in both a normal HTML and PHP environment. I have been more or less teaching myself more and more CSS as I have gone on through this so I may be missing something important here.

Any suggestions on how to correct this issue?

Crosma · 08-28-2009, 07:46 PM

Don't position your left and right sidebars absolute. If you want to do something like this, you will have to float the divs, and then clear the float before the footer.

CSS in general is really bad at stuff like this. Everyone's still trying to do table-style layouts, without using tables. You could just use display: table and make a table without using any table tags.

Mr.Fibbles · 08-28-2009, 08:06 PM

SO, I should have something like this:

Code:

.sidebar-left {
  background-color: #333333;
  float: left;
  top: 10px;
  width: 190px;
  left: 10px;
}
.sidebar-right {
  background-color: #333333;
  float: right;
  top: 10px;
  width: 190px;
  left: 800px;
}

Yep. That seems to work. I may have tried that at some point but I may not have had the panels wrapped within the content div.

Thanks.

Crosma · 08-29-2009, 11:43 AM

The dumb thing is that float is designed to be used with inline elements (images are inline rather than blocks, in strict mode). CSS can be really messed up sometimes.

As long as it works.

08-28-2009, 07:46 PM	#2
Crosma	Re: CSS Help: Footers Don't position your left and right sidebars absolute. If you want to do something like this, you will have to float the divs, and then clear the float before the footer. CSS in general is really bad at stuff like this. Everyone's still trying to do table-style layouts, without using tables. You could just use display: table and make a table without using any table tags. __________________ (define love (lambda () (map conquer all)))

08-28-2009, 08:06 PM	#3
Mr.Fibbles	Re: CSS Help: Footers SO, I should have something like this: Code: .sidebar-left { background-color: #333333; float: left; top: 10px; width: 190px; left: 10px; } .sidebar-right { background-color: #333333; float: right; top: 10px; width: 190px; left: 800px; } Yep. That seems to work. I may have tried that at some point but I may not have had the panels wrapped within the content div. Thanks. __________________ http://thaunandshad.com

08-29-2009, 11:43 AM	#4
Crosma	Re: CSS Help: Footers The dumb thing is that float is designed to be used with inline elements (images are inline rather than blocks, in strict mode). CSS can be really messed up sometimes. As long as it works. __________________ (define love (lambda () (map conquer all)))