Table cell vertical alignment issue - html

I've set float for one of my table's cells. But now I can't change vertical alignment of it's contents. By default, it moves the contents to the top of the div. I tried valign: middle, vertical-align: middle with no success. Here are the results:
With float: left
Without float: left
How can I align vertically cell's contents with float?
And markup looks like that
<td id="top_logo">
<a href="index.php">
<img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
</a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>

I don't know if this will help (I've left Table based layouts behind now) , but to solve a similar issue using straight divs you can do the same using the line-height rule.
<div id="tableRow">
<div id="leftCell"><img src="mylogo" /></div>
<div id="middleCell"> </div>
<div id="rightCell">User Name Here</div>
</div>
Your CSS would be created to set widths/heights etc, which I guess you won't need for a table, and for your "rightCell", you'd set the line height to be the same as the row height:
#rightCell
{
height: 30px;
line-height: 30px;
}
What then happens is the text is centred vertically in the line space, which because it's the same as the height, gives the impression it's in the centre of the element too.
Now like I say, I've NEVER tried this on a table-cell, however any modern browser should let you change the display property to say block or inline-block using:
display: block;
Changing block for any of the other types where needed. This will set the display type of the cell to be like a div (or a span, or some other element) but I DON'T KNOW what effect it will have on the table.
Note also, that I'm not addressing older browsers Like IE6 here, to make this work across the board you may have to make some hacks for older browsers if support is required.

Related

How can I make a table with a fixed width, but not a fixed height?

I am having trouble make a jsfiddle that reproduces my problem, but I have one that demonstrates the basic layout I am dealing with.
http://jsfiddle.net/LurUM/4/
<div style="width: 73%; float: left;">
<!-- table here -->
</div>
<div style="width: 23%; float: right;">
<!-- sidebar here -->
</div>
I have a table on a page like this one, but it is not the correct width, it is much wider, colliding with the right side bar and going past it. I tried setting the table's width to 100% and going to a fixed table-layout. The width behaved exactly as I wanted it to, but then some of the texts in the cells of the table were spilling out and colliding with text in other columns. What I want is for the cells to become taller and the text to go onto a new line instead of spilling over, but if I understand correctly the fixed layout is preventing this.
Am I understanding the situation correctly? What's the solution? And why did the table have so much extra width to begin with?
Try this code:
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>
The word-wrap: break-word property will wrap long words onto the next line and adjust words so that they don't break mid-word. When used in conjunction with table-layout: fixed; it will prevent the table bounds from overflowing.
If there is other content that must remain aligned with your table then keep the divs, otherwise I would suggest using id names for the tables, and moving all styles to the applicable style sheet. Your tables will then be getting their width setting directly from css instead of overflowing a parent container. I would also suggest that you use only one float, which ever is topmost on your page. This will keep the html cleaner i.e. easier to read and debug.
<div class="leftSide">
<table>html</table>
<p>other stuff that must be aligned with table</p>
</div>
<table id="rightTable">table that will float around other content</table>
<div>other content will continue to float until space is used up</div>
CSS
.leftSide {float: left; width: 40%; margin-right 20px; }
.leftSide table {width: 90%; }
.leftSide p {other css}
The html is easier to read this way, and specificity is used to drill down to the elements within the div, the table will be 90 percent of the width of its parent div and will no longer overflow the container (unless you put some giant image in there). Other CSS can be added including the word-wrap and break-word mentioned in other answers.
w3 has the definitive answers for CSS specificity and other inheritance issues like the one your facing http://www.w3.org/TR/selectors/

Child div at the bottom of parent div inside a table cell

I'm looking for a way to put a child div at the bottom of the parent div. The parent div is placed inside a td which has a dynamic height depending on the content of the row. I tried several attempts including the position: relative and position: absolute solution, but it didn't work because of the dynamic height.
Does anybody has an idea?
Edit:
I'm not using the table for layout. The table is used to display data which is loaded dynamically from the server. I've added a picture which shows how the the two divs should be placed inside the td. The parent div has no specific style at the moment. I don't need to support old versions of IE. The site will be used primarily with latest versions of Firefox, Chrome and Safari.
layout http://img29.imageshack.us/img29/5271/e49.png
You should be able to position the child div by using absolute positioning. Set the parent div to relative position, then child to absolute and bottom:0; You will then need to adjust the vertical align of the <td> elements if you want the parent div to also be at the bottom.
your css would be something like -
div#container{width:200px;height:200px;
border:1px solid #666;
position:relative;
}
div#bottom{
width:100px;height:100px;
border:1px solid #f00;
position:absolute;bottom:0;
}
here is a sample jsfiddle - http://jsfiddle.net/LRy6h/
and one where the parent div is also at the bottom - http://jsfiddle.net/LRy6h/1/
and one with resizeable (dynamic) heights - http://jsfiddle.net/LRy6h/2/
and another one to match your updated image - http://jsfiddle.net/LRy6h/3/
I found another way to solve the problem. I set the height of the corresponding tr as well as the height of the td and parent div to 100%. Here is a code snippet:
html + css:
<tr style="height: 100%;" ng-repeat="order in orders">
<td style="height: 100%;" >
<div style="height: 100%; position:relative;">
<span>PARENT - SOME TEXT</span>
<div style="position:absolute; bottom: 0;" >CHILD</div>
</div>
</td>
</tr>
Sorry, but I have to write an answer instead of adding a comment (not enough reputation).
Sounds as if you are using a table for layout - that's no good idea! ;-)
Furthermore it would be helpful, if you post the relevant HTML and CSS code, or even better setup a jsFiddle.
How do you style the parent DIV?
There is no cross-browser way of setting it to the height of the TD (using CSS only). The "modern" way might be using 'flexbox'. But it depends on the Browsers (and versions) you have to support and the layout you would like to achieve.
Using 'position: relative' on table elements does also not work, because the behaviour for this is 'undefined'.
So to really give you some good advice there are some informations missing.

how to set a element's width to be from somewhere specific to the end of the page(horizontally)

Here's the problem. I am trying to place some <div> elements beside each other. The width of the divs are not specified and are dependent on their content. I am using the CSS code below to position the <div>s beside each other:
#div{
height: 50px;
float:left;
margin-left:0;
}
I want the last <div>s width to cover the rest of the page (horizontally). With absolute positioning it is possible to set a left position for the last <div> and then use width:100% for the CSS style. But since I don't know the size of the other <div>s, I can not use this approach.
Can anyone help me with my case?
Depending on your browser support needs, you can either use a table-based layout (either with tables or via css) as #user2519211 has shown, or you can use flexbox, which will be much quicker and flexible (ha) in the long run.
You only need to set the container of the elements that you want to cover the page to have display: flex (with browser prefixes included)
Here's a JS Bin showing this: http://jsbin.com/uqepit/2/edit
From there you can do any number of things, including reordering, baseline shifting, etc. If flexbox is an option, Chris Coyer has done some great research on what's currently supported (and behind what syntax). You can see that here:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://css-tricks.com/using-flexbox/
You can either use a table to do this:
<table>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td style="width: 100%;">asdf</td>
</tr>
</table>
Or the display: table css declaration if you must use divs:
<div style="display: table; width: 100%;">
<div style="display: table-cell;">asdf</div>
<div style="display: table-cell;">asdf</div>
<div style="display: table-cell;">asdf</div>
<div style="display: table-cell; width: 100%;">asdf</div>
</div>

Vertically Center a Div

Why doesn't this work (i.e. div content is not centred - vertically)?:
<div style="display: table;">
<div style="vertical-align: middle; display:table-cell; height: 100px; font-size: 11px;">
<a target="_self" runat="server" href="~/daily.aspx">
<img src="images.png" /></a>
content in div<br />
</div>
</div>
Googling everywhere in understanding how I can vertically align a div and it's content has failed.
Anybody any ideas in the best css styling for content in a div.
UPDATE
Need to explain that I need the text vertically aligned to the image not just the div. The text is bottom to the image. Might have to use floats.
If you only need the text aligned in the middle of the text, this will do:
<div>
<div>
<a target="_self" runat="server" href="~/daily.aspx">
<img src="images.png" style="vertical-align: middle;"/></a>
content in div<br />
</div>
</div>
and here's an example http://jsfiddle.net/Tetaxa/tVQc6/
If you are displaying an element as a table, why not use a table?
As far as I know though, it is not possible to center content unless you know it's height. IF you know the height you can use something like this:
.container {
position: relative;
}
.vertical {
position: absolute:
top: 50%;
height: 200px;
margin-top: -100px; // This is half the height
}
why dont You try using <table>? or do u want to do it with <div> itself?
I know this is an old question,
but did anyone try display:table/table-cell/table-row instead? That should be fine.
(ofcourse not working on older IE etc.)
Types from W3Schoools:http://www.w3schools.com/cssref/pr_class_display.asp
These types can be set to any html element, and it should render as a part of a table (or a table itself).
This meaning you should be able to use divs to render data as if it was in a table.
I have not tested this though and the last time I used this was years ago.
able The element is displayed as a table
table-caption The element is displayed as a table caption
table-cell The element is displayed as a table cell
table-column The element is displayed as a table column
table-column-group The element is displayed as a table column group (like )
table-footer-group The element is displayed as a table footer row group
table-header-group The element is displayed as a table header row group
table-row The element is displayed as a table row
table-row-group The element is displayed as a table row group

Text wrapping under IMG vertical-align:middle not working

I am getting unexpected results when using vertical-align on an image with accompanying text. If the text is wider than the container, it wraps UNDER the image like this, instead of simply wrapping to the next line:
alt text http://preview.moveable.com/jm/verticalalign.png
My HTML is simple:
<ul>
<li><img .../> some text </li>
...
</ul>
I have a height and overflow-y:scroll on the UL (likely not relevant)
I have a height set on the LI that is large enough for the placeholder image plus spacing.
I have vertical-align:middle on the image to get the text in the right place, almost
The rest is just margins and borders
Am am NOT using floats
How can I get the text to wrap properly, perferably without more markup?
If the image is static i would use a background image on the li and then simply add left padding to allow for the correct spacing
li {
background: url(/images/foo.jpg) center left no-repeat;
padding-left: barpx;
}
you could also use a margin on the li to allow for spacing to the left of the image inside the ul
if the images are different i would simply apply a class to each li to distinguish the difference
edit for seo friendlyness:
add the images into the markup and then hide them with your stylesheet so the user only sees the image set with background image, Google bots ignore stylesheets so will be served the image in the markup.
li img {
display:none
}
As #graphicdivine pointed out, there are two ways to interpret "properly." If you want things to fill up all the space around the image, I would do what he suggested: use float: left; on the image.
If, instead, you wanted to have a vertical block of text next to the image, you could apply the following:
<li style="display: table-row;">
<img src="..." style="vertical-align: middle; display: table-cell;" />
<span style="display: table-cell;">...</span>
</li>
Same disclaimer as before, though: this is no good in IE. Also, it breaks your "no more markup" rule, though I'm not sure how you wanted to achieve a different result without making changes. Perhaps I didn't understand you correctly.
Seems to me you could float the image left.