Margin-left doesn't work correctly in a text

Question

I've got a php code that takes a description from a database and show it next to an image.

When I put margin-left: 5px; to the description it works perfectly, but only in the first line, because when there are two lines only works the margin-left at the first.

I can interpret it in html like this:

<div class="gamedes">
<img  class="miniaturas" src="recursos/miniaturas/coster.png">
<div class"gameides>
<a class="gametitle" href="game.php?name='.$row['name'].'">'.$row['name'].'</a>'
<div class="description"><script></script></div><br><br><br><br>'
</div>
</div>

And in the CSS

.miniaturas {
    display: inline;
    border-radius: 10px;
    float: left;
}

.description {
    font-size: 15px;
    display: inline;
    border-radius: 3px;
    margin-left: 5px;
    overflow: hidden;
}

.gametitle{
    font-size: 20px;
    font-weight: bold;
    display: table-cell;
    margin-left: 5px;
}

.gamedes {
    width: 50%;
    display: inline-block;
}

So how I can put the margin-left at the second line?

Here is the demo: http://jsfiddle.net/Ninjacu/G6tqc/

Here you go: http://jsfiddle.net/hashem/G6tqc/2/ My answer was under a misconception thus I deleted that. — Hashem Qolami, Mar 22 '14 at 21:21

SULTAN · Accepted Answer · 2014-03-22T21:42:43.463

1

UPDATE based on comment below:

fiddle: http://jsfiddle.net/3qvGt/

CSS:

    .miniaturas {
        display: inline;
        border-radius: 10px;
        float: left;
    }
   .indent5px{
       margin-left: 5px;
   }
    .description {
        font-size: 15px;
        display: inline;
        border-radius: 3px;
        overflow: hidden;
    }

    .gametitle{
        font-size: 20px;
        font-weight: bold;
        display: table-cell;
        margin-left: 5px;
    }

    .gamedes {
        width: 50%;
        display: inline-block;
    }

HTML:

<div class="gamedes">
<img  class="miniaturas" src="recursos/miniaturas/coster.png">
<div class"gameides">
<a class="gametitle" href="google.es">Hola</a>
<div class="indent5px">
    <div class="description">sdsdsdsds sdsdssdsd</div><br><br><br><br>'
    </div>
</div>
</div>

edited Mar 22 '14 at 21:42

answered Mar 22 '14 at 21:12

SULTAN

1,119
4
12
25

@Ninjacu, in that case you put your description div inside a wrapper div... please see the updated answer... I'll post it now.. – SULTAN Mar 22 '14 at 21:27
Ok but I has this code and I can't do it correctly because I have two description lines but you solved it with the first code so thanks! – Ninjacu Mar 22 '14 at 21:33
@Ninjacu Okay, in that case I would suggest to 1st) remove the wrapper div. 2nd) remove `display: inline;` from your `.description class` . and 3rd) REMOVE `display:inline;` & ADD `text-align:justify; margin-left: 5px;` to your `.description` class. Check this and tell us if it works the way you want. fiddle >> http://jsfiddle.net/ERe47/ – SULTAN Mar 22 '14 at 21:40

Margin-left doesn't work correctly in a text

1 Answers1