| | |
Fluid CSS, aligning column heights, but with fluid widths
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: Jun 2007
Posts: 3
Reputation:
Solved Threads: 1
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.
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.
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.
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.
Plato forgot the nullahedron..
•
•
Join Date: Sep 2006
Posts: 37
Reputation:
Solved Threads: 1
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
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
![]() |
Similar Threads
- Trying to use not tables, only CSS, but can I? (HTML and CSS)
- How to write files to an Excel application (Visual Basic 4 / 5 / 6)
Other Threads in the HTML and CSS Forum
- Previous Thread: Need a contact form
- Next Thread: Dreamweaver password help
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7






