Nat Pryce wrote:
> I have a document containing elements with the structure:
>
> ...
>
> <outer>
> <left>
> ... markup ...
> </left>
> <right>
> ... markup
> </right>
> </outer>
>
> I'd like the outer elements laid out as a one-row table, with the
> <left> element on the left and <right> element on the right, both
> taking 50% of the available width.
>
> According to the CSS spec, giving <outer> display: table-row and
> <left> and <right> display: table-cell should do the trick, but that
> positions <left> and <right> one above the other as separate rows.
>
> I've tried many combinations of table, table-row, table-row-group and
> table-cell, but I can't get XXE to give me the layout I want.
>
> What is the right mix of CSS display properties for this layout?
>
outer {
display: table;
}
left,
right {
display: table-row;
}
left > *,
right > * {
display: table-cell;
}
If this is does not look the way you want and/or left and right do not
contain elements only, then you are stuck: you cannot do it with XXE.
We have used this kind of CSS successfully several times (e.g. DITA
properties element -- see below) but you really, really need to have an
element acting as a table, one or more elements acting as a row and one
or more elements acting as a cell. Otherwise, it will not work.
---
properties {
display: table;
border: 1 solid #F0D0FF;
margin: 1.33ex 0;
}
prophead,
property {
display: table-row;
}
prophead {
background-color: #F0E0FF;
}
property {
background-color: inherit; /*e.g. from read-only properties*/
}
proptypehd,
propvaluehd,
propdeschd,
proptype,
propvalue,
propdesc {
display: table-cell;
margin-left: 0;
border: 1 solid #F0D0FF;
padding: 2px;
background-color: inherit;
}
propdeschd,
propdesc {
width: 50%;
}
@media XMLmind-XML-Editor {
proptypehd,
proptype {
start-column: 0;
}
propvaluehd,
propvalue {
start-column: 1;
}
propdeschd,
propdesc {
start-column: 2;
}
}
---
