CODEWITHSUNDEEP
htmlcss
michelle campbell
michelle campbell

Reputation: 55

html table cell content left and right same position

Im trying to get the text from the left table cell and right table cell to allign at the same place. Also im using blogger if this helps. Here is a picture of what i want

What i want

Here is my table html

<div id="text1">
Motives are extremely important and  not taking care of your motives can cause alot of problems.</div>
<br />
<br />
<div id="table1">
<br />
<table border="0" cellpadding="3" cellspacing="3" id="table1" style="background-color: white; border-collapse: collapse; border: 0px solid #FFCC00; color: black; width: 850;">

<tbody>
<tr>


<td height="400px" width="425px">
<div id="title1">

Sims with Bad Motives:</div>
<br />

<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Can cause your work or school performance to suffer</li>
<br />
<li>Can give you a negative moodlet. </li>
<br />
<li>Can cause death</li>
</ul>

</div>

</td>



<td height="400px" width="425px"><div id="title1">
Sims with Good Motives:
</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Get promotions fast</li>
<br />
<li>Earn life time rewards from mood bar being high.</li>
<br />
<li>Get to pick two extra traits when a baby is born</li>
<br />
<li>Learn skills faster</li>
</ul>
</div>
</td>

</tr>
</tbody></table>
</div>

and here is any css associated with it

#title1 {
text-align:center;
text-decoration: underline;
font-weight: bold;
font-size: 20px;
}

#text1 {
font-size: 15px;
text-align: center;
}

#table1 {
text-align: center;
vertical-align: top center;
}

#table1 {
margin-top: -10px;
}

Upvotes: 0

Views: 136

Answers (1)

designarti
designarti

Reputation: 629

Gosh, horrible markup. I can barely look at it :)

Nevertheless, you have elements with the same ID on the page > #title1, #table1... IDs are unique. Classes are reusable on the same page. You can use the same ID on different pages, but you can't use two elements with the same ID on the same page.

There is a sort of uniformity you need to apply to your markup, and that's what classes are for. You need sort of a same layout for your left and you right columns.

This is the "fix": jsfiddle.net/swqza86p

What I did was to transform IDs into classes and set your tr elements with the vertical-align: top property.

Upvotes: 1

Related Questions