Databases
StackOverflow2013
Postsdbo
POHow to distribute column widths efficiently based in the width of child elements?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to distribute column widths efficiently based in the width of child elements?
    primarykey
    data
    text
    <p>I've been given a design to create in HTML/CSS that I think may be impossible, but I want to be absolutely sure before I admit defeat and go with a compromise.</p> <p>A number of items containing variable length text are arranged into sets of two such that they form columns where the columns are distributed across the available width exactly, but ensuring each column is <strong>no wider</strong> than its widest item. Thereby it uses horizontal space as efficiently as possible while still ensuring items align perfectly as a grid. Consider this example -</p> <pre><code>[-a--] [-cccccc-] [-eee-] [-g---] [-bb-] [-dddd---] [-ff--] [-hhh-] </code></pre> <p>Perhaps this looks tabular, but consider that the items must also wrap when the container shrinks, and still the columns maintain their magical alignment -</p> <pre><code>[-a---] [-cccccc-] [-bb--] [-dddd---] [-eee-] [-g------] [-ff--] [-hhh----] </code></pre> <p>I can't work out how to resolve the recursive dependency of widths. That is that the width of each "column" is defined by the longest item in that column, but the total available width is known and must be an exact sum of the columns widths.</p> <p>I'm happy to use a CSS3 only solution, falling back to a fixed item width solution for older browsers, but I am completely stumped as to what CSS properties can achieve this magic.</p> <p>Just to provide some kind of starting point, here's a Codepen using CSS3 columns: <a href="http://codepen.io/anon/pen/kiGgp" rel="nofollow">http://codepen.io/anon/pen/kiGgp</a></p> <p>It's no good as the columns are distributed evenly, and I'm wondering if there's a way to distribute them optimally instead. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USTim
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to distribute column widths efficiently based in the width of child elements?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to distribute column widths efficiently based in the width of child elements?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to distribute column widths efficiently based in the width of child elements?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI'm thinking you're going to have to use some JavaScript magic for this.
      singulars
      1. POHow to distribute column widths efficiently based in the width of child elements?
      1. USpowerbuoy
    2. CO@powerbuoy last resort, but I suspect you're right
      singulars
      1. POHow to distribute column widths efficiently based in the width of child elements?
      1. USTim
    3. COI'd go with JavaScript, too. It's going to be far easier to make it dynamic. jQuery would be even better.
      singulars
      1. POHow to distribute column widths efficiently based in the width of child elements?
      1. USMarc D Anderson
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload