I would hope I don’t appear rude when coming here to ask for advice, since this is my first post on SitePoint.
My problem seems to be well discussed from the searches I have performed, but I can’t seem to apply what others have learnt to fix this.
I have a two by three DIV structure, within a DIV. Instead of posting code with CSS and expecting you to visualise it, I have constructed an image. [Although, the code is below too.]
From the image, DIV X contains content and is always the tallest, DIV Y contains other items and is always the shortest.
DIV Y always has the most content (and so, always has the highest height value). Is it possible to make DIV X stretch to the same height as DIV Y? Workarounds would be acceptable OR should I be using TABLES for this sort of thing?
My HTML and CSS code is below. The DIV which I would like to stretch has the class ‘right-item-side’.
I truly appreciate the time anyone may take to assist me with this problem. Thank you.
We don’t usually marks threads as solved or close them unless there is a special reason. It’s usually obvious by replies such as yours that you are happy with the result
As Paul said, you can’t easily force two elements to be the same height, unless you can specify what height has to be (which you can’t do here). What you can do instead is to use Faux Columns, which involves putting a background image on the parent element, so that it looks as though you have a separate background on each of the columns and they are both the same height. See http://www.alistapart.com/articles/fauxcolumns/
You are right and this is an old chestnut and is commonly asked by beginners If you look at the faq you will see a link to a 3 column equalising layout which will explain most of the techniques you need. This old article of mine also explains in detail how to make equal columns.
The reasons beginners ask this question a lot is that they come to css with a table perspective and expect css to act like tables. CSS doesn’t act like a table (apart from the display:table properties) and was never really meant to mimic table behaviour.
Elements are independent and only really react to their content and only grow as required unlike tables where each cell has no choice but to grow with the next because they are inextricably linked.
So when designing with css you should seek to avoid this behaviour and just let content decide how high something should be.
However, designers often care more about how things look than how they are used so we get this trade off between what looks good and what works for the content. In most cases simple is better and more effective at getting the content across to the user - after all that’s the main reason that someone visits a site. It’s also a benefit if the site looks good as well I know:)
Form the look of your code it looks like you have some sort of forum post going on and most forums are using tables because of all the equalising behaviour required and the fact that usually a post can be considered somewhat tabular - although I think that stretches the meaning a bit too far.
However, you can accomplish what you want with some negative margin trickery but is not for the faint hearted.
