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

 body {

    width: 850px;

    margin-left: auto;

    margin-right: auto;

    height: 100%;

    background-color: #fff;

    color: #000;

    font: 11pt arial, sans-serif;

}

Now here is the XHTML code for the two columns:

Expand|Select|Wrap|Line Numbers

 
        <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

        </div>

Now the CSS

Expand|Select|Wrap|Line Numbers

 
div.leftbar {

    width: 201px;

    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;

}

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

Subscribe Post Reply

5138

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

benn600

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

benn600

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

Similar topics

Divs & height

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

HTML / CSS

MSIE spacing woes and DIV width & height minimums

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

HTML / CSS

Get Image width & height without downloading the entire image?

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

C# / C Sharp

how to customize your width & Height of a paper in documentprint1

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

Visual Basic .NET

Image scaling by Width & Height constant - preserve aspect ratio

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

Java

Image width & height lost in Firefox

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 =...

Javascript

Width & Height of browser viewport.

by: cooldudevamsee | last post by:

HI fellows, How can I get visible viewport dimensions of any browser ?

Javascript

Fin Position & Height of Last DIV in doc using Absolute Positioning

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

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

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

Data Management

Migrating Website to Cloud - Emmanuel Katto

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

General

Navigating the Data Structures and Algorithms (DSA)

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

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

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

C / C++