Bottom bar needs to stay there!

Rocky Moore · Oct 8, 2003

Okay, I got a quickie for all those in the know. The need to have two
columns, both having dynamic content so height is never known. I originally
had this laid out (on a bigger scale than the code below) but ran into
problems with IE 5 displaying differently that IE 6 or Mozilla, so I fell on
my crutch and turned to tables. Currently the page is being run as HTML 4.1
strict.

It works well at the moment except for that green bar "C". I need a way to
keep it at the bottom of column B. Does anyone have an easy method to do
this which does not require javascript to be enabled?

If you need a sample page I can through the code below into a sample page
and post it later. I just figure, many of you smart people have probably
dealt with this problem and can easily understand where my error (only
making the bar C stay at the bottom of column B regardless of content at
this time

) is located.

I need something that will work on the later model browsers and not
interested in support for older legacy browsers. IE 5.0 is the oldest.

Thanks!

Rocky

--------

<table border="0" cellpadding="5" cellspacing="0"
style="width:100%;background-color: black;color:white">

A<br>A<br>A<br>A<br>A<br>A</td>

Richard · Oct 8, 2003

Rocky said:
Okay, I got a quickie for all those in the know. The need to have two
columns, both having dynamic content so height is never known. I
originally
had this laid out (on a bigger scale than the code below) but ran into
problems with IE 5 displaying differently that IE 6 or Mozilla, so I
fell on
my crutch and turned to tables. Currently the page is being run as
HTML 4.1
strict.

It works well at the moment except for that green bar "C". I need a
way to
keep it at the bottom of column B. Does anyone have an easy method to
do
this which does not require javascript to be enabled?

If you need a sample page I can through the code below into a sample
page
and post it later. I just figure, many of you smart people have
probably
dealt with this problem and can easily understand where my error (only
making the bar C stay at the bottom of column B regardless of content
at
this time ) is located.

I need something that will work on the later model browsers and not
interested in support for older legacy browsers. IE 5.0 is the
oldest.

Not a problem dude:
Just follow the sample code below. In the child dvision, make your
adjustments with height as needed. Just be sure that "left+height" equals
the height of the "right" division.
I've found that using "float:left" isn't all that necessary as long as you
define left and top with position:absolute.
"float" assumes you want the divisions side by side.
Using this alternate method, you can place the divisions anywhere you want,
including overlapping.
"Main" is purely for a container. So if you wanted to change the overall
width, do it there.
Where ever you put "main" left, right and child will follow suit
accordingly.

<head>
<style type="text/css">

..main {position:absolute; left:10px; top:10px; width:100%; height:600px;
background-color:#ff0000;
}

..left {position:absolute; width:50%; height:200px; background-color:#00ff00;
float:left;
}

..right{position:absolute; left:50%; top:0px; width:50%; height:200px;
background-color:#0000ff; float:left;
}
..child{position:absolute; left:50%; top:150px; height:50px; width:50%;
background-color:#ffff00;
</style>

</HEAD>
<BODY>
<div class="main">
<div class="left">A</div>
<div class="right">B</div>
<div class="child">C</div>
</div>

</BODY>

Bryan · Oct 8, 2003

Rocky: I'm certainly not in the know, but I did stumble across this
solution in mt quest to understand CSS.
http://www.sitepoint.com/article/1213 addresses the issue of dynamic column
lengths and the need to position a footer at the end using javascript.
Example code is provided.

Bryan

Rocky Moore · Oct 8, 2003

Richard said:
Not a problem dude:
Just follow the sample code below. In the child dvision, make your
adjustments with height as needed. Just be sure that "left+height" equals
the height of the "right" division.
I've found that using "float:left" isn't all that necessary as long as you
define left and top with position:absolute.
"float" assumes you want the divisions side by side.
Using this alternate method, you can place the divisions anywhere you want,
including overlapping.
"Main" is purely for a container. So if you wanted to change the overall
width, do it there.
Where ever you put "main" left, right and child will follow suit
accordingly.

Form the numbers you are using it appears that this is dependant on knowing
the height of column (a). This will not be known as column (a) has dynamic
content. The column (b) will flow to be the height (whatever that may be)
of column (a) and bar (c) should always stay at the bottom of column (b).

I wonder if situations such as this and trying to allow divs vertically
indicates that the CSS standard is not really ready for prime time and the
creators did not give enough thought to actual layout. Even though you can
do some amazing things with CSS, assuming the browser supports them as
defined, it still appears that a couple critical areas missing. Just look
at the number of postings wanting simply to center a div vertically within
another div. Or the battle over sizing if the containing div has default
settings. I bet if those few issues actually had some easy method in CSS,
half the posting to html & css newsgroups would vanish.

Anyway, thanks for the try!

Rocky

Rocky Moore · Oct 8, 2003

Bryan said:
Rocky: I'm certainly not in the know, but I did stumble across this
solution in mt quest to understand CSS.
http://www.sitepoint.com/article/1213 addresses the issue of dynamic column
lengths and the need to position a footer at the end using javascript.
Example code is provided.

Thanks for the link. That is seems to confirm my fears which is that the
CSS standard is broken and unable to perform a simple task such as vertical
centering ability found in tables. It would seem structured layout would
have been a simple thought while putting together the CSS standards. Scary
part is that from the link you provided they are still not planning to make
it right in CSS3.

I was hoping that I had just missed something and it would be a simple
matter. I guess that is what happens when you talk standard, parts get left
out!

Appreciat the help, but I am only interested in a non scripted solution. Do
not want to be bound by someone having javascript enabled just to perform
simply page layout.

Thanks again!

Rocky

Heidi A. Cool · Oct 9, 2003

Rocky Moore said:
The need to have two columns, both having dynamic content so height is never known. ...so I fell on
my crutch and turned to tables. Currently the page is being run as HTML 4.1
strict.

.... It works well at the moment except for that green bar "C". I need a way
to

keep it at the bottom of column B.
<table border="0" cellpadding="5" cellspacing="0"
style="width:100%;background-color: black;color:white">

<td style="background-color: blue" valign="top">
B
<div style="height:30px;background-color: green">C</div>
</td>
</tr>
</table>

Your valign="top" is making your green bar float upwards. As you want that
to keep your text on top, you could try adding another row and putting the
green bar there:

<table border="0" cellpadding="5" cellspacing="0"
style="width:100%;background-color: black;color:white">

A<br>A<br>A<br>A<br>A<br>A</td>

</td>

<td style="background-color: blue" valign="bottom">

<div style="height:30px;background-color: green">C</div>
</td>
</tr>

</table>

-Heidi

Rocky Moore · Oct 10, 2003

Heidi A. Cool said:
... It works well at the moment except for that green bar "C". I need a way

Your valign="top" is making your green bar float upwards. As you want that
to keep your text on top, you could try adding another row and putting the
green bar there:

<table border="0" cellpadding="5" cellspacing="0"
style="width:100%;background-color: black;color:white">

<td style="background-color: blue" valign="top">
B

</td>
</tr>

<td style="background-color: blue" valign="bottom">

<div style="height:30px;background-color: green">C</div>
</td>
</tr>

</table>

-Heidi

Yeah, the only way I found was to have the first colum span two rows and
split the second column into two rows aligning the top row to the top and
the bottom to the bottom. Seems to collapse properly so that the bottom row
always stays their until the content reaches it. Cannot see any other way
of doing it that works. Originally had the layout all with divs but the
incompatiblities with IE 5 and the way borders are measured, forced me back
to tables again.

Thanks for the reply!

Rocky

Rocky Moore · Oct 10, 2003

Heidi A. Cool said:
... It works well at the moment except for that green bar "C". I need a way

Your valign="top" is making your green bar float upwards. As you want that
to keep your text on top, you could try adding another row and putting the
green bar there:

<table border="0" cellpadding="5" cellspacing="0"
style="width:100%;background-color: black;color:white">

<td style="background-color: blue" valign="top">
B

</td>
</tr>

<td style="background-color: blue" valign="bottom">

<div style="height:30px;background-color: green">C</div>
</td>
</tr>

</table>

-Heidi

Yeah, the only way I found was to have the first colum span two rows and
split the second column into two rows aligning the top row to the top and
the bottom to the bottom. Seems to collapse properly so that the bottom row
always stays their until the content reaches it. Cannot see any other way
of doing it that works. Originally had the layout all with divs but the
incompatiblities with IE 5 and the way borders are measured, forced me back
to tables again.

Thanks for the reply!

Rocky

Horizontal menu bar header	2	May 12, 2021
Responsive width SVG image with fixed height rectangle at left and bottom - see my pen	0	Nov 26, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Help with my responsive home page	2	Dec 14, 2022
Aligned to the left	3	Apr 19, 2023
Background Repeat not running to bottom of page	0	Apr 18, 2016
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is	0	Mar 13, 2025
vertical scrolling + margin-bottom	4	Jan 1, 2008

Bottom bar needs to stay there!

Rocky Moore

Richard

Bryan

Rocky Moore

Rocky Moore

Heidi A. Cool

Rocky Moore

Rocky Moore

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads