HTML date display alignment

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: https://i.stack.imgur.com/0sLoV.jpg

How I am trying to get them: https://i.stack.imgur.com/7GOas.jpg

I am new to html so please excuse my errors. All help is greatly appreciated.

If they are sitting on a div, you can just use a `float:right` so that they all sit on the right-hand side of the `div`, you can just use margin's to push them back over if you want. But since we know that the right-hand side of the div will be a flat line, we can line them up based off that. Make sense? — Austin, Sep 10 '14 at 19:58
I tried `float:right` but it didn't work properly. http://imgur.com/3nqPjJO — shhasan, Sep 10 '14 at 20:05
@9997 Maybe this will answer your question [Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) *BTW*: Unless we are talking about email templates, I'm +1 for `DIV's` to create a `TABLE` layout. — gmo, Sep 10 '14 at 20:22

score 1 · Answer 1 · answered Sep 10 '14 at 20:14

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/

I tried your suggestion. But it didn't really work. Display: http://imgur.com/i7xRJBm , code: http://imgur.com/wrHImAE — shhasan, Sep 10 '14 at 21:04
Very difficult with pictures... can you reproduce your code in a fiddle file. It's going to be much easier that way. — gmo, Sep 10 '14 at 22:30

score 0 · Answer 2 · answered Sep 10 '14 at 21:58

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.

score 0 · Accepted Answer · answered Sep 16 '14 at 19:33

0

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

answered Sep 16 '14 at 19:33

shhasan

453
2
9
21

HTML date display alignment

3 Answers3