A typical css alignment problem:
<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
<tr>
<td style="padding:0;">
<div style="height:100%; width:100%; background-color:#abc; position:relative;">
test of really long content that causes the height of the cell to increase dynamically
</div>
</td>
<td>
<div>text</div>
<div ></div>
<img style="vertical-align: bottom;" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/1118727_100000298033362_1412277170_q.jpg"/>
</td>
</tr>
</table>
http://jsfiddle.net/R5TAY/
How would I make the image always appear on the bottom of the table, and the text to stay in the middle?
Thanks
Based on your example, you could use positioning to achieve what you want:
td {
position:relative;
}
img {
position:absolute;
bottom:0;
}
jsFiddle example
You can set the vertical-align css property:
#your_td {
vertical-align: bottom;
}
See this FIDDLE
Set valign to bottom
<td valign="bottom">
Hope this helps
Related
I have aligned a span next to div as shown below but there is a spacing between the elements. Can someone tell me what is causing it to appear and how to remove it?
<table>
<tr>
<td>
<div id="headerDiv" style="">DIV</div>
<span id="labelSpan">test</span>
</td>
</tr>
JSFiddle
Using inline-block will create a space when elements are on a new line. (The most frustrating example is when you want li to be side-by-side.
Either do this:
<div id="headerDiv" style="">DIV</div><span id="labelSpan">test</span>
Or this:
<div id="headerDiv" style="">DIV</div><!--
--><span id="labelSpan">test</span>
Alternatively, you can do float:left; instead.
JSFiddle
The inline-block always gives gap. If you don't want that, you can do either:
Remove the Space
<table>
<tr>
<td>
<div id="headerDiv" style="">DIV</div><!--
--><span id="labelSpan">test</span>
</td>
</tr>
</table>
Fiddle: http://jsfiddle.net/praveenscience/w3sjrgc4/2/
Or use float:
<table>
<tr>
<td>
<div id="headerDiv" style="">DIV</div>
<span id="labelSpan">test</span>
</td>
</tr>
</table>
td {
overflow: hidden;
}
td > span {
float: left;
border:2px solid;
}
td > div {
float: left;
border:2px solid;
}
Fiddle: http://jsfiddle.net/praveenscience/vt4kr35w/
This spacing is caused by white spaces (both elements have inline layout), you can get read of them by :
pushing elements next to each other in one line in the HTML markup;
Example:
<td>
<div id="headerDiv">DIV</div><span id="labelSpan">test</span>
</td>
using <!-- --> tags;
Example:
<td>
<div id="headerDiv">DIV</div><!--
--><span id="labelSpan">test</span>
</td>
using word-spacing CSS property.
CSS:
td {word-spacing: -100%;}
It's called white space and occurs between inline (or inline-block) elements when there's space (on the same line or a new line) in the markup.
Here are a few solutions for you:
Solution 1- Remove the white space in the markup:
<div id="headerDiv" style="">DIV</div><span id="labelSpan">test</span>
Demo: http://jsfiddle.net/w3sjrgc4/7/
Solution 2- Set the font-size to 0 on the container then retrieve it on the children.
Demo: http://jsfiddle.net/w3sjrgc4/9/
Solution 3- Comment out the white space in the markup:
<div id="headerDiv" style="">DIV</div><!--
--><span id="labelSpan">test</span>
Demo: http://jsfiddle.net/w3sjrgc4/10/
Solution 4- Left float the children and clear the container to maintain normal document flow on the height.
Demo: http://jsfiddle.net/w3sjrgc4/11/
Iam trying to add html piece of code to an existing html page. I am trying to use a DIV inside TD, then display:inline css attribute for DIV, doesn't work as expected. Any reason why ?
<table>
<tr>
<td width="20%" class="oddrow"></td>
<td width="80%" class="oddrow-l">
<div style="display: inline;"> Hello</div>
<div style="display: inline;">
Hiii
</div>
</td>
</tr>
</table>
You have to set width for your table:
table {
width: 100%;
}
http://codepen.io/anon/pen/LKizB
add your display:inline to the td style as well. http://jsfiddle.net/v5Ld3/
<table>
<tr>
<td width="20%" class="oddrow"></td>
<td width="80%" class="oddrow-l" style"display: inline">
<div style"display: inline">Hello</div>
<div style"display: inline">Hiii</div>
</td>
</tr>
</table>
Use <span> instead of <div>. Also as others mentioned your table nor td have width defined, so they will use as small width as possible. span is inline anyway and could change that.
If you don't want the whole table being width: 100% you may just set width for the problematic column.
I have the following example
<table align="right" border="1" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="width: 100%; background-color: red">
test
</div>
If the code is run, the div will enter the floated table. The table will need to be floated so this can't change. Is there a way to stop the other content entering the floated element?
One solution is to give the table an explicit background color.
<table style="background:white; float:right" ...
See new JSFiddle.
The other answers all change other properties such as the relative widths or positions of the div and the table.
Try not to use depreciated HTML tags like align and border. Cellpadding and cellspacing can also be achieved with styles but I'll leave that as an exercise :) This will make the div take up as much space as is needed. If you know the size of the parent div which the table and this div are contained in, just set the width of the table and div to a fixed value.
<table style="float:right; border: 1px solid black;" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<div style="float:left; background-color: red">
test
</div>
http://jsfiddle.net/Shnjt/
use this
<div style="90%; margin-left:auto; margin-right:auto;">
<table style="float:right;width:45%">
</table>
<div style="width:45%;background-color: red; float:left;">
test
</div>
</div>
If you want div and table to be floated you need to set width for both and css: float: left to the div and float: right to the table.
Otherwise you can try removing width:100% from your div and adding display: inline-block.
There is a css property that controls whether an element respect the previous floating element.
Here is the documentation: http://www.w3.org/wiki/CSS/Properties/clear
I do not know what you want to get, but that might help.
# Mr.Lister....
<div style="width: 100%; background-color: red;float:left;">
test
</div>
Float:left; will be helpful to your code.
Good Luck!
I have a table with 2 columns
<table border="2">
<tr>
<td>
<div id="menupage" >
...
...
</div>
</td>
<td align="center" >
<div id="contentpage" >
...
...
</div>
</td>
</tr>
</table>
I want to keep always in top not in center if the size of <div id="contentpage" > is big
You can use the CSS vertical-align property to align the TD contents to the TOP:
vertical-align:top;
See this working Fiddle Example!
e.g.,
<table border="2">
<tr>
<td style="vertical-align:top;">
<div id="menupage">
...
</div>
</td>
<td align="center" style="vertical-align:top;">
<div id="contentpage" >
...
</div>
</td>
</tr>
</table>
You probably are looking at valign or vertical-align.
<td align="center" valign="top">
<div id="contentpage">
</div>
</td>
See http://jsfiddle.net/nivas/Y84pS/
Note that valign is a deprecated attribute (so are align and border. See Index of Attributes for a complete list.). The recommended way to get these functionality is via CSS, using vertical-align, text-align and border.
The second table in my jsfiddle example uses CSS, and gets the same functionality.
If you're going to use tables then you might as well just use valign.
eg: <div id="menupage" valign="top">
If you want to use CSS you can use vertical-align.
You could set all td's in your stylesheet like so:
td {
vertical-align: top;
}
I've no idea of your experience etc so I won't go on, but you should avoid tables for layout. You'll save yourself a lot of downvotes and "don't use tables" comments.
I have a to-columns table in a div :
<div>
<table>
<tbody>
<tr>
<td class="action" >
<a> ✔ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
<tr>
<td class="action" >
<a> ✔ </a><a> ✘ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
... same structure in all the table
</tbody>
</table>
</div>
And I would like the "action" column to fit the content, and the "content" column to take the rest of available space. The "action" column would look better with a right align.
The table should also fit 100% of the container's width.
Is there a way of doing this without fixing the columns width ?
I tried with this:
table .action
{
width:auto;
text-align:right;
}
table
{
border-collapse:collapse;
border-spacing:0;
width:100%;
}
But the left column takes half of the table...
Giving the content td a 100% width will force it to take as much space as it can, so .content{ width: 100% } should work.
Also give the .action a white-space: nowrap to make sure the x and the checkmark stay next to each other. Otherwise the content will be able to take even more space and force the icons below each other.
table .action
{
width:auto;
text-align:right;
white-space: nowrap
}
table .content {
width: 100%
}
table
{
border-collapse:collapse;
border-spacing:0;
width:100%;
border: 1px solid
}
<table>
<tbody>
<tr>
<td class="action" >
<a> ✔ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
<tr>
<td class="action" >
<a> ✔ </a><a> ✘ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
</tbody>
</table>
Set the column width: 1px and white-space: nowrap.
This will try to make it 1px, but the nowrap will stop it from getting smaller than the widest element in that column.
I found this answer when trying to make one column of many as small as possible.
Giving the content td a 1% width will force it to take as little space as it can, so .content{ width: 1% } worked for me.
The bootstrapian way of doing this:
<div class="row">
<div class="col-sm-1"> content... </div>
<div class="col"> content... </div>
</div>
Basically you need to try out different things keeping in mind the following:
col-sm Small column
col-sm-1 Smallest column
col-sm-2 Slightly bigger than smallest column (Numbers go from 1 to 12)
col-md Medium sized columns (same numbering rule)
col-lg Large sized columns (same numbering rule)