I'm using a table
layout and attempting to set the height of the child of table-cell
to be 100% of it's container. Why does this not happen and how do you resolve this?
I also tried setting the table-cell height to 100% without success.
I would like to align ONLY the images to the bottom of the container. How can I do that within a table display?
The amount of text in each table cell is dynamic
Fiddle: http://jsfiddle.net/3u3gpf2n/1/
It seems like you're trying to create a 3-column, 2-row table, but only using single rows in order to keep your markup semantic. Without flexbox, distributing the image to the bottom will require some CSS trickery.
One example, which should fit your requirements of (1) cross-browser, including IE, compatibility (2) allow for arbitrary text in the box is:
*{
padding: 0;
margin: 0;
}
#container{
width: 500px;
margin: 0 auto;
}
ul{
list-style-type:none;
display: inline-table;
}
li{
position: relative;
/* image width / (image height * column count) */
padding-bottom: 11.764705882%;
display: table-cell;
background: red;
/* 100 / column count */
width: 33.333%;
}
a{
color: white;
}
img{
width: 100%;
position: absolute;
bottom: 0;
}
<div id="container">
<ul>
<li><a href><div class="header">Xiao Huang</div>
<img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
<li><a href><div class="header">Xiao Huang</div>
<img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
<li><a href><div class="header">Xiao Huang Xiao Huang Xiao Haung</div>
<img src="http://3door.com/sites/default/files/styles/ablum_306_108/public/special/xiao_huang_ren_fu_ben_.jpg?itok=cPnwgTyV" /></a></li>
</ul>
</div>
I've added a relative position to the LI, and absolutely positioned the Image. To ensure things work correctly, I've given the cells a percentage-based width. I've also added padding to the bottom.
The one thing that this doesn't include is the cursor all the way down. If the user clicks between the image and text, the anchor will not be triggered.
To fix this, consider removing the UL/LI, and styling the anchor tags as table-cells and the wrapping DIV (or NAV, if you have a JS shim for HTML5 tags) as table.
I'm using a table layout and attempting to set the height of the child of
table-cell
to be 100% of it's container. Why does this not happen and how do you resolve this?I also tried setting the
table-cell
height to 100% without success.
When using percentage heights in CSS you need to specify the height for all parent elements, up to and including body
and the root element (html
).
From the spec:
CSS
height
propertypercentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.auto
The height depends on the values of other properties.
In other words, if you have not set an explicit height to the containing block (and the child is not absolutely positioned), then your child element with percentage height will have no frame of reference.
So the problem in your code boils down to this: You're missing a height
on parents ul
, #container
, body
and html
.
DEMO: http://jsfiddle.net/sedetcc6/
I would like to align ONLY the images to the bottom of the container. How can I do that within a table display?
Although vertical-align
is well-suited for aligning elements in a table cell, in this particular case, because each image has a sibling that must not move, the vertical-align
property is not useful.
But the images can be shifted with absolute positioning. Try this:
li{
display: table-cell;
background: red;
height: 100%;
position: relative; /* establish nearest positioned ancestor for abs. positioning */
width: 33.33%; /* new */
}
img{
width: 100%;
position: absolute; /* new */
bottom: 0; /* new */
}
DEMO: http://jsfiddle.net/sedetcc6/1/
NOTES:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With