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

Question

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%;">
</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%;">
</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;
}

Answer 1

You need to combine float:left and float:right elements and text-align css property
Full code at : http://jsbin.com/ilano3/3/edit

Answer 2

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

Answer 3

You can use something like this, I think that it's the simplest approach:
<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>
You can add CSS for .first, .second and .third to change their width, text alignment, color...
http://jsfiddle.net/T8JMM/2/

Answer 4

If you really need your data/text in columns, you shouldn't shun tables. Tables are used for tabular data and if that's what your data is then just keep using them. The only bad thing about tables is when you use it for design. It looks to me that what you are trying to display is tabular data so just use 'em :)
To check if your data is bound to be shown in tables, answer the following questions:
Should the icon, link and date be on the same row ALWAYS?
Is the date on the right side bound to the link on the left side?
If your answer is yes to both questions, just use a table.
Otherwise, use lists. Separate the icon, link and date data into lists like this:
<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>
Then using css, just float them and add some width:
.column {
float: left;
width: 33%;
}
Don't forget to clear the floats! :)

Answer 5

Try something like this:
<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>
The left and right divs are simply positioned with float and are contained within the float by the .row:after… CSS at the end. The center div will accept the row's text-align: center, since it's inline-block.
Note that the center piece is aligned based on the available space between the floats; multiple rows have have mis-aligned centers. Also, as it stands, too narrow of a width will cause the last piece (of left/center/right) to go to a new line; there may be a way to truncate it with overflow, but that depends on what you're going for.
Hope this helps!