I have a cell in an HTML <table>. I would like part of the cell contents to be left justified and part to be right justified. Is this possible?
If you want them on separate lines do what Balon said. If you want them on the same lines, do:
<td>
<div style="float:left;width:50%;">this is left</div>
<div style="float:right;width:50%;">this is right</div>
</td>
I came up with this while trying to figure out how to display currency ('$' to left, number to right) in table cells:
<div class="currency">20.34</div>
.currency {
text-align: right;
}
.currency:before {
content: "$";
float: left;
padding-right: 4px;
}
It is possible but how depends on what you are trying to accomplish. If it's this:
| Left-aligned Right-aligned | in one cell then you can use floating divs inside the td tag:
<td>
<div style='float: left; text-align: left'>Left-aligned</div>
<div style='float: right; text-align: right'>Right-aligned</div>
</td>
If it's
| Left-aligned
Right Aligned |
Then Balon's solution is correct.
If it's:
| Left-aligned | Right-Aligned |
Then it's:
<td align="left">Left-aligned</td>
<td align="right">Right-Aligned</td>
Tor Valamo's answer with a little contribution form my side: use the attribute "nowrap" in the "td" element, and you can remove the "width" specification. Hope it helps.
<td nowrap>
<div style="float:left;">this is left</div>
<div style="float:right;">this is right</div>
</td>
Do you mean like this?
<!-- ... --->
<td>
this text should be left justified
and this text should be right justified?
</td>
<!-- ... --->
If yes
<!-- ... --->
<td>
<p style="text-align: left;">this text should be left justified</p>
<p style="text-align: right;">and this text should be right justified?</p>
</td>
<!-- ... --->
td style is not necessary but will make it easier to see this example in browser
<table>
<tr>
<td style="border: 1px solid black; width: 200px;">
<div style="width: 50%; float: left; text-align: left;">left</div>
<div style="width: 50%; float: left; text-align: right;">right</div>
</td>
</tr>
</table>
You could use something like:
<td>
<div style="float:left;width:49%;text-align:left;">this is left</div>
<div style="float:right;width:49%;text-align:right;">this is right</div>
</td>
The 49% is to give some room for the renderer to wrap things around.
And you can use either <div> or <span>
Related
How do I align the text as in the picture below?
<div id="contact-info">
<div id="contact-list">
<div id="adresa">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;">
<p style="text-align:center;">Calea Dorobantilor,nr.74</p>
<p style="text-align:center;">,bl.Y9,SC.2,Ap.25,Cluj-Napoca,400609,Romania</p>
</div
<div id="telefon"></div>
<div id="mail"></div>
</div>
</div>
#contact-info
{
width:300px;
height:300px;
background:url(images/BODY-CONTACT.png);
position:absolute;
right:0;
}
How can I solve this problem?
Fail to fix it as I want
www.avocat.dac-proiect.ro/wp
Generally, you should use div to nesting elements, in order to align them in a decent way. Also pay attention to the display:blockorinline. You could read more in W3C docs. My touch to this problem is as follow:
<div id="adresa">
<div id="addPadding" style="
padding: 2em;">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;display: inline;">
<div style="
float: right;
display: inline;
width: 80%;
">
<p style="text-align:left;">Calea Dorobantilor,nr.74,</p>
<p style="text-align:left;">bl.Y9,SC.2,Ap.25,<br>Cluj-Napoca,400609,
<br>Romania</p>
</div>
</div>
</div>
I used 2<div>, one wrap the two <p> and the other one wrap the <img>and the new '' (or you can just simply add padding on the <div id="adresa">).
it will get a more similar layout result to your mockup, I wish I could took screen shot for you.
you just need to fix the text-align:left and margin on <p>tag to finish your job.
NOTE: This is NOT the whole solution. I just gave you an idea about what approach should be used.
This is so simple ... For this you need to make <p> and <img> position: absolute;. like below
.centered {
position: absolute;
right: 12px;
top: 110px;
}
and add class to ps and img like
<p class="centered">....</p>
<img class="centered" src="...." />
Try this using different top and right values for each p and `img.
Although the CSS purists would tell you not to, I would just add a table
<table>
<tr>
<td>
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;">
</td>
<td valign="top">
<p style="text-align:center;">Calea Dorobantilor,nr.74</p>
<p style="text-align:center;">,bl.Y9,SC.2,Ap.25,Cluj-Napoca,400609,Romania</p>
</td>
</tr>
</table>
Maybe this is a very stupid question, but I really have no idea.
I want to achieve the following
-----------------------------------------
| TEXT LEFT CENTERED TEXT |
-----------------------------------------
----------------------------------------------------------------------------------
| TEXT LEFT CENTERED TEXT |
----------------------------------------------------------------------------------
-------------------------------
| TEXT CENTERED TEXT |
| LEFT |
-------------------------------
so I want something floated to left, and to center, but the "text left" pushes a bit right the centered text.
I tried two things, both in the fiddle
http://jsfiddle.net/MeGZ6/
<div style="text-align: center; width: 50%; background-color: red;">
<div style="float: left;">left text;</div>
centered text
</div>
<hr>
another attempt:
<hr>
<div style="width: 50%; background-color: yellow;">
<div style="position: absolute; text-align: center;">centered text</div>
text left
</div>
the first one obviously not OK. The second, I cant align text inside the div, and it goes on the other text, instead of linebreak it.
EDIT:
this is what I want to achieve:
http://jsfiddle.net/saLaP/
<table style="background-color: red;" width="100%">
<tr>
<td width="20%" style="background-color: yellow;">left text</td>
<td width="60%" style="text-align: center;">centered text</td>
<td width="20%" style="background-color: green;"></td>
</tr>
</table>
the green column is not needed, its just a "helper". Of course, there is no width for any columns, they supposed to be as width as their content
Set left:0;right:0; to the absolute positioned div
<div style="text-align: center; width: 50%; background-color: red;">
<div style="float: left;">left text;</div>
centered text
</div>
<hr>
another attempt:
<hr>
<div style="width: 50%; background-color: yellow;">
<div style="position: absolute; text-align: center;left:0;right:0;">centered text</div>
text left
</div>
Fiddle Demo
Here is another solution that may work for you:
Fiddle Demo
You just give the container div text-align: center and float the other div left. Since the container is 100% of the width and the text is inline, it will auto center.
HTML / CSS:
<div style="width: 100%;text-align: center; background-color: yellow;">
<div style="float: left;">left text</div>
centered text
</div>
You could make the parent div position: relative and the center div into position: absolute. http://jsfiddle.net/MeGZ6/4/
html:
<div class="parent">
<div class="left">left text</div>
<div class="center">centered text</div>
</div>
css:
.parent{
width: 50%;
position: relative;
float: left;
background: red;
}
.left{
float: left;
}
.center{
position: absolute;
width: 100%;
text-align: center;
}
The problem with this is that, if the left div is too long, it will cross the center div. But you can give the left div a width, so that it won't cross the center div.
I might havent give enough instructions. This is what I want:
http://jsfiddle.net/saLaP/
<table style="background-color: red;" width="100%">
<tr>
<td width="20%" style="background-color: yellow;">left text</td>
<td width="60%" style="text-align: center;">centered text</td>
<td width="20%" style="background-color: green;"></td>
</tr>
</table>
the green column is not needed, its just a "helper".
Of course, there is no width for any columns, they supposed to be as width as their content
How can i right-align text as below. I want product, price and year to be right-aligned.
product Computer
price $1500
year 2013
Currently the html code below gives layout as shown
product Computer
price $1500
year 2013
<div style="clear: both;display: block;">
<p style="float: left">
<strong>product</strong>
</p>
<p style="float: left">
<span>Computer</span>
</p>
</div>
<div style="clear: both;display: block;">
<p style="float: left">
<strong>price</strong>
</p>
<p style="float: left">
<span>$1500</span>
</p>
</div>
<div style="clear: both;display: block;">
<p style="float: left">
<strong>year</strong>
</p>
<p style="float: left">
<span>2013</span>
</p>
</div>
try display: inline-block, does wonders
Try aligning the left-floated words with text-align:right;.
Give the <p> tags some width and margin to your last child element inside the <div>. Then assign text-align: right to your first child element. It should look something like this jsFiddle example.
I would solve it using inline-block elements instead of floating ones. To stick a little to your markup you could do:
HTML
<div class="row">
<span>product</span>
<span>computer</span>
</div>
<div class="row">
<span>price</span>
<span>$1500</span>
</div>
CSS
div.row > span {
display: inline-block;
width: 100px;
text-align: right;
margin: 0 20px 0 0;
}
div.row > span:last-child {
width: 200px;
text-align: left;
}
Demo
Try before buy
As a note: You might think of using another element for your content:
A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.
If your data is actually tabular, you can use a <table>-element instead. You can also go with some markup like I did, or you can even use a definition list <dl> or an unsorted list <ul>.
Edit
As requested in the comments. Here's a version using a table:
HTML
<table>
<tbody>
<tr>
<td>Product</td>
<td>Computer</td>
</tr>
<tr>
<td>Price</td>
<td>1500 USD</td>
</tr>
</tbody>
</table>
CSS
table {
width: 350px;
}
table > tbody > tr > td:first-child {
width: 100px;
padding: 0 50px 0 0;
text-align: right;
}
Demo
Try before buy
here's my code:
<div class="search-option">
<div id="slider-days" class="search-opt-left"></div>
<input type="text" id="amount-days" class="search-opt-right input-small"/>
</div>
I want to make the slider and input field algin to the middle of the line.
How can i do that ? Thanks !
My CSS:
.search-opt-left {
float: left;
width: 250px;
vertical-align: middle;
}
.search-opt-right {
float: left;
margin-left: 20px;
}
This can be buggy.
What I usually do is make a table. And since table rows start with vertically-centered alignments, it's quite simple.
<div class="search-option">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="slider-days" class="search-opt-left"></div>
</td>
<td>
<input type="text" id="amount-days" class="search-opt-right input-small"/>
</td>
</tr>
</table>
</div>
You may then alter your CSS to get rid of the un-needed stuff.
Whats the best way to split up a table element <td>? I don't really want to use nested tables. I need the internal element to have two elements one that is left justified and the other to be right justified with no border.
For example:
<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>
any other ways to do this besides the following?
<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>
I want the internal element to be a <span> or whatever is best for this.
<table>
<tr>
<td>
<div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
</td>
</tr>
</table>
I would do something like:
<td><div class="left>LEFT</div><div class="right">RIGHT</div></td>
then my css would resemble:
td{position: relative;}
td .left{position: absolute; text-align: left; left: 0;}
td .right{position: absolute; text-align: right; right: 0;}
... or something along those lines.
You could do it like this, although spans and divs are much better imo.
<table width="100%">
<tr width="100%">
<td width="100%">
<span style="float:left;">left</span>
<span style="float:right;">right</span>
</td>
</tr>
</table>
The floats didn't seem to look right so I used flexbox:
https://jsfiddle.net/6rc8w709/
.td-content{
display:flex;
}
.child{
flex:1;
}
.right{
text-align:right;
}
HTML:
<table>
<tr>
<td>
<div class="td-content">
<div class="child">
LEFT
</div>
<div class="child right">
RIGHT
</div>
</div>
</td>
</tr>
</table>
Flexbox is the right approach since it is now supported by all major browsers. This is an alternative approach if you need to target an older browsers or you don't like the drawbacks of floats. With this approach you can control the overflow of the left and right segment better and you can easily add a centered segment if you need one.
CSS:
table{
width: 100%;
}
.container{
width: 100%;
display: table;
}
.cell{
display: table-cell;
}
.cell .left{
text-align: left;
}
.cell.right{
text-align: right;
}
HTML:
<table>
<tr>
<td>
<div class="container">
<span class="cell left">LEFT</span>
<span class="cell right">RIGHT</span>
</div>
</td>
</tr>
</table>