How to divide document in to columns html php and css - php

Question

I have a web page with an image and title with a description and I want to put another column next to the image and title and text with the same structure.
I have this
echo '<div class="gamedes">';
echo '<img class="miniaturas" src="recursos/miniaturas/coster.png" </img>';
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) + "<br>");</script></div><br><br><br><br>';
echo '</div>';
And this css
.miniaturas {
display: inline;
border-radius: 10px;
float: left;
}
.description {
font-size: 15px;
background-color: #A4A4A4;
display: inline;
border-radius: 3px;
margin-left: 5px;
width: 10%;
}
.gamede{
font-size: 20px;
font-weight: bold;
display: inline;
margin-left: 5px;
}
I want yo put the same structure image, title and description next to the first
I try to put a width to the description but it doesn't work.
Its like this http://jsfiddle.net/Ninjacu/t9r9S/4/
And I want to out the second image next to the first like in two columns

Answer 1

It seems you want something like this:
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;
}
This should work.Give width to the div containing the structure so everything you put inside that div will fall in place.

Answer 2

I'm assuming the question stems from two things - your current layout isn't quite working correctly and you are interested in adding another column to the existing layout. I adjusted your original code and removed the php (it isn't relevant for a layout question), then applied a table-row and table-cell based layout via css (not using an actual table tag). One other thing I did was I used div tags for layout rather than trying to force layout on specific tags such as the "a" tag. Doing this you end up with the following 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">Text for the link</div>
<div class="description">This is a somewhat longer description here probably up to 120 characters</div>
</div>
In the css the key pieces are:
.gamedes { display: table-row; }
.miniaturas { display: table-cell; }
/* etc */
To see the whole thing running, take a look at this JSFiddle: http://jsfiddle.net/hPLNK/4/
So, given this layout, all you have to do to add a new column now is add a new <div> inside of the "gamedes" and set the css display style to table-cell!
Final Note - The original code you provided had a few other issues that I fixed. A <script> tag is for including javascript. You seem to want to include text. An image tag can't have a </img> inside of it. Avoid using <br/> to force a height on a div or area. Instead use css based layouts.
Small PHP Example
In case you need some help getting the PHP back into this example, my recommendation is to put the php code inline. You end up with something like:
<div class="miniaturas"><img src="<? echo($imageUrl); ?>" /></div>
I made the assumption here that your image link is stored in "$imageUrl", but you get the idea. The nice thing about putting php inline like this is it reads a little more cleanly and editing the html becomes much easier. Best of luck!