How to save three different text alignments in one CSS field?

Question

Good afternoon,

I have a simple CSS question. I am trying to modify a table in a CSS field, but aligning the contents of the table is difficult for me now.

Below is an example of what is inside the created css box. How to align these three elements (calendar and icon on the left, text link to the center and another date field on the right?)?

I tried several things, but the problem is that it aligns correctly. I want to change everything in this application that was created using tables in css. And so far I have been 80% successful.

I would like to see some easy-to-understand code to see how I can apply it in my code. Thanks for your kind help. I could be burned due to stress.

 [Calendar (icon)                    Link                               Date]

UPDATE # 1

This is the code for what I am saying:

 <asp:UpdatePanel runat="server" ID="updHoldingsPanel" UpdateMode="Always">
        <ContentTemplate>        
              <div class="sitenote">
              <table valign="absmiddle"   border="0"   cellpadding="0" cellspacing="0">                   
                    <tr style="height: 19px">
                        <td valign="absmiddle" style="text-align: left; width: 9%;">
                            <asp:Panel ID="pnlDateZero" runat="server" Width="187px">
                                <table valign="middle" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td valign="middle">
                                            <asp:Label ID="Label1" runat="server" Text="As of" Width="40px"></asp:Label></td>
                                        <td valign="middle" style="width: 80px">
                                        <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" Width="80px" Height="15px" OnTextChanged="txtDate_TextChanged" ></asp:TextBox>
                                            <%--<asp:TextBox ID="txtDate" runat="server" AutoPostBack="True" Width="80px" Height="15px" contentEditable="false" OnTextChanged="txtDate_TextChanged" ></asp:TextBox>--%>

                                        </td>
                                        <td valign="absmiddle">
                                        <span style="float:left; vertical-align:top; padding-top:0px; padding-top:1px;">
                                            <asp:ImageButton align="middle" ID="imgCalendar" runat="server" ImageUrl="~/images/calendar5.gif"/>                                              
                                         <%--<cc1:CalendarExtender ID="ceDate" runat="server" PopupButtonID="imgCalendar" Format="MM/dd/yyyy" TargetControlID="txtDate" FirstDayOfWeek="Monday"></cc1:CalendarExtender>--%>
                                        </span>
                                        </td>

                                    </tr>
                                </table>
                            </asp:Panel>
                            <asp:Label ID="lblAsOf" Text="" runat="server" Visible="False"></asp:Label></td>
                        <td style="text-align:center; width: 27%;">
                            &nbsp;</td>                       
                        <td style="text-align:center; width: 11%;">
                            <asp:LinkButton ID="LinkButton1" runat="server"  OnClick="LinkButton1_Click">LINK</asp:LinkButton>
                        </td>

                        <td style="text-align:left; width: 2%;">
                            <asp:UpdateProgress AssociatedUpdatePanelID="updHoldingsPanel" id="UpdateProgress1" runat="server" DisplayAfter="100" DynamicLayout="false">
                                <ProgressTemplate>
                                    <asp:Image ID="Image3" runat="server" ImageUrl="~/images/live_com_loading.gif">
                                    </asp:Image>
                                </ProgressTemplate>
                            </asp:UpdateProgress> 
                        </td>
                        <td valign="absmiddle" style="text-align: right; width: 1%;">
                            &nbsp;</td>
                        <td style="text-align: right;  valign="absmiddle">
                            <asp:CheckBox ID="chkInclude" runat="server" AutoPostBack="true" 
                                OnCheckedChanged="chkInclude_CheckedChanged" Text="Include Zero Holdings" 
                                VerticalAlign="Middle" />
                        </td>
                    </tr>
                </table>
            </div>

CSS :

.sitenote {
    display:block;
    padding:6px;
    border:1px solid #bae2f0;
    background:#e3f4f9;
    line-height:130%;
    font-size:13px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0.5em;
    margin-left: 0;
}

Answer 1

<div style="float:left">left</div>
<div style="float:right">right</div>
<div style="text-align:center">center</div>

Answer 2

float:left float:right text-align css

: http://jsbin.com/ilano3/3/edit

Answer 3

- , , :

<style>
    .wrapper {
        width: 600px;
    }

    .column {
        float: left;
        width: 200px;
    }

    .first {
        text-align: left;
    }

    .second{
        text-align: center;
    }

    .third{
        text-align: right;
    }
</style>

<div class="wrapper">
    <div class="column first">
        icon
    </div>

    <div class="column second">
        link
    </div>

    <div class="column third">
        date
    </div>
</div>

CSS .first,.second .third, , , ...

http://jsfiddle.net/T8JMM/2/

Answer 4

- :

<style type="text/css" media="all">
    .row { border: 1px solid black; text-align: center; }
    .row > .left { float: left; }
    .row > .center { display: inline-block; }
    .row > .right { float: right; }

    /* after/inline-block (FF, IE5.5-7, S2, O9) */
    .row:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
    .row { display: inline-block; }
    .row { display: block; }
</style>

<div class="row">
    <div class="left">Calendar (icon)</div>
    <div class="center">Link</div>
    <div class="right">Date</div>
</div>

divs float float.row: after... CSS . div text-align: center, inline-block.

, float s; . , , , (/ /) ; , , .

, !

Answer 5

/ , . , , , . - . , , em:)

, , :

• , ?
• ?

"" , .

. , :

<ul class="icon-list column">
  <li>Calendar (icon)</li>
  <li>Calendar (icon)</li>
  <li>Calendar (icon)</li>
</ul>

<ul class="link-list column">
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
</ul>

<ul class="date-list column">
  <li>Date</li>
  <li>Date</li>
  <li>Date</li>
</ul>

, css, :

.column {
  float: left;
  width: 33%;
}

!:)