0

I want to use CSS to reproduce the behaviour of the simple HTML table below.

The HTML table has a width of 100% with just one row and three columns. Each column contains an image where image1 is left-aligned; image2 is centered; and image3 is right-aligned.

Importantly, when the browser window is resized to be very small, the images should not overlap or wrap onto the next line. They should simply stay next to each other in the same line (this is what the table solution does).

This sounds like such a simple requirement, but I've been struggling with this for many hours and so any help would be very much appreciated.

<html>
<head>
<title>Test</title>
</head>
<body>

<table width="100%">
<tr>
<td align="left">
<img width="150" height="129" src="image1.gif">
</td>
<td align="center">
<img width="400" height="120" border="0" src="image2.jpg"> <!-- This is the main logo  -->
</td>
<td align="right">
<img width="141" height="80" src="image3.png">
</td>
</tr>
</table>

</body>
</html>

2 Answers 2

1

You can use display: table and display: table-cell to get similar properties of a table.

html

<div class="table">
    <div class="table-cell center">
        <p>Center</p>
    </div>
    <div class="table-cell left">
        <p>Left</p>
    </div>
    <div class="table-cell right">
        <p>Right</p>
    </div>
</div>

css

.table{
  display: table;
}

.table-cell{
  height: 100px;
  width: 100px;
  display: table-cell;
  vertical-align: middle;
}

.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

Check out this pen: http://codepen.io/codefancy/pen/PqQjyb/

5
  • I used your solution, but I added 'width: 100%' to the table class and I swapped around the order of the center and left DIVs, and it worked in Firefox. But it did not work in IE.
    – Julie76
    Jul 2, 2015 at 3:56
  • Is there any way to do a cross-browser solution?
    – Julie76
    Jul 2, 2015 at 4:09
  • I'm not seeing any issues in IE8 - IE10. Adding <meta http-equiv="X-UA-Compatible" content="IE=edge"> might resolve any issues you're having. Jul 5, 2015 at 1:53
  • Your example uses text, but I am using images.
    – Julie76
    Jul 6, 2015 at 19:26
  • You are right - it does work, many thanks. In a year or two this will be the way to go. However, as of June 2015, there are still millions of users of IE6 and IE7 for which this would not provide a solution. Worldwide, the market share of IE6 = 0.52%, and IE7 = 0.26% (there are more IE6 than IE7 users).
    – Julie76
    Jul 8, 2015 at 15:45
0

I finally came up with a rather messy solution. It uses conditional comments to provide a work-around for Internet Explorer (versions 5 upwards). The following code passes W3C markup and css validation. This solution could be extended to produce the 'holy grail' of a fluid 3-column layout without using tables.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Test</title>
<style type="text/css">

.table{
  display: table;
  width: 100%;
}

.table-cell{
  height: 100px;
  width: 100px;
  display: table-cell;
  vertical-align: middle;
}

.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

</style>

<!--[If IE]>
<style type="text/css">
.table{
  display: none;
}
.table-cell{
  display: none;
}
</style>
<![endif]-->


</head>
<body>

<div class="table"><div class="table-cell left">
<!--[If IE]></div></div><table width="100%"><tr><td class="left"><![endif]-->

<img width="150" height="129" alt="star" src="image1.gif" />

<!--[If IE]><div><![endif]-->
</div><div class="table-cell center">
<!--[If IE]></div></td><td class="center"><![endif]-->

<img width="400" height="120" alt="logo" src="image2.jpg" /> <!-- This is the main logo  -->

<!--[If IE]><div><![endif]-->
</div><div class="table-cell right">
<!--[If IE]></div></td><td class="right"><![endif]-->

<img width="141" height="80"  alt="thumbs up" src="image3.png" />

<!--[If IE]><div><div><![endif]-->
</div></div>
<!--[If IE]></td></tr></table><![endif]-->

</body>
</html>

Thanks for all the help - I've been looking for a solution like this for a very long time.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.