I know the feeling all too well. The nice thing is that valued table behaviors are now available in CSS. Extendable, equal height columns… vertically centered items in each column… hard to beat.
It shouldn’t make any difference here but generally when dealing with fixed width cells then table-layout:fixed is the best option.
In normal html tables the table-layout:fixed algorithm is a ‘one pass’ algorithm and is quicker for tables where sizes are defined. The table-layout:auto algorithm is a “two pass” algorithm where the tables are laid out and content added and then a second pass is made to adjust the contents to fit the cells as required which results in a slower process. (I’m not sure if CSS follows this same principle though but I would guess it would have to do something similar.)
I’ve had to change the layout of the code so text and the button are contained in their own div. Now the image is taller than the div containing the text and button.
How can I stretch the cell contianing the text and button so it’s the same height as the cell with the image in it.
ronpat - It’s a styling issue, I need a border along the bottom of the yellow block. I know I can put a border on the two element separately but I’ve been told I need to have one surrounding element.
Paul O’B - Thanks that what I wanted, I had tried that in my actual code but it didn’t work, I think I need to check the html
It works fine with the html you posted above so you may have something different in the real version.
Remember that you need to take care of the elements as though they were table components (when using the display:table properties) so the html must make sense. (Although there are shortcuts as the browsers will try and construct anonymous elements if you omit them. e.g. if you call something display:table-cell then the browsers constructs an anonymous table-row and table parent structure to make it work.)
Thanks for describing the design goal. It was helpful .
Paul’s code works fine for me.
This is my original suggested code modified to have a border beneath the .info and .goto cells instead of around them. There is no .info-wrap box. The .info-wrap cell is convenient, but it isn’t necessary in this case. Different strokes…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Title of the document</title>
<!--css-->
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background:#ccc;
}
.container {
display:table;
table-layout:fixed;
background:#fff;
max-width:800px;
padding:10px;
margin:0 auto;
}
.container > div {
display:table-cell;
vertical-align:middle;
}
img {
display:block;
margin-right:10px;
}
.info,
.goto {
background:#ffa;
border-bottom:2px solid #aaa;
}
p {
padding:10px;
}
a {
background:#f00;
color:#fff;
white-space:nowrap;
text-decoration:none;
padding:10px;
}
</style>
</head>
<body>
<div class="container">
<div>
<img src="face.png" alt="" width="133" height="133">
</div>
<div class="info">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</div>
<div class="goto">
<a href="">Learn More</a>
</div>
</div>
</body>
</html>
Edit: and if I read more carefully, I would have noticed that you are required to have one containing element. My oversight. Sorry.
Sorry got it wrong I don’t need to stretch the yellow cell but have it site vertically in the center, so it’s aligned to the center of the image.
I need it to look like the example here but I have done this by adding margin-top to the yellow container. When the window is resized it doesn’t stay centered. Can I vertically align it to the image cell.
The elements will automatically vertically align if within a table-cell set to vertical-align:middle. You just need the background on the elements themselves and not the cell.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Title of the document</title>
<!--css-->
<style type="text/css">
* {
padding:0;
margin:0;
}
body { background:#ccc; }
.container {
display:table;
table-layout:fixed;
background:white;
max-width:800px;
padding:10px;
margin:0 auto;
}
.container .img, .container .info-wrap .info, .container .info-wrap .goto, .container .info-wrap {
display:table-cell;
vertical-align:middle;
}
.container .info {
margin:0;
background: yellow;
border-bottom:6px solid red;
}
.goto {
background: yellow;
border-bottom:6px solid red;
}
img {
display:block;
margin-right:10px;
}
p { padding:10px; }
a {
background:red;
color:white;
white-space:nowrap;
text-decoration:none;
padding:10px;
}
</style>
<!--[if lte IE 7]>
<style>
.container{position:relative;min-height:150px;zoom:1.0}
* html .container{height:150px}
.container .img {
position:absolute;
left:10px;
top:50%;
margin-top:-65px;
}
.container .info-wrap{
padding-left:145px;
zoom:1.0;
position:relative;
top:50%;
}
.container .info{
zoom:1.0;
position:relative;
top:-50%;
display:inline;
padding-right:125px;
}
.container .goto{
position:absolute;
right:40px;
height:25px;
line-height:25px;
margin-top:-12px;
width:90px;
}
* html .container .goto{right:15px}
.container .goto a{
display:block;
height:25px;
line-height:25px;
padding:0;
text-align:center;
border:none;
zoom:1.0;
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="img"> <img src="http://www.ttmt.org.uk/layout/face.png" alt="" width="133" height="133"> </div>
<div class="info-wrap">
<div class="info">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</div>
<div class="goto"> <a href="">Learn More</a> </div>
</div>
</div>
</body>
</html>
The code does assume that the image width won’t change much.
Remember that Conditional comments don’t go in the stylesheet - just call the ie stylesheet from within the conditional comments after the main stylesheet.
If you are referring to the image with then not really because you have to use a margin to keep clear of the image. You can just set a width and hide the overflow if you are using bigger or smaller images so that it doesn’t break badly. Most people are dropping support for IE7 these days but if the the fixes are easy then I usually build them in anyway unless it means too much work.
