2 2-column layouts

[sannu]

First problem
Please see this link: http://www.hot.ee/sannu/spf/one.gif

On this layout, I need to have right column same height as left Left column will have random pictures and whose height varies. And right column's content should be aligned to middle. Only thing i can not do is i don't know how to make right column 100% tall.

Second problem
Please see this link: http://www.hot.ee/sannu/spf/two.gif

On this layout, I have the same problem, but at this time, left column should be same height as right.


Thanks in advance,
Sander

[Paul O'B]

Hi,

This type of layout is best handled by tables as css doesn't like equalising columns or vertical aligning sections of text.

You can make 2 equalising columns and if you look at my 3 col demo you will see some examples.

Here's another example where two columns will equalise. If you look at the top example in this link their heights will always be the same as each other.

http://www.pmob.co.uk/temp/2equalisingfloats2.htm

This is because they are in fact the same div with a background image making it look like 2 elements. This is the only way to do equalising columns when the columns are set away from each other. Look at my demo for other examples not using bg gifs but the columns need to be touching.

In css you can't vertically align unless you know the height of the element beforehand unless you are just aligning inline elements in a single line or in a table cell.

Your best bet is to use a table which will do what you want and should make sense if the text is related to the image. (ie one cell relates information directly to the next cell).

Paul

[sannu]

Sad to hear that. But can you give the explanation of the reason not having this feature and will CSS 3 have such a feature.

As XHTML standard recommends to use tables only tabular data presentation, then why everything is not possible in CSS(only "almost everything is"). Would like to hear opinions on that subject.

Thanx anyway,
Sander

[Paul O'B]

Sad to hear that. But can you give the explanation of the reason not having this feature and will CSS 3 have such a feature

Well css already has the feature its just that ie doesn't understand it. There is display:table and display:table-cell which give you similar characteristics to tables and if you look at the second example in the link from my first post you will see it working for mozilla in exactly the way you asked for.

As a strange co-incidence there is a thread just started that shows how to vertical-align content of unknown height which may be worth looking at. It was posted this morning so just browse through the threads until you find it.

Paul