gib65
06-22-2015, 05:53 PM
I'm trying to make use of the table style display modes for divs. What I mean by table style display modes is the CSS display values:
table, table-row, and table-cell.
What I'd like is essentially 3 rows that span the whole width of the page, and in the second row have two cells at 50% of the page width
each.
Here's the code:
<html>
<head></head>
<body>
<div id="MainPageDiv" style="display: table; border: 3px solid black; width: 100%; background-color: orange;">
<div id="DateTimeDiv" style="background-color: red; width: 100%; display: table-row; column-span: all;">
top row
</div>
<div id="ConcernDetailsDiv" style="background-color: blue; padding: 20px; height: 400px; display: table-row; column-span: all;">
Middle row
<br />
<br />
<div id="PatientIncidentDiv" style="background-color: yellow; height: 100px; display: table-cell;">
left cell
</div>
<div id="ReportingPersonDiv" style="background-color: pink; height: 100px; display: table-cell;">
right cell
</div>
</div>
<div id="SubmitButtonDiv" style="background-color: grey; width: 100%; display: table-row; column-span: all;">
bottom row
</div>
</div>
</body>
</html>
This doesn't seem to be working for me however. In the attached image, you can see that 1) the top and bottom rows (red and grey) do not
span the whole table, and 2) the middle two cells (yellow and pink) don't seem to be contained in the middle row (blue).
Can anyone help me figure out why it's not working?
table, table-row, and table-cell.
What I'd like is essentially 3 rows that span the whole width of the page, and in the second row have two cells at 50% of the page width
each.
Here's the code:
<html>
<head></head>
<body>
<div id="MainPageDiv" style="display: table; border: 3px solid black; width: 100%; background-color: orange;">
<div id="DateTimeDiv" style="background-color: red; width: 100%; display: table-row; column-span: all;">
top row
</div>
<div id="ConcernDetailsDiv" style="background-color: blue; padding: 20px; height: 400px; display: table-row; column-span: all;">
Middle row
<br />
<br />
<div id="PatientIncidentDiv" style="background-color: yellow; height: 100px; display: table-cell;">
left cell
</div>
<div id="ReportingPersonDiv" style="background-color: pink; height: 100px; display: table-cell;">
right cell
</div>
</div>
<div id="SubmitButtonDiv" style="background-color: grey; width: 100%; display: table-row; column-span: all;">
bottom row
</div>
</div>
</body>
</html>
This doesn't seem to be working for me however. In the attached image, you can see that 1) the top and bottom rows (red and grey) do not
span the whole table, and 2) the middle two cells (yellow and pink) don't seem to be contained in the middle row (blue).
Can anyone help me figure out why it's not working?