First I will ask the main question, and then I ask myself why I ask. I have a bunch of similar floating block elements inside a <div> , and I set overflow:auto to <div> so that its height expands to properly contain all the elements inside it.
Is there any way, using only CSS and HTML, to set only the first floating element to the full height of the div?
Just to be clear: I want to grow the contained element to the height of the container , and not vice versa.
I tried adding
height: 100%
for the first CSS element moved, but this has no effect.
To a painful detail. And if a better general approach comes to mind that will fix this particular problem, I’m all ears.
I mimic a table with a bunch of floating <ul> elements inside a <div> . Each list is a column in the “table”, and the first list is a column of row labels. So, to do the following:
col A col B row 1 foo baz row 2 bar bat
I use this markup:
<div> <ul class='row-label'> <li> </li> * <li>row 1</li> <li>row 2</li> </ul> <ul class='data-col'> <li class='data-header'>col A</li> <li>foo</li> <li>bar</li> </ul> <ul class='data-col'> <li class='data-header'>col B</li> <li>baz</li> <li>bat</li> </ul> </div>
* there should be an inextricable space in the first element of the list of shortcut lines, but I can not get SO to show
Attentive readers may wonder, “Why not use a real table?” Two answers:
My fake approach is much more relevant, semantically, for my data. The data is more closely related in each column than in each row, but HTML tables allow the opposite. Therefore, I will need more sophisticated PHP on the backend to convert the data into HTML tables, and the result will not make much sense. The “table” here is really more of a visual / presentation effect than anything.
I wanted to leave the ability to manipulate individual columns in JavaScript (show them and hide them in response to user action, with transition effects). From what I could say when I studied it, there is no easy way to do this in a standard HTML table - precisely because a row, not a column, is the basic unit of an HTML table. Please shoot me if I am wrong.
CSS, simplified, is as follows:
div { overflow: auto; } div ul { float: left; list-style-type: none; padding: 0; margin: 0 0.5em; }
The problem occurs when a row has more columns than it matches the width of the browser window. The columns wrap to the next line, and I get this careless result:
col A col B col C row 1 foo baz bar col D col E zab oof
In the end, I have a better solution, but the simplest fix is to give the row label column high enough to push these wrapped columns to the row. If I do something like this:
ul.row-label { height: [lots of ems] }
Then I get this result:
col A col B col C row 1 foo baz bar col D col E zab oof
But since there can be more of these simulated tables below the first, and since each "table" can have any number of rows, I cannot rely on absolute height.