473,395 Members | 2,006 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

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 5139
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

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

Similar topics

1
by: UnderTaker | last post by:
Hi guys, I got a small problem which is driving me mad. I don't know if what I want to do is impossible or I am just overlooking something stupid, in both cases I hope you will answer me. I got...
5
by: S | last post by:
Whew! Thanks for your help on that last post. I actually understand what you wrote. I'm trying not to use these groups as a way to get my code written for me, I really want to understand what...
2
by: Dave | last post by:
Dear Sirs, Is there a way to get the width and height of an image without downloading the image, or with just downloading a minimal portion of the image? For instance, I have a list of 10,000...
2
by: ayoubahmed | last post by:
Hi,, Im trying to print invoices in VB.net, and the invoice is 8.5 x 8.5 inches. Now i have to specify the new height, but when i do specify it using the following commands...
2
by: Farce Milverk | last post by:
Hi, I'm looking for an algorithm to resize an image of arbitrary size to a "fixed" / required width and height. For example, my application requires that images be no larger than 440 pixel...
2
by: emma.sax | last post by:
My script is as follows: function setImageSizes() { var staticHeight = 70; if(!document.getElementsByTagName || !document.images) return false; var thumbnail =...
2
by: cooldudevamsee | last post by:
HI fellows, How can I get visible viewport dimensions of any browser ?
2
by: GeeItsBee | last post by:
I have an html page in which all positioning is absolute. I want to place the page contents in a div which uses the top:??px plus the height:??px contained in the div with the greatest top:??px...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.