Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 2389

Jun 21st, 2007

Fluid CSS, aligning column heights, but with fluid widths

Expand Post »

Hi,

First post here

Basically I have 2 columns, both with different background colours that need to be the same height

Both columns are fluid - they use a percentage of the screen for their width so are not fixed for example the left column is 25% and black and the the right is 75% and grey in colour.

The height of both columns is not declared, leaving it as auto by default - my columns will alter height accordingly to whats inside them.

The content is not dynamic, but when resizing the window or increasing the font size this will of course alter the heights.

What I need is to be able to make which ever column ends up the shortest to match its height to the column thats the deepest.

Basically so that it works like a table does.

Does that make any sense to anyone?

Cheers,

Pete.

Similar Threads

Trying to use not tables, only CSS, but can I? in HTML and CSS
How to write files to an Excel application in Visual Basic 4 / 5 / 6

Pete_UK

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

3 posts
since Jun 2007

Permalink

Jun 22nd, 2007

Re: Fluid CSS, aligning column heights, but with fluid widths

Why not use a table? That's what tables do well; that's not what two unrelated elements do well without some javascript hacks.

If you fixed the height on the two columns' mutual container and set both of their heights to 100% it might work... But if you're using floats and/or non-flow positioning to get the side-by-side columns, it probably won't work...

Tables != Evil.

Last edited by MattEvans; Jun 22nd, 2007 at 11:16 pm.

MattEvans

Moderator

Featured Poster

Reputation Points: 522

Solved Threads: 64

Veteran Poster

Offline

1,091 posts
since Jul 2006

Permalink

Jun 23rd, 2007

Re: Fluid CSS, aligning column heights, but with fluid widths

¤| battousai |¤

Reputation Points: 17

Solved Threads: 1

Light Poster

Offline

37 posts
since Sep 2006

Permalink

Jun 23rd, 2007

Re: Fluid CSS, aligning column heights, but with fluid widths

You could also try the display property in css, I haven't tried myself yet but by using it you can make your elements behave like most other elements.

for example display: inline applied to a list will make it behave as an inline element like p or a so the list will be horizontal.

what you can use is display: table, and other table based behaviors to have the boxes behave more like tables.

but be aware that the display property doesn't work in I.E.

Also have a look at W3Schools for more info on this property

¤| battousai |¤

Reputation Points: 17

Solved Threads: 1

Light Poster

Offline

37 posts
since Sep 2006

Permalink

Jun 25th, 2007

Re: Fluid CSS, aligning column heights, but with fluid widths

Hi all,

I solved the problem

and it was really simple I got exactly what I wanted with no compromise - and without lame CSS browser hacks.

I'll post it up as soon as I've finished my site.

Pete.

Last edited by Pete_UK; Jun 25th, 2007 at 5:28 am.

Pete_UK

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

3 posts
since Jun 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Need a contact form

Next Thread in HTML and CSS Forum Timeline: Dreamweaver password help

DaniWeb Message

Cancel Changes

User Name
Password