HTML date display alignment - html

Question

I am designing a web page which has a list of dates appearing on below the other. I want to align the dates such that they line up perfectly below each other. I have tried using align but it didn't make a difference. I also tried putting a style tag but I got an error which said:
"Element "style" not allowed as child of element "div" in this context."
Here's the code of the page:
<div class="report-title">
<h1>Response Tracking Report</h1>
</div>
<div class="info">
<div style="width:93%;float:left;">
<p class="title">Project: </p>
<p class="value"><?php echo $response_data['project_name']; ?></p>
</div>
<div class="spacer"></div>
<div style="width:7%;float:left;">
<p class="value"><?php echo date("Y-m-d"); ?></p>
</div>
<div class="bottom"></div>
</div>
<div id='response-info' class='info'>
<div style='width:100%;'>
<p class='title'>Risk Statement: </p>
<p id='risk_statement' class='value'><?php echo $response_data['risk_statement']; ?></p>
<br/><br/>
</div>
<div style='width:24%;float:left;'>
<p class='title'>WBS: </p><p class='value'><?php echo $response_data['WBS']; ?></p>
<br/><br/>
<p class='title'>Date of Plan: </p><p class='value' ><?php echo $response_data['date_of_plan']; ?></p>
<br/><br/>
<p class='title'>Last Updated: </p><p class='value' ><?php echo $response_data['date_of_update']; ?></p>
<br/><br/>
<p class='title'>Planned Closure: </p><p class='value' ><?php echo $response_data['planned_closure']; ?></p>
</div>
<div class='spacer' style='width:1%;float:left;height:1px;'></div>
<div style='width:24%;float:left;'>
<p class='title'>Owner: </p><p class='value'><?php echo $response_data['owner']; ?></p>
<br/><br/>
<p class='title'>Cost: </p><p class='value'>$<?php echo round($response_data['cost']); ?></p>
<br/><br/>
<p class='title'>Release Progress: </p><p class='value'><?php echo $response_data['release_progress']; ?></p>
<br/><br/>
<p class='title'>Action: </p><p class='value'><?php echo $response_data['action']; ?></p>
</div>
<div class='spacer' style='width:1%;float:left;height:1px;'></div>
<div style='width:50%;float:left;'>
<p class='title'>Current Status: <br/> </p><p class='value'><?php echo $response_data['current_status']; ?></p>
<br/>
<br/>
<p class='title'>Action Plan: <br/> </p><p class='value'><?php echo $response_data['action_plan']; ?></p>
</div>
<div id='bottom' style='clear:both;width:100%'></div>
</div>
<div id="ResponseUpdateTableContainer" class="jTableContainer" style="width:100%;"></div>
</body>
How dates are displayed currently: http://imgur.com/UxbugwX
How I am trying to get them: http://imgur.com/mAgfRYO
I am new to html so please excuse my errors. All help is greatly appreciated.

Answer 1

To have those DIV'saligned, you need to give them the same width, the problem with this, is when you have dynamic text, and the length overflow your already specifyed width.
One solution, is emulate the native table style, with display property in your css
like this for example:
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
Then, your html will have something similar to this markup:
<div class="table">
<div class="row">
<span class="cell title">WBS:</span>
<span class="cell value">1.1</span>
</div>
<div class="row">
<span class="cell title">Planned Closure:</span>
<span class="cell value">2014-07-18</span>
</div>
<div class="row">
<span class="cell title">Last Updated:</span>
<span class="cell value">2014-09-10</span>
</div>
<div class="row">
<span class="cell title">Date of Plan:</span>
<span class="cell value">2014-04-26</span>
</div>
</div>
jsFiddle example: http://jsfiddle.net/gmolop/csx10g64/

Answer 2

With this code the dates will be aligned:
HTML:
<div class="container">
<div class="title">Date of Plan:</div>
<div class="date">2014-04-26</div>
</div>
<div class="container">
<div class="title">Last Updated:</div>
<div class="date">2014-09-10</div>
</div>
<div class="container">
<div class="title">Planned Closure:</div>
<div class="date">2014-07-18</div>
</div>
CSS:
.container {
width: 600px;
}
.title {
width: 180px;
display: inline-block;
}
.date {
width: 180px;
display: inline-block;
}
You can see the result here: http://jsfiddle.net/ben220/fuzhvL54/
I hope it helps.

Answer 3

I was able to solve the problem using margin-left, adjusting it until the dates aligned.