So this is what I'm about to use. It's not equal spacing between the 3
columns, but it decreases (or increases) proportionally. So text won't wrap
until absolutely necessary (all whitespace is consumed). Had to use tables
and couldn't use the source order I wanted either :(. Is there anything
better than this? Can I get equal spacing with tables? Browsers seem to
insert the same amount of padding that the text is wide. If I could make
the left and right cells hug the text, problem would be solved, but
padding:0 and margin:0 declarations seem to have no effect:
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
table {
width: 100%;
border-collapse: collapse;
}
td#a {
padding: 0;
text-align: left;
background-color: red;
}
td#b {
vertical-align: top;
text-align: center;
background-color: yellow;
}
td#c {
vertical-align: top;
text-align: right;
background-color: #55FF55;
}
form {
display: inline;
}
</style>
</head>
<body>
<table><tr>
<td id="a">abc def ghi jkl mno pqr stu vwxyz
<form><select><option>test</option><option>another</option></select></form></td>
<td id="b">abcdefghijklmnoqrstuvwxyz</td>
<td id="c">a</td>
</tr></table>
</body>
</html>
On Sun, Mar 22, 2009 at 6:25 PM, Mauricio (Maujor) Samy Silva <
[email protected]> wrote:
> > the spacing between the header parts needs to be equal ..
> It's possible to achieve ONLY if the header has a fixed width (not fluid as
> showed in my approach).
> Regards
> Maurício
>
> -----Mensagem Original-----
> *De:* Scott Mueller <[email protected]>
> *Para:* Mauricio (Maujor) Samy Silva <[email protected]>
> *Cc:* Gunlaug Sørtun <[email protected]> ; [email protected]
> *Enviada em:* domingo, 22 de março de 2009 22:18
> *Assunto:* Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible?
>
> I see you put my desired source order, thanks! The only issue is the
> spacing between the header parts needs to be equal (this is the most
> important requirement).
>
> On Sun, Mar 22, 2009 at 6:14 PM, Mauricio (Maujor) Samy Silva <
> [email protected]> wrote:
>
>> Hi Scott,
>> As Gunlaug and Tim pointed out there are some issues for a solid solution
>> for the problem.
>> But, just for studies purposes have a look at a test case hosted at:
>> http://www.maujor.com/temp/css-d/fluid-header.html
>> May be you can find a more consistent solution.
>> Regards
>> Maurício Samy Silva
>>
>> -----Mensagem Original----- De: "Scott Mueller" <[email protected]>
>> Para: "Gunlaug Sørtun" <[email protected]>
>> Cc: <[email protected]>
>> Enviada em: domingo, 22 de março de 2009 21:38
>> Assunto: Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible?
>>
>>
>>
>> Hi Gunlaug, thank you for your quick response. Sounds like I'm best off
>> using a table for my layout as painful as that sounds after reading 3
>> books
>> properly explaining how wrong doing so is...
>>
>> On Sun, Mar 22, 2009 at 5:16 PM, Gunlaug Sørtun <[email protected]> wrote:
>>
>> Scott Mueller wrote:
>>>
>>> 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.
>>>>
>>>>
>>> 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?
>>>>
>>>>
>>> IE8 has proper support for CSS table, and older IE versions can be
>>> "tricked"...
>>> <http://www.gunlaug.no/tos/moa_11h.html>
>>>
>>> However, problems arise when one wants source-ordering, table behavior
>>> and "old IE trickery" all at once in a self-adjusting layout. Neither
>>> HTML table nor CSS table permits real source-ordering, so you'll
>>> probably end up with a complex solution to a small problem. I don't
>>> think it's worth it for anything but "proof of concept" cases.
>>>
>>> In real life I would forget source-ordering, and use a regular HTML
>>> table for a case like yours, to achieve optimal fluidity without
>>> premature wrapping, while avoiding problems with older IE versions' lack
>>> of CSS table support.
>>>
>>> You also have to take into account that text can/will be resized, which
>>> in itself will complicate things enough if your case is supposed to work
>>> across browser-land and various end-user options.
>>>
>>> regards
>>> Georg
>>> --
>>> http://www.gunlaug.no
>>>
>>>
>>
>>
>> --
>> Scott Mueller
>> http://www.appletree.com
>> AppleTree - Solve the Puzzle
>> ______________________________________________________________________
>> 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/
>>
>
>
>
> --
> Scott Mueller
> http://www.appletree.com
> AppleTree - Solve the Puzzle
>
>
--
Scott Mueller
http://www.appletree.com
AppleTree - Solve the Puzzle
______________________________________________________________________
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/
