Truly fluid and flexible columns?
Does anyone know of a way to code a truly fluid, flexible two-column layout using CSS? Where the column widths are based on their contents, like you can easily get with tables? Or at least, where the column widths are based on the content of one of the columns?
You see, this is what I’m going for:
The problem is that the image can be any height and width. I can’t just float both sections to the left and give them a set width. Plus there’s the issue of how to get the sale information aligned with the bottom of the image.
It would be pretty easy to create this layout with old-school tables:
<table>
<tr>
<td rowspan="2">
<img src="garden.jpg" />
</td>
<td valign="top">
Garden
...
</td>
</tr>
<tr>
<td valign="bottom">
Prices on request...
</td>
</tr>
</table>
Does anyone have any ideas how it might be accomplished without tables? If I can’t come up with anything else, I’m afraid I’ll have to resort to using them. Gasp, the horror!
August 31st, 2004 at 11:13 am
You might wish to investigate Stu Nichol’s site Cutting Edge CSS: Doing it with Style. More specifically, look at how he does his flexible three columns layout.
August 31st, 2004 at 1:11 pm
Hey KS, thanks for the tip. I looked around the site some, but I don’t think I saw anything that would allow me to have flexible widths and position that text at the bottom.
In the three-column layout, the left and right columns are both fixed width, and they only appear to be the same height because their backgrounds are actually borders of a container. So there’s no way to use absolute positioning, for example, to place the text at the bottom.
Actually, I guess I might be able to just use the image height and width to position everything (using inline styles), but I’d hoped there was a flexible way to do this with CSS without having to know the image dimensions.
Here’s a non-flexible implementation
September 3rd, 2004 at 11:29 pm
Does this article titled, Sliding Faux Columns, help you at all?
I didn’s read the complete article, but from my quick scan it looks as though it might be of assistance to you.
Good luck!