Div alignment blues

[tezcatlipoca]

Ok, firstly my apologies for starting a clutch of threads, but I'm right in the middle of a major webpage rewrite, so there are a alot of things that keep cropping up. As always, any help you can give will be gratefully accepted.

Ok, I'm trying to setup a series of pages which will contain information. Each page - in its simplest form - will contain 4 pieces of information, which will be laid out as follows:

5555555555555555555555555555
5111111111111122222222222225
5111111111111122222222222225
5111111111111122222222222225
5111111111111122222222222225
5111111111111122222222222225
5111111111111122222222222225
5111111111111122222222222225
5333333333333333333333333335
5333333333333333333333333335
5333333333333333333333333335
5333333333333333333333333335
5444444444444444444444444445
5444444444444444444444444445
5444444444444444444444444445
5444444444444444444444444445
5555555555555555555555555555

Imagine if you will that this is a square screen. 5 represents the major Div tag, which acts as a wrapper for the whole area. 5 is set to an exact height (400px) and has a background image defined under the CSS tag. It is vital that this image (which is itself 400px in height) always sits in the same place.
1 is a table of information, which should always sit in the upper left, whilst 2 is an image that always sits in the upper right.
3 is block text, and, depending on the nature of the page, can be anywhere from one to six lines of writing; thus increasing the height of the tag.
4 is also block text, but is always the same number of lines.

Now my problem is that areas 1 and 2 sit exactly where they should, regardless of browser and/or resolution using 'position:static' CSS commands, and then 'padding-X' commands to tweak their position. They work perfectly.

3 also sits where it should, inasmuch as it starts below the area occupied by 1 and 2, which is correct...

...however, the size of 3 alters from page to page, which keeps 4's upper border changing each time. It is this that I cannot get rid of.

Is there any way I can get div tag 4 - and only 4 - to align itself to the bottom of the 5 wrapper tag, such that it will always occupy the same position regardless of whether 3 has one line or 6?

[Wickham]

I don't think so using floats.

IE6 does not obey the bottom:**px code although Firefox does, so 4 will always go below 3, leaving a gap below 4 to the bottom row 5.

You will have to make 3 a fixed height to keep 4 near to 5.

However, if rows 4 are given position: absolute they should stay in the same place in the wrapper 5. The wrapper 5 needs to be given position: relative so that the position: absolute of 4 relates to 5's top left corner and not the body top left corner.
See http://www.wickham43.supanet.com/tutorial/divboxes.html item 1.

You should only do this if the wrapper has a fixed height (which in your case it has) as a position: absolute in a flexible div will not work if the height of 5 changes.
-------------
See http://www.wickham43.supanet.com/forumposts/tezcatlipoca060906.html


<div style="position: relative; width: 730px; height: 400px;
padding: 30px; background-color: silver; margin: auto;">

<div style="float: left; width: 365px; height: 100px;
background-color: green;">Div 1</div>

<div style="float: right; width: 365px; height: 100px;
background-color: pink;">Div 2</div>

<div style="float: left; width: 730px; background-color:
lime;">Div 3 flexible height (no height stated)<br/>div 3<br/>div
3<br/>div 3<br/>div 3<br/>div 3</div>

<div style="clear: both; width: 100%; line-height:0;
font-size:0;">&nbsp;</div>

<div style="position: absolute; width: 730px; top: 330px; left:
30px; height: 100px; background-color: azure;">
Div 4<br/>div 4<br/>div 4<br/>div 4</div>

</div> <!--end of wrapper div-->


It worked in Firefox straight away but I had to add the divider div with clear both to make it work in IE6.