CODEWITHSUNDEEP
htmlcss
ThePerplexedOne
ThePerplexedOne

Reputation: 2950

Why is my image pushing my <td> so far to the right?

I'm trying to replicate the design and structure of a Facebook page post.

body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
a {
    color: #365899;
    cursor: pointer;
    text-decoration: none;
}
.post td {
    vertical-align: top;
}
.timestamp {
    font-size: 13px;
    color: #999;
}
<div class="post">
    <table>
        <tbody>
            <tr>
                <td>
                    <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
                </td>
                <td>
                    <table>
                        <tr>
                            <td>
                                <strong><a>Toomblr</a></strong>
                            </td>
                        </tr>
                        <tr class="timestamp">
                            <td>
                                20/01/2017 - 11:43
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    Some content.
                </td>
            </tr>
        </tbody>
    </table>
</div>

Here is the JSFiddle of what I have: https://jsfiddle.net/6nodfbdj/

As you can see, the image is only 50x50, but it's pushing the td all the way out like that for no reason.

Somehow it's conflicting with the td that contains the content. So basically what's happening, is whatever the width of the content td is, is also being set for the td containing the image.

Any ideas?

Upvotes: 1

Views: 645

Answers (5)

Dan Ringhiser
Dan Ringhiser

Reputation: 201

As mentioned in one of the comments, tables are not to be used for formatting. They are for tabular data.

From The w3.org site

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Note. This specification includes more detailed information about tables in sections on https://www.w3.org/TR/html401/appendix/notes.html#notes-tables

Instead you should use CSS. While the layout and sizes aren't exactly the same as your fiddle, take a look at https://jsfiddle.net/ringhidb/jeeu2yrt/

<!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <style type="text/css">
        body {
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 16px;
        }

a {
  color: #365899;
  cursor: pointer;
  text-decoration: none;
}

.post {
  position: absolute;
}

.header {}

.logo {
  float: left;
  padding: .1em;
}

.info {
  float: left;
  padding: .25em;
}

.site {
  font-size: 1.02em;
  font-weight: bold;
}

.timestamp {
  font-size: .75em;
  color: #999;
}

.content {
  clear: both;
}

  </style>

 <title>CSS Layout</title>
 
</head>

<body>
  <div class="post">
    <div class="header">
      <div class="logo">
        <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
      </div>
      <div class="info">
        <a class="site">Toomblr</a>

        <div class="timestamp">20/01/2017 - 11:43</div>
      </div>
    </div>

    <div class="content">
      Some content.
    </div>
  </div>
</body>

</html>

Upvotes: 2

Farman Orakzai
Farman Orakzai

Reputation: 19

have you tried image width 100% ?

Upvotes: 1

Feralheart
Feralheart

Reputation: 1920

You had a "spare cell" what can be fixed with rowspan and colspan. Try this:

<body>
<div class="post">
    <table>
        <tbody>
            <tr>
                <td rowspan=2>
                    <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
                </td>
                <td>
                <strong><a>Toomblr</a></strong>
                </td>
                </tr>
                        <tr class="timestamp">
                            <td>
                                20/01/2017 - 11:43
                            </td></tr>
            <tr>
                <td colspan=2>
                    Some content.
                </td>
            </tr>
        </tbody>
    </table>
    </div>
</body>

Upvotes: 1

Luis Gurmendez
Luis Gurmendez

Reputation: 664

I don't know what you want to do, but try this.

.post td {
    vertical-align:top;
    float:left;
}

Upvotes: 2

splrs
splrs

Reputation: 2432

It's being set by the width of the text in the <td> containing "Some content". Try:

<td colspan=2>
    Some content.
</td>

Upvotes: 2

Related Questions