align bottom of divs

3,406 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

 <body>

<div style="width: 100%; height: 55px; background-color: #ccffff;">Header

 bar</div>
 
<div style="width: 251px; height: 300px; background-color: #ffccff;

    left: inherit; position: absolute;">Side bar

</div>
 
<div style="position: relative; margin-left: 260px;">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 style="width: 100%; height: 100px; background-color: #ffffcc;">footer

bar

</div>
 
</body>

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

Subscribe Post Reply

1996

drhowarddrfine

7,435

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

3,406

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

3,406

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

by: javaguy | last post by:

I have a data entry web application that is formatted heavily with tables. Having learned a bit of CSS, I'm hoping to rewrite this using <div> tags. But I have run into a formatting problem that...

HTML / CSS

making a bottom margin

by: meltedown | last post by:

I have 2 left floating divs on a page. Sometime the left side is larger, sometimes the right side is larger. I want the page to have a margin at the bottom of whichever div is the largest. If I...

HTML / CSS

Trying to align something at the very bottom

by: laredotornado | last post by:

Hello, I'm trying to write TABLE-free HTML pages, but I'm having a problem with rewriting a particular block of code using DIVs and CSS. I want to align the "More" button at the bottom right of...

HTML / CSS

How do i center align divs

by: roula | last post by:

I HATE DIVS AND DIFFERENT BROWSERS!!! i spent the whole day and night searching for a way to center align stupid divs, the problem is that the code is so sensitive, i lost my mind trying to make them...

HTML / CSS

FireFox CSS - overflow:hidden with vertical-align

by: esteuart | last post by:

I need to get the right combination for a div to clip any text inside and allow vertical alignment. I only have this problem in FireFox. I have 3 divs nested within each other. The outer div has...

HTML / CSS

Is it possible to vertical align in a div?

by: Dave Rado | last post by:

Hi See my mock-up at http://tinyurl.com/35tv29. The three icons are supposed to be vertically aligned on their bottoms (using "vertical- align: bottom"), but they aren't, they're vertically...

HTML / CSS

TreeView: How to make a node top align?

by: Max2006 | last post by:

Hi, I have a TreeView and this is my node style: <asp:TreeNodeStyle ForeColor = "#000000" Font-Size="9px" Font-Bold="false" Width="100px" NodeSpacing="3px" /> The problem is the expand...

ASP.NET

CSS/DIV equivalent of ALIGN=BASELINE

by: Steve Swift | last post by:

I'm still trying to learn CSS and the use of DIV, and a few examples will get me started. My challenge at the moment is to place some text to the right of a header (a sort of footnote) and to...

HTML / CSS

EXT JS and vertical align

by: Ciary | last post by:

hi fellow coders, i'm not sure if this is the right place to ask since it's rather specific. i've got some questions using EXT JS. i've been asking on there forum but i didn't get a reply...

Javascript

Access Europe meeting on Wed 4 Oct - The future of Access

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...

Microsoft Access / VBA

How to find best mobile app development company in usa

by: Aliciasmith | last post by:

In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...

Mobile Development

Can faster file sharing be achieved by connecting computers simultaneously via WiFi and LAN cables

by: tracyyun | last post by:

Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...

Networking - Hardware / Configuration

VBA Class Basics

by: NeoPa | last post by:

Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...

Microsoft Access / VBA

Access Europe Meeting - Wed 1 Nov - Using SQL Server skills to extend Access

by: isladogs | last post by:

The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...

Microsoft Access / VBA

Finding a record, and then saving a new record after the record has been amended.

by: nia12 | last post by:

Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...

Microsoft Access / VBA

VBA Class Basics (Report Class)

by: NeoPa | last post by:

Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...

Microsoft Access / VBA

Access Europe Meeting - Wed 6 Dec - Streamline Your Import/Export Spec Workflow with VBA Classes

by: isladogs | last post by:

The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

Microsoft Access / VBA

Applying ComboBox filters Sequentially

by: SueHopson | last post by:

Hi All, I'm trying to create a single code (run off a button that calls the Private Sub) for our parts list report that will allow the user to filter by either/both PartVendor and PartType. On...

Microsoft Access / VBA

align bottom of divs

Similar topics