468,535 Members | 1,694 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

Ultimate CSS Confusion--Image Valign & Div Height

I'm in the process of taking an old table laden, poor code design web site and updating it to a modern day, mostly standards compliant design with only CSS where possible.

I'm not having trouble with the header or footers. Essentially, I have a two column layout. The entire site is configured to a width with auto left and right margins to keep everything centered. Is there a better way for doing this? I don't have a full div wrapper with my method, though.

Expand|Select|Wrap|Line Numbers
  1. body {
  2.     width: 850px;
  3.     margin-left: auto;
  4.     margin-right: auto;
  5.     height: 100%;
  6.     background-color: #fff;
  7.     color: #000;
  8.     font: 11pt arial, sans-serif;
  9. }
Now here is the XHTML code for the two columns:

Expand|Select|Wrap|Line Numbers
  1.         <div class="leftbar">
  2.             Menu (pulled in from php)
  3.             <div class="search">
  4.                 Search
  5.             </div>
  6.             <div class="leftimage">
  7.                 <img src=".jpg" />
  8.             </div>
  9.         </div>
  10.         <div class="rightbar">
  11.             MAIN CONTENT
  12.         </div>
  13.  
Now the CSS
Expand|Select|Wrap|Line Numbers
  1. div.leftbar {
  2.     width: 201px;
  3.     margin: 0px 5px 0px 0px;
  4.     padding: 0px;
  5.     background-color: #000;
  6.     color: #ffd600;
  7.     float: left;
  8. }
  9. div.rightbar {
  10.     width: 670px;
  11.     margin: 0px 0px 0px 201px;
  12.     padding: 4px;
  13.     background-color: #fff;
  14. }
  15.  
The requirements are that the left and right divs are the same height. I have tried everything I can think of or just TRY and nothing will get them the same height. If I add a * {height: 100%;} the div does seem to pull a greater height in than filling for the content so I must be missing some height attribute.

Then, the image needs to be aligned to the bottom of the left side bar. I was able to get this but it has an issue. By setting the leftbar DIV to position: relative and the image to position: absolute; bottom: 0px; (I don't need the div around the image, then) it will force it to stay at the bottom but it will overlap any of the leftbar content unless the leftbar div is tall enough. I can force it to X pixels and it won't overlap but then some pages use longer menus so I'd need to set the height to quite a bit to allow for all combinations. And the image is random with varying heights ranging from tiny to quite long.

The leftbar has a black background while the rightbar has a white background so the left definitely needs to extend to the bottom of the page.

I would greatly appreciate some assistance. I have spent literally 5 hours researching, reading, and trying different combinations and methods. A simple table with two cells would fix it instantly but I want to avoid tables!
Sep 26 '07 #1
3 4996
drhowarddrfine
7,435 Expert 4TB
Until I get a chance to look into this, google for "faux columns" and see if that solves the problem for you.
Sep 26 '07 #2
I read a few articles on that but it doesn't look like it will help. First, I need the image on the left to align with the bottom div (the footer) so the div really needs to be as tall as the right div so the image will sit down there. Unless there was a way to get a second div below the leftbar and to the left of the rightbar (main content).

I appreciate your help very much!
Sep 26 '07 #3
In order to help others help me, I put together a single document with everything needed to solve my problem...so just put this in an html file and open it. Using quote so it doesn't add numbers which changes the HTML document and need cleaned up.

I would greatly appreciate the solution for this problem!

[html]
<html>
<head>
<style tyle="text/css">
body {
width: 850px;
margin-left: auto;
margin-right: auto;
height: 100%;
background-color: #fff;
color: #000;
font: 11pt arial, sans-serif;
}
div.leftbar {
width: 201px;
height: 100px; /* Should Not Be Required--adding for demonstration */
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #000;
color: #ffd600;
float: left;
}
div.rightbar {
width: 670px;
margin: 0px 0px 0px 201px;
padding: 4px;
background-color: #fff;
border: 1px solid #f00; /* Added For Visibility */
}
</style>
</head>
<body>
<div class="leftbar">
Menu (pulled in from php)
<div class="search">
Search
</div>
<div class="leftimage">
<img src=".jpg" />
</div>
</div>
<div class="rightbar">
MAIN CONTENT<br /><br /><br /><br />left bar should stretch to bottom of this column.<br />Image in left column should align to the bottom of the black leftbar.<br /><br />Thanks for your help!
</div>
</body>
</html>
[/html]
Oct 1 '07 #4

Post your reply

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

Similar topics

1 post views Thread by UnderTaker | last post: by
2 posts views Thread by emma.sax | last post: by
2 posts views Thread by cooldudevamsee | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.