|
|
Posted by dorayme on 11/15/06 06:24
In article
<1163566876.613107.150080@h48g2000cwc.googlegroups.com>,
"windandwaves" <nfrancken@gmail.com> wrote:
> Hi Gurus
>
> Consider you have two divs:
>
> <div style="float: left; width: 300px; background-color: red;">
> Donec quam odio, hendrerit ut, commodo vel, egestas quis, leo. Morbi
> fermentum. Morbi congue, mi a interdum consectetuer, pede lorem
> vehicula dui, sit amet blandit tellus nisl in orci. Nullam est urna,
> varius quis, eleifend euismod, ultricies sed, dui.
> </div>
>
> <div style="margin-left: 310px; width: 300px; background-color:
> yellow;">
> Praesent placerat nunc eget lectus. Etiam sit amet ipsum. Nulla arcu
> felis, posuere ornare, commodo vel, feugiat ac, libero. Cras eget elit
> sit amet nisi imperdiet pretium. Nulla condimentum eros a ipsum
> interdum dictum. Nulla facilisi. Proin sed lectus. Cras ut nulla.
> </div>
>
>
> If I made the same two-column setup in a table I would be sure that
> both columns would be equally long. This would be great, because it
> would mean that the background-colors would go down equally far down
> the page.
>
> However, with the divs, the background-color stops where the text
> stops. I can think of several ways to resolve this, but I was
> wondering if there is a "best practice" solution.
>
> The solutions I can think of are:
> 1. put in a min-height in the css (does not work in all browsers)
> 2. put in an invisible image that makes the div a mininum height
> 3. specificy height for both divs
>
> All of the solutions above have the problem that they dont allow very
> well for people with increased (or decreased font-sizes). I would
> prefer if both divs would take on the length of the longest of the two
> divs, thereby reaching nicely to the end of the text.
>
> What can you recommend?
>
(1) If it is very important to you and nothing else works, use a
table for layout.
(2) If you can, don't want them both cols to have different
coloured backgrounds and end up equal lengths. Design around what
it is natural to design with, given the awkwardness of the tools.
Make a virtue out of the natural lengths they end up. There is an
honesty in letting the colour finish when there is no more
content to provide a useful background for. There are even
aesthetic arguments I can think of here that go beyond the "all
nice and tidy, divorced from function, pretty pretty" along the
lines of marrying form with function.
(3) Use the strategies you mention and talk to different browsers
via hacks, conditionals etc in your html and css. Perhaps look at
<http://alistapart.com/articles/fauxcolumns/> if you have not
already done so. Also
<http://www.ilovejackdaniels.com/css/faux-columns-for-liquid-layou
ts/>
--
dorayme
Navigation:
[Reply to this message]
|