Forum Archive

Go Back   3D Realms Forums > General Topics > Programming Forum
Blogs FAQ Members List Social Groups Calendar Mark Forums Read

Notices

 
 
Thread Tools
Old 08-28-2009, 03:22 PM   #1
Mr.Fibbles

Mr.Fibbles's Avatar
Unhappy CSS Help: Footers
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?
Attached Images
File Type: jpg bad-footer.jpg (99.7 KB, 8 views)
__________________
http://thaunandshad.com
Mr.Fibbles is offline  
Old 08-28-2009, 07:46 PM   #2
Crosma

Crosma's Avatar
Exclamation 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)))
Crosma is offline  
Old 08-28-2009, 08:06 PM   #3
Mr.Fibbles

Mr.Fibbles's Avatar
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
Mr.Fibbles is offline  
Old 08-29-2009, 11:43 AM   #4
Crosma

Crosma's Avatar
Exclamation 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)))
Crosma is offline  
 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -6. The time now is 05:46 PM.

Page generated in 0.10704207 seconds (100.00% PHP - 0% MySQL) with 19 queries

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

Website is 1987-2014 Apogee Software, Ltd.
Ideas and messages posted here become property of Apogee Software Ltd.