Как разделить документ на столбцы html php и css

Кажется, вы хотите что-то вроде этого:

img   |  img
title |  title
des   |  des

echo '<div class="gamedes">';
echo '<img  class="miniaturas" src="recursos/miniaturas/coster.png" />';
echo '<a class="gamede" href="game.php?name='.$row['name'].'">'.$row['name'].'</a><br />';
echo '<div class="description"> <script>           document.write("'.$row['description'].'".substring(0,120)"); </script><br /></div><p>';
echo '</div>';


css:

.gamedes{
  width:20%;
  float:left;
}

.description{
  width:100%;
  overflow:hidden;
 }

Это должно работать. Увеличьте ширину до div, содержащего структуру, чтобы все, что вы положили внутри этого div, упало на место.

Я предполагаю, что вопрос связан с двумя вещами: ваш текущий макет не совсем корректен, и вы заинтересованы в добавлении другого столбца в существующий макет. Я скорректировал исходный код и удалил php (это не относится к вопросу о макете), затем применил раскладку table-row table-cell и table-cell основе css (не используя фактический тег таблицы). Еще одна вещь, которую я сделал, - это использовать теги div для макета, а не пытаться форматировать макеты для определенных тегов, таких как тег "a". В результате вы получите следующий html:

<!-- This is a row -->
<div class="gamedes">
    <!-- this is a column -->
    <div class="miniaturas"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Google.png/800px-Google.png" /></div>
    <div class="gamede"><a href="game.php">Text for the link</a></div>
    <div class="description">This is a somewhat longer description here probably up to 120 characters</div>
</div>

В css ключевыми словами являются:

.gamedes { display: table-row; }
.miniaturas { display: table-cell; }
/* etc */

Чтобы увидеть все это, взгляните на этот JSFiddle: http://jsfiddle.net/hPLNK/4/

Итак, учитывая этот макет, все, что вам нужно сделать, чтобы добавить новый столбец, теперь добавляет новый <div> внутри "gamedes" и устанавливает стиль отображения css в table-cell !

Заключительное примечание. В исходном коде у вас было несколько других проблем, которые я исправил. Тег <script> предназначен для включения javascript. Кажется, вы хотите включить текст. Тэг изображения не может иметь </img> внутри него. Избегайте использования <br/> для увеличения высоты в div или области. Вместо этого используйте макеты css.

Малый пример PHP

Если вам нужна помощь в возвращении PHP в этот пример, моя рекомендация - добавить PHP-код в строку. Вы получите что-то вроде:

<div class="miniaturas"><img src="<? echo($imageUrl); ?>" /></div>

Я сделал здесь предположение, что ссылка на изображение хранится в "$ imageUrl", но вы получаете эту идею. Хорошая вещь о том, чтобы вставить php inline, как это, она читает немного более чисто, и редактирование html становится намного проще. Удачи!