On Sunday, March 22, 2009 7:38:22 pm Scott Mueller wrote:
> I would think this is fairly common, but I can neither find a solution or
> figure one out :(. I just want 3 columns in my header like this (texts are
> just examples):
> Login/Signup We are the best Languages | Settings |
> Help
>
> The difficult part is that I want these columns to NOT wrap as much as
> possible, spread across the width of the browser window and have equal
> amounts of whitespace between.
If you want things to appear out-of-flow, you'll need to specifically position
them. Do you really want "equal amounts of white space," or "columns of equal
width"? The latter is easy. The former may not be possible.
You might try three divs like this:
body {min-width: 640px} /* keeps the page from shrinking too much */
div#mainContent {
position:absolute; /* positions this column out of the flow */
left: 33%; /* left 1/3 to leave room for the left
column */
width: 33%; /* width is 1/3 of the screen */
text-align: center; /* aligns the text in the center to help with
the white
space balance */
}
div#left {
float: left; /* need this to keep the div from bumping the
right side down
*/
width: 33%} /* keeps the left column from flowing into the center one */
div#right {
float: right; /* positions the right column over on the right side */
width: 33%; /* again keeps right content out of the middle space */
text-align: right; /* helps keep the white space as equal as possible */
}
To better approximate the equal white space requirement, you might try playing
with the width of the left and center columns (change left to 20%, and center
to 46%, or something like that.) But specially adjusted percents like that
won't hold up well to browser and text resizing. The text will end up
wrapping pretty quickly.
>
> This is easily achieved (though I haven't even tried it) using tables. But
> I need "We are the best" (not my real text) to be top in the source order.
> And, of course, I'm very hesitant to use tables for layouts. I know
> there's a display: table declaration, but I understand no IE browsers pay
> attention to it... maybe there's an IE hack for this?
Tables wouldn't let you have that at the top of the source. I forget whether
they resize to the content, because I haven't used them for positioning in
years. That would be their only benefit in this case, i think (if they do
that).
> Oh and "Languages" is a drop-down menu. Is the above possible without
> using a table for the layout? Is the above possible while keeping "We are
> the best" at the top of the source order?
You can stick whatever you want in a div, so the drop down's not going to be a
problem at all.
---Tim
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
