How to divide document in to columns html php and css

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

did you try setting up a table to fill the whole document, creating 1 row and as many columns as you need? — Banana
– Banana, Commented Mar 22, 2014 at 13:29
also possible with <ul> if you set list-type:none and display:inline to its <li> elements, it will be horizontal — Banana
– Banana, Commented Mar 22, 2014 at 13:40
could you set up a jsfiddle.net with your final html so we could see what you currently have? — Banana
– Banana, Commented Mar 22, 2014 at 13:43

Shrutee · Accepted Answer · 2014-03-22 14:34:08Z

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.

answered Mar 22, 2014 at 14:34

Shrutee

1,9251 gold badge12 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ninjacu Over a year ago

Oh yes I want something like this!

Ninjacu Over a year ago

But the title next to the img and the des down the title

Shrutee Over a year ago

do float:left to image class so anchor tag would float towards the right of image. And as you want the 'description' below then let its width be 100% so 'description' cannot be floated left.

drew_w · Accepted Answer · 2014-03-22 14:58:34Z

0

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"><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>

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!

edited Mar 22, 2014 at 14:58

answered Mar 22, 2014 at 13:30

drew_w

10.5k4 gold badges33 silver badges50 bronze badges

9 Comments

Ninjacu Over a year ago

Okey but I need this script because I need to take the description from a database

Banana Over a year ago

its a comment no an answer.

Banana Over a year ago

he asked how to add a column. where is the answer? i think my eyesight is failing me because i cant find it within your collection of comments.

drew_w Over a year ago

@Banana I believe that may be better!

Banana Over a year ago

much better actually :) +1

|

Collectives™ on Stack Overflow

How to divide document in to columns html php and css

2 Answers 2

3 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related