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 do I change the admin header color in Magento?

    How to have your own style.css and bootstrap at the same time?

    How to position background image in a button

    background image shows up on right-click show image, but not on webpage

    How to center align a glyphicon to the middle of the page at all screen sizes

    How to remove the arrows in a scroll bar through CSS

    How can I trigger a jQuery alert when an iframe AND its CSS is loaded and rendered?

    How to make parent fullscreen div to grow with absolutely positioned child using CSS and jeet?

    How to get dropdown menus to align with the correct menu tab

    How do you spin side to side using css3 animation?

    How to call apk font use CSS in android?

    How to explain using browser.sleep in protractor

    How to push up text in CSS?

    CSS: overlay looks fine on Chrome, but not in Firefox 3: how do I fix the vertical offset?

    How to start ordered list from 2 not 1 with w3c validity and IE 6 compatibility?

    How to have dynamic image as CSS background?

    How do you make a button increase in size (125%) for few milliseconds and then return it original size on click?

    How to not inherit width in css?

    How can I give seperate margin to individual control and also keeping same style in CSS for all of them HTML5 [closed]

    gwt - How to CSS reset a GWT app?

    How to remove an element from the flow of HTML/CSS?

    How to put text over Image

    css: how to have a variable column size with text overflow ellipsis

    How do I change the Mailchimp subscribe button color using inline CSS?

    How to reset css before repeating sequence

    How can I make the parent div draggable

    How to keep an element :active even after clicking

    How to put Facebook and Twitter buttons next to each other?

    How do I get a floating footer to stick to the bottom of the viewport in IE 6?

    how to add css on click and remove it when they click close button [closed]