display: table... not working on divs

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:

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?

Do you mean this?

Code:

<div id="MainPageDiv" style="display: table; border: 3px solid black; width: 100%; background-color: orange;"> <div id="DateTimeDiv" style="background-color: red; ">top row</div> <div id="ConcernDetailsDiv" style="background-color: blue; padding: 20px; height: 400px; text-align: center"> <span style="color: white">Middle row</span><br><br> <div id="PatientIncidentDiv" style="background-color: yellow; height: 100px; display: inline-block; width: 50%; margin-left: -5px">left cell</div> <div id="ReportingPersonDiv" style="background-color: pink; height: 100px; display: inline-block; left: 50%; width: 50%">right cell</div> </div> <div id="SubmitButtonDiv" style="background-color: grey; width: 100%; ">bottom row</div> </div>

Quote:

Originally Posted by molendijk

Do you mean this?

Code:

<div id="MainPageDiv" style="display: table; border: 3px solid black; width: 100%; background-color: orange;"> <div id="DateTimeDiv" style="background-color: red; ">top row</div> <div id="ConcernDetailsDiv" style="background-color: blue; padding: 20px; height: 400px; text-align: center"> <span style="color: white">Middle row</span><br><br> <div id="PatientIncidentDiv" style="background-color: yellow; height: 100px; display: inline-block; width: 50%; margin-left: -5px">left cell</div> <div id="ReportingPersonDiv" style="background-color: pink; height: 100px; display: inline-block; left: 50%; width: 50%">right cell</div> </div> <div id="SubmitButtonDiv" style="background-color: grey; width: 100%; ">bottom row</div> </div>

Yeah, that works. Funny how we have to resort to inline-block when table-row and table-cell are *supposed* to do the same thing. Why is that?

See this.