Hi,
I'm trying to create a page in which I have a main content div, and then within that I want to have two columns (fairly typical so far).
I'm currently trying to do this with divs. But, I can't get the two columns and the wrapping div to always be the same height (which I wanted for visual reasons).
Anyone got any wonderful bits of code to do that?
So far I've tried various combinations of floating, absolute and relative positions and the like.
(Visually, I've just looked at the listapart site and the effect wanted is not too disimilar).
TIA
AlThey actually have an article (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns">http://www.alistapart.com/articles/fauxcolumns</a><!-- m -->) on just such an effect.UberPuppY, are you still having trouble?Just had a look at the article in ala. It's a pretty way of getting around the problem... just avoid it.
I may yet end up using it (have temporarily given up and accepted the different div heights, but made it so look like that's what I intended (which in my opinion is one of the best ways of getting round problems
).
But, I notice that the offered solution will always extend to the bottom of the page, so if something was to be added after the two columns you'd have to create a solution to that problem. So effectively only replacing one problem with another. And the only solution I can think of off the top of my head would be to stick some element in with background properties that made it look like the columns ended prior to the page ending. But that seems a little obscure and inelegant for my liking.
I though of wrapping the two column divs in another and then setting the background via that div's properties, but in firefox wrapping divs don't seem to have any height, even if child divs do (which doesn't seem to make any sense to me, but hey).
How do ala do it - I've looked at their style-sheet but not really gleaned anything off it.
cheers
Al
I'm trying to create a page in which I have a main content div, and then within that I want to have two columns (fairly typical so far).
I'm currently trying to do this with divs. But, I can't get the two columns and the wrapping div to always be the same height (which I wanted for visual reasons).
Anyone got any wonderful bits of code to do that?
So far I've tried various combinations of floating, absolute and relative positions and the like.
(Visually, I've just looked at the listapart site and the effect wanted is not too disimilar).
TIA
AlThey actually have an article (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns">http://www.alistapart.com/articles/fauxcolumns</a><!-- m -->) on just such an effect.UberPuppY, are you still having trouble?Just had a look at the article in ala. It's a pretty way of getting around the problem... just avoid it.
I may yet end up using it (have temporarily given up and accepted the different div heights, but made it so look like that's what I intended (which in my opinion is one of the best ways of getting round problems
). But, I notice that the offered solution will always extend to the bottom of the page, so if something was to be added after the two columns you'd have to create a solution to that problem. So effectively only replacing one problem with another. And the only solution I can think of off the top of my head would be to stick some element in with background properties that made it look like the columns ended prior to the page ending. But that seems a little obscure and inelegant for my liking.
I though of wrapping the two column divs in another and then setting the background via that div's properties, but in firefox wrapping divs don't seem to have any height, even if child divs do (which doesn't seem to make any sense to me, but hey).
How do ala do it - I've looked at their style-sheet but not really gleaned anything off it.
cheers
Al