On Wed, 12 Oct 2005, Alvin A ONeal Jr wrote:
> I'm trying to create a page [http://tinyurl.com/7k3xx] with a header, 3
> columns nested in a container, and footer -- all using divs.
>
> When I'm accesing the page with Firefox I can't get the 3 columns to
> stay in container. I have no idea what it looks like in commercial browsers.
Regarding your assertion that the container's not being obeyed, I beg to
differ
The site in question suggests that you belong to a LUG - suck it up and
install WINE. Problem solved. Sorry to be so blunt, but if you want a
consistent cross-browser appearance for a site, that's the most effective
way to do it without setting up a rig for dual-boot into Windows and
another OS. (Substantive evidence that I'm wrong/misguided is welcome).
Konqueror, meanwhile, can be considered a reasonable analogue to Safari
(their source trees are on completely different branches, obviously, but
the KHTML and Safari teams *do* cross-pollinate their ideas). One
imagines you'll run into quirks, but I've yet to be informed that sites
that work in one break horribly in the other.
> When the window is resized too small the footer goes under the colums
> instead of creating a scroll effect.
1. There's no need to absolutely position the fortune. Experiment; right
now the consequences of its current positioning tempt me to indulge in
words of one syllable.
2. Given your overall four-div setup, you may also want to experiment
with floats. More on this in [a] below.
3. Put especially large bottom-margins on your three columns (greater
than the intended height of your footer), and use the bottom attribute
to absolutely position the footer with the whitespace created as a
result. Use the overflow attribute where necessary. More on this in
[b] below. On closer examination of your styles it appears that
you're most of the way there, except that you've not manipulating
margins or changing your positioning context.
> I think a table would easily solve this issue, but I'm trying to go for
> a true css design.
Undoubtedly it would. But you're getting there; keep working at it.
Start going through the layout examples at
http://positioniseverything.net/ - they cover a lot of very useful
territory, as does the wiki at css-discuss.incutio.com.
Notes...
a. re: floats
So you've got three columns and a footer. Thus:
#columnA {
float: left;
width: something;
}
#columnB {
float: right;
width: somethingElse;
}
#columnC {
margin-left: something+gutter;
margin-right: somethingElse+gutter;
}
#footer {
clear: both;
}
Ta-da! Provided the source order of the markup is identical to the source
order of my example rules, you've just assembled a basic three-column
layout that doesn't bleed around the marginal columns, and a proper footer
to boot. Wise money goes thence on setting up a different stylesheet for
printing, but that's not very difficult at all (and allows you to clobber,
with display: none; everything that is pointless on a print copy, such as
nav bits and advertising).
While vertical borders are not accounted for, they can be easily enough.
Creative use of descendant selectors and nesting will allow you to put the
three columns in whatever source order you want.
b. re: positioning
On every browser *except* Internet Explorer, you can use *all four*
positioning attributes to set the overall dimensions of an absolutely
positioned element's bounding box. Meanwhile, bottom is still an entirely
valid attribute that will work as intended, even in IE.
Suppose I place my body content inside of a container (for years a common
practice of mine); suppose further that I've positioned this element
(relatively or absolutely, doesn't matter).
This changes the positioning context for all children of that container
element, which allows me to absolutely position elements in relation to
the dimensions of that container.
For a direct example, visit:
http://www.henick.net/bucket/bottom-positioning.php
HTH
--
Ben Henick "In the long run, men hit only what they aim
Sitebuilder At-Large at. Therefore, though they should fail
http://www.henick.net/ immediately, they had better aim high."
[EMAIL PROTECTED] -- Henry David Thoreau
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
