CODEWITHSUNDEEP
htmlcss
Ne Kr
Ne Kr

Reputation: 208

text is not aligned in 2 columns

I have a row with 2 columns, where there is some text: My Website Example. I do not understand why the text on the 2 columns is not aligned? The right side the text is flying more above, than the left side. They should be aligned.

How can that be?

There is a lot of CSS, so I did not copy the code in here. But there is a jsfiddle here.

<body>
  <table class="body">
    <tr>
      <td class="center" align="center" valign="top">
        <center>
            <table class="row footer">
                <tr>
                    <td class="wrapper">

                      <table class="six columns">
                        <tr>
                          <td class="left-text-pad">

                            <h5>A Headline</h5>

                            <table>
                              <tr>
                                <td>
                                  <strong>Detaljer om værelset:</strong>
                                </td>
                              </tr>
                            </table>

                            <h5>A Headline</h5>

                            <table>
                              <tr>
                                <td>
                                  A content text 2
                                </td>
                              </tr>
                            </table>

                            <h5>A Headline</h5>

                            <table>
                              <tr>
                                <td>
                                  A content text 3
                                </td>
                              </tr>
                            </table>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>
                    <td>
                     <table class="six columns">
                        <tr>
                          <td class="left-text-pad">

                            <h5>A Headline</h5>

                            <table>
                              <tr>
                                <td>
                                  A content text 1
                                </td>
                              </tr>
                            </table>

                            <h5>A Headline</h5>

                            <table>
                              <tr>
                                <td>
                                  A content text 2
                                </td>
                              </tr>
                            </table>

                            <h5>A Headline</h5>

                            <table>
                              <tr>
                                <td>
                                  A content text 3
                                </td>
                              </tr>
                            </table>
                          </td>
                          <td class="expander"></td>
                        </tr>
                     </table>
                    </td>
                </tr>
            </table>
        </center>
      </td>
    </tr>
</table>
</body>

Upvotes: 0

Views: 330

Answers (6)

Nishit Mistry
Nishit Mistry

Reputation: 1

Its because the wrapper class. Remove content-wrapper class and put wrapper instead of it.

And also give a width size of table. So, you can find alignment.

It works.

Upvotes: 0

sneha
sneha

Reputation: 445

you missed the class wrapper in the right column.Due to this the right side text is flying over.

Upvotes: 2

Singh Kailash
Singh Kailash

Reputation: 674

<html>
<head>
    <title></title>
</head>
<body>
    <table class="body" align="center">
        <tr>
            <td class="center" align="center" valign="top">
                <table class="row footer">
                    <tr>
                        <td class="wrapper" valign="top">
                            <table class="six columns">
                                <tr>
                                    <td class="left-text-pad">
                                        <table>

                                            <tr>
                                                <td class="left-text-pad">
                                                    <h5>A Headline</h5>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>Detaljer om værelset:</strong>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="left-text-pad">
                                                    <h5>A Headline</h5>

                                                </td>
                                            </tr>
                                        
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td valign="top">
                            <table class="six columns">
                                <tr>
                                    <td class="left-text-pad">
                                        <h5>A Headline</h5>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="left-text-pad">A content text 1
                                    </td>
                                </tr>

                                <tr>
                                    <td class="left-text-pad">
                                        <h5>A Headline</h5>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="left-text-pad">A content text 2
                          
                                    </td>
                                </tr>
                            
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Upvotes: 1

Ranjith
Ranjith

Reputation: 219

Its because of padding you applied for .wrapper class.

Your actual code

td.wrapper { padding: 10px 20px 0px 0px; position: relative; }

Replace with td.wrapper { position: relative; }

Hope it works!

Upvotes: 1

lukas84
lukas84

Reputation: 425

Looking at your fiddle, you put the .wrapper class only on the first td of the outer table. It has a padding-top of 10px which is what is causing the disalignment. So, either add the same class to the other td, or remove it, or remove the padding-top rule.

Upvotes: 0

BritishSam
BritishSam

Reputation: 1080

Your class 'wrapper' has padding, but its only on the left table not the right

Upvotes: 3

Related Questions