Multiple CSS styles on one line (justify center and right)

[todd.c...@gmail.com]

Hi all,

I want to have navigation links at the bottom of a tutorial set of
tiddlers:

Back Home Next

I can use a CSS styles "justifyright" and "justifycenter" to align
Home and Next correctly, but they appear on separate lines
(apparently) because of the Tiddlywiki syntax:

[[Back]]
{{justifycenter{
[[Home]]
}}}
{{justifyright{
[[Next]]
}}}

Is there a way to use multiple CSS styles on a single line?

Thanks,

Todd

[FND]

> Is there a way to use multiple CSS styles on a single line?

Yes, you can use the class wrappers inline:
{{foo{...}}} ... {{bar{...}}}
That will create inline elements (SPAN) rather than block elements (DIV)
though, which affects placement options.
So in order to achieve what you want (three columns), you need to use a
different approach:
---------------
{{contentCols{
{{leftCol{
[[Back]]
}}}{{rightCol{
[[Next]]
}}}{{centerCol{
[[Home]]
}}}
}}}
---------------
Then add this to your StyleSheet:
---------------
.contentCols {
overflow: auto; /* contain floats */
}

.leftCol,
.rightCol,
.centerCol {
margin: 0 10px;
padding: 5px;
}

.leftCol {
float: left;
width: 20%;
}

.rightCol {
float: right;
width: 20%;
text-align: right;
}

.contentCols { /* IE hasLayout fix */
display: inline-block;
}
.contentCols {
display: block;
overflow: hidden; /* create block formatting context */
text-align: center;
}
---------------

HTH.

-- F.

[FND]

Correction
:

> .contentCols { /* IE hasLayout fix */
> display: inline-block;
> }
> .contentCols {
> display: block;
> overflow: hidden; /* create block formatting context */
> text-align: center;
> }

That should be ".centerCol" rather than ".contentCols" there.

-- F.

[todd.c...@gmail.com]

Thanks! Once I removed this line:

> .contentCols { /* IE hasLayout fix */
> display: inline-block;
> }

it works a treat.

Todd

[FND]

> I removed this line:
>
>> .contentCols { /* IE hasLayout fix */
>> display: inline-block;
>> }

As stated in my correction, that should be ".centerCol" there rather
than ".contentCols".
Without this block the technique won't work properly on Internet Explorer.

-- F.

[todd.c...@gmail.com]

Thanks. Here is corrected working code:

.contentCols {
overflow: auto; /* contain floats */

}

.leftCol,
.rightCol,
.centerCol {
margin: 0 10px;
padding: 5px;

}

.leftCol {
float: left;
width: 20%;

}

.rightCol {
float: right;
width: 20%;
text-align: right;

}

.centerCol { /* IE hasLayout fix */
display: inline-block;
}

.centerCol {

display: block;
overflow: hidden; /* create block formatting context */
text-align: center;
}

.answer {
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;