How to hold three different text alignments in one CSS Box?


Tags: html,css

Problem :

Good day,

I've got a simple CSS question. I'm trying to change a table into a CSS box, but aligning the table content is difficult to me right now.

Below there's an example of what's inside of the css box i created. How can I align these three elements (calendar and icon to the left , a text link to the center, and the other date field to the right ?) correctly ?

I've tried several things but the problem is getting it aligned properly. I want to change everything in this application that has been created with tables, to css. And I've been an 80% succesful so far.

I'd like to see some easy to understand code, to see how I can apply it on my code. Thank you for your kind help. I might be burned out due to stress.

 [Calendar (icon)                    Link                               Date]

UPDATE #1

This is the code for what I'm 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>

AND THE CSS OF THE BOX IS :

.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;
}


Solution :

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

    CSS Howto..

    How to use CSS hover inside html-tag?

    How do I force/enable vertical scrolling in this html5/css3 page?

    How can I make my wrapper
    vertically centered and responsive?

    How to indent text in a select drop down menu using CSS

    PHP: How to style session output [closed]

    How to center CSS-shapes within a wrapper in a row

    How to make 3-corner-rounded triangle in CSS

    How do i center an HTML DIV with logo on the left?

    How to get Style From jQuery in angular2

    How to highlight spaces in a tag? (CSS only)

    How to get the last Element of CSS?

    CSS sprite - showing part of another image when zooming

    How to apply styles to neighboring elements in a list

    How to stop web content from being displayed before css/jquery is prepared?

    how to create a css attribute swapper between two elements?

    html/CSS how to make a div always center when the window is resized [duplicate]

    How to get horizontal scrollbar to appear beneath content?

    How to center this rotating image (CSS animation)

    How to use Bootstrap Glyphicons in Holder.js images

    Having 2 css code blocks in html files how to make only one work using JS?

    How can I turn off hardware acceleration for certain HTML elements via CSS?

    selenium - how to click on a link based on its text using css instead of xpath and without using the contains operator?

    How do I span columns with a div based table?

    How to perfectly center contents in an unordered list?

    How to hide repeated content from search engines with CSS?

    how to display a list inline using HTML and CSS

    how to override the ice:commandLink css

    How well does iOS / mobile safari comply with modern browser standards?

    How to fix the css red notification bubble

    how to make a double hover effect with css