467,915 Members | 1,527 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,915 developers. It's quick & easy.

align bottom of divs

jhardman
Expert 2GB
I'm almost to the point of using tables to position my elements. That is how bad this is.

So here's the rundown. I have an old page (created by someone else) that I was trying to update to reasonable standards. It has a header bar across the top and a footer bar across the bottom. The rest of the page is divided into two columns, a side bar on the left with info about the international organization, and the rest is info about the local chapter. The first thing I did was take out the table-based positioning and put everything in divs, but I keep running into problems. The worst part is that I know it would look fine in tables.

problem details: If I make the two divs in the center have absolute positioning, there is no way to predict the position of the bottom div to prevent it from covering up those above it. If I make one of the two divs float to one side or the other, the other div will wrap around it, and I want to maintain clean columns. I thought I could nest the two central divs in an outer div , then set the inner divs to style="bottom: inherit" or style="height: 100%" to prevent wrapping, but I couldn't find a solution.

Here's the code with which I ended up:
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <div style="width: 100%; height: 55px; background-color: #ccffff;">Header
  3.  bar</div>
  4.  
  5. <div style="width: 251px; height: 300px; background-color: #ffccff;
  6.     left: inherit; position: absolute;">Side bar
  7. </div>
  8.  
  9. <div style="position: relative; margin-left: 260px;">Main content div with 
  10. a lot of info
  11. Main content div with a lot of info
  12. Main content div with a lot of info
  13. Main content div with a lot of info
  14. Main content div with a lot of info
  15. Main content div with a lot of info
  16. Main content div with a lot of info
  17. Main content div with a lot of info
  18. Main content div with a lot of info
  19. Main content div with a lot of info
  20. Main content div with a lot of info
  21. Main content div with a lot of info
  22. Main content div with a lot of info
  23. Main content div with a lot of info
  24. Main content div with a lot of info
  25. Main content div with a lot of info
  26. Main content div with a lot of info
  27. Main content div with a lot of info
  28. Main content div with a lot of info
  29. Main content div with a lot of info
  30. Main content div with a lot of info
  31. Main content div with a lot of info
  32. Main content div with a lot of info
  33. Main content div with a lot of info
  34. Main content div with a lot of info
  35. Main content div with a lot of info
  36. Main content div with a lot of info
  37. Main content div with a lot of info
  38. Main content div with a lot of info
  39. Main content div with a lot of info
  40. Main content div with a lot of info
  41. Main content div with a lot of info
  42. Main content div with a lot of info
  43. Main content div with a lot of info
  44. Main content div with a lot of info
  45. Main content div with a lot of info
  46. Main content div with a lot of info
  47. Main content div with a lot of info
  48. Main content div with a lot of info
  49. Main content div with a lot of info
  50. Main content div with a lot of info
  51. Main content div with a lot of info
  52. Main content div with a lot of info
  53. Main content div with a lot of info
  54. Main content div with a lot of info
  55. Main content div with a lot of info
  56. Main content div with a lot of info
  57. Main content div with a lot of info
  58. Main content div with a lot of info</div>
  59.  
  60. <div style="width: 100%; height: 100px; background-color: #ffffcc;">footer
  61. bar
  62. </div>
  63.  
  64. </body>
  65.  
This code works fairly well for the amount of info on the screen, and at my screen resolution, however this layout fails at higher resolution (footer is partially covered by side bar). There has got to be another solution.

Jared
Aug 1 '08 #1
  • viewed: 1773
Share:
3 Replies
drhowarddrfine
Expert 4TB
You need to contain the left and main content divs so the footer doesn't climb in there. You also have some unnecessary styling.
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">

</style>
</head>
<body>
<div style="height: 55px; background-color: #ccffff;">Header
bar</div>
<div style="overflow:auto">
<div style="width: 251px; height: 300px; background-color: #ffccff;
float:left">Side bar
</div>

<div style="">Main content div with
a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info
Main content div with a lot of info</div>
</div>
<div style="height: 100px; background-color: #ffffcc;">footer
bar
</div>
</body>
</html>
[/HTML]
Aug 2 '08 #2
jhardman
Expert 2GB
Thanks doc, that worked except I am also trying to avoid the main content div wrapping around the side bar - keeping it looking like a nice clean column. Your solution still allows the content to wrap around the floated box.

I've got another sol'n that works a little better, but it's a bit complicated, I can't help but think there must be a better fix. I ended up putting the side bar position: absolute; and moved the main content div over 251px with either padding or margin, then set a min-height: 300px on the containing div you suggested. Can you think of any other way to do it?

Jared
Aug 2 '08 #3
jhardman
Expert 2GB
arggh. I sent my IE into glitch mode, got it working by switching to HTML strict. I got in the habit of using transitional, and it is now a little hard to break.

Jared
Aug 2 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

26 posts views Thread by meltedown | last post: by
reply views Thread by laredotornado | last post: by
roula
19 posts views Thread by roula | last post: by
8 posts views Thread by Dave Rado | last post: by
5 posts views Thread by Max2006 | last post: by
8 posts views Thread by Steve Swift | last post: by
Ciary
2 posts views Thread by Ciary | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.