Hi Tim, thanks for the response. The issue I have is I really don't want
the text to wrap. It either should only wrap if absolutely necessary (all
whitespace is consumed) or horizontal scrollbars should appear when
absolutely necessary. So it is the equal whitespace that I care about, not
equal size columns. The text also changes for each column based on which
language you're viewing it in, your name, whether you're logged in, etc.
My specified source order isn't the end of the world, just a strong desire.
If I can just do this without tables it would be nice.
On Sun, Mar 22, 2009 at 5:37 PM, Tim Climis <tcli...@indiana.edu> wrote:
> 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 [cs...@lists.css-discuss.org]
> 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/
>
--
Scott Mueller
http://www.appletree.com
AppleTree - Solve the Puzzle
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
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/
