This is what I want:

This is the best I could come up with:

CSS

img
{
  background: red;
  float: left;
}

table
{
  background: yellow;
  width: 90%;
}

HTML

<img src="image.jpg" width="40" height="40" />
<table>
  <tr><td>Table</td></tr>
</table>

The problem with this is that if resize browser window at some point the table jumps below the image. What is the better way of achieving this layout?

2 answers

0
points

Put the image inside the table, as an extra column to the left:

CSS

img
{
  background: red;
}
table
{
  background: yellow;
  width: 100%;
}

HTML

<table>
  <tr>
    <td><img src="image.jpg" width="40" height="40" /></td>
    <td>Table</td>
  </tr>
</table>
Answered over 6 years ago by Pavel Chuchuva
0
points

use padding and a negative margin.

The table will still be 100% width, so backgrounds on the table will stretch under the image, but the table content will allow space for the image.

you'll have to be in control of the image size and code the css to match it.

i.e.

<!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" >
<head>
    <title>Test</title>
    <style type="text/css">

      img
      {
        background: red;
        float: left;
      }

      table
      {
/*        background: yellow;*/
        width: 100%;
                padding-left: 160px;
                margin-left: -160px;
      }

            td
            {
                padding: 10px;
                border: 1px solid green;
            }


    </style>
</head>
<body>

      <img src="image.jpg" width="160" height="160" />
        <table>
            <tr><td>Table</td><td>Table1</td></tr>
                <tr><td>Table</td><td>Table1</td></tr>
                <tr><td>Table</td><td>Table1</td></tr>
                <tr><td>Table</td><td>Table1</td></tr>
                <tr><td>Table</td><td>Table1</td></tr>
        </table>

</body>
</html>
Answered over 6 years ago by Tony Crockford
  • I copied your code and this is what I get in Chrome and IE: http://yfrog.com/0bfortonyp Pavel Chuchuva over 6 years ago
  • It wasn't a fix, but a possible solution for you to work from you might need to add reset styles, and IE fixes to get it to work in other browsers, but it worked fine in Safari... Tony Crockford over 6 years ago