Tying to create a form without using tables for may layout I am using div’s & css’s I am uploading two files Line Up Page.html (5.7 KB) lineup2.php (4.5 KB)
<a class=“attachment”
This is what I have so far
I have uploaded the program and the output. Headers good. Line 1 of data good Lines 2 - 4 always starting one column to the right don’t know why
Firstly, might I suggest you run your code through the CSS validator, http://jigsaw.w3.org/css-validator/validator, which will pick up all the typos, such as idth: auto; and ackground-color: #ccc;.
It’s hard to tell from your current content, but that looks to me like tabular data for which you should be using HTML tables. At the very least, it seems to be a series of lists. Using multiple divs like this is unsemantic.
You have one table, with a number of rows, but they contain varying numbers of columns at varying widths. That’s not going to work in a CSS table, any more than it will work in an HTML table. I also think you are misusing display:table-column and should instead use display:table-cell for what are, in fact, the equivalent of cells.
After the first two table rows, you have rows nested within rows, which is why they don’t line up as expected.
As Technobear said this really looks like tabular data and a table would be fine especially if you want to span cells as that can’t be done with the css version.
Anyway I tidied up your css version so that is displays correctly.
You always have to have the same number of cells in a row (just like tables - but unlike tables you cannot do rowspan or colspan in css). That means you have to output empty cells to match the number of max columns even if some cells are empty.
You don’t need to continually repeat the css if you set it up correctly as you can just use an extra class for the differences.
Also you have a float backup for display table-cell but the only IE browsers that don’t have full support for display:table is IE7 and under and no one should be using those these days (especially since the recent ransomeware attacks on vulnerable systems).
@PaulOB Thank you very much. When I get a chance I will try the script out. I also need to compare your script to mine and see where I went wrong. I also have to understand what you are doing.
Once again thanks.
If I have any more questions I will let you know