Unable to output inline output for 2 articles

Now let me ask the right question

The problem is that I want to output 2 articles per line (horizontally), currently 1 article is displayed vertically. Output code:

printf ("
<table align='center' class='lesson'>
    <tr>
        <td class='lesson_title'>
            <p class='lesson_name'>
                <a class='a' href='view_obzor.php?id=%s'>%s</a>
            </p>
            <p class='lesson_adds'> : %s</p>
            <p class='lesson_adds'> : %s</p>
        </td>
    </tr>
    <tr>
        <td>
            <p class='lessons_text'>%s</p>
            <p class='lesson_view'>: %s &nbsp;&nbsp; :
                <img src='images/%s.gif'>
            </p>
        </td>
    </tr>
</table>
<br>
<br>
", $myrow["id"], $myrow["title"], $myrow["date"], $myrow["author"], $myrow["description"], $myrow["view"], $r);

Css code:

.lesson {
     border: 1px solid#aec3f8;
     border - radius: 15px 15px 15px 15px;
     width: 35 %;
 }

Images as is:

alt text

I would like to achieve this result. Everything is indicated with lines like this:

alt text

Many thanks in advance, I hope I described the problem correctly.

Sincerely, StrannicK.


Answer 1, authority 100%

For the example above, I would suggest adding style="vertical-align:top". Better use block layout.

.container {
    display: block;
    width: 500px;
    overflow: hidden;
}.lesson {
    float: left;
    width: 240px;
    height: 100px;
    margin: 5px;
}

Example


Answer 2, authority 50%

If you like tabular layout so much, then wrap each of your constructions in another table of two cells (td) in rows. Example:

<table>
<tr>
<td><table align='center' class='lesson'></table></td>
<td><table align='center' class='lesson'></table></td>
<tr>
</table>

The second option. css:

.lesson {
     float:left;
 }

In this case, the width of the lesson table must be styled and must be less than half of the parent element.