I have a 3 column CSS layout design. The page length is dynamic depending on how much content gets fed into each respective column. For this reason one column might be considerably longer than the other two, as a result the page length opens us white space in some columns.
I’m wondering two things:
a) How can I force a horizontal banner (image basically) to always appear at the bottom of a column in which it’s located? We have float: left & right but no top or bottom and it seems absurd to specify a large margin/padding, which is no good with dynamic lengths anyhow.
b) Given the white space that appears if some content in columns is longer than in others, how could I measure the white space and depending on its height dynamically add in further content providing it fits (say additional side banners)?
You might even find that clear: both works to do this. I can’t remember off the top of my head if it will do what you want in this case, but in similar circumstances the clear: both works like this and people have to use workarounds to stop it happening if they don’t want the effect.
Right. Banner as in an ad. Since column B (the one in the middle) is the widest I usually stick a banner in there after all other content. Given this, the banner only spans the one column. It complies with the standard 468x60px banner size.
The whole page width is 1144px so it fits on SXGA/WXGA screens. A 468x60px banner has no problem fitting inside the middle column (the widest) but like I said, it would be most professional if it were to always appear at the bottom of the given column instead of straight after the content (given how all columns can have various lengths of content in them and the longest defines the real length of the page).
Maybe you need to clarify “banner”. Do you mean something that spans across all of the columns and underneath them? In that case you’d put the banner code after the columns, and give it clear: both to make sure it sat beneath them all.
Right. But if say column A is very long with content and longer than column B and column C then both the latter will have a lot of white space caused by the fact that column A is much longer and thus the entire page layout length increases.
If I add a banner right after the content in column B and/or C then it will appear right after where the content ends, not at the position where column A (the longest) ends.
If you have a fixed height image you can absolutely place it at the bottom of a column and then preserve that space with padding above. This demo shows you how.
b) Given the white space that appears if some content in columns is longer than in others, how could I measure the white space and depending on its height dynamically add in further content providing it fits (say additional side banners)?
Thanks a lot,
That would be a job for the javascript forum I’m afraid as CSS can’t do that for you (If I understand correctly).
The way you’ve phrased that doesn’t make sense to me. If you place the image after the other content in the column it will always be pushed down to the bottom.