CODEWITHSUNDEEP
htmlcss
Ninjacu
Ninjacu

Reputation: 169

Put a div next another div

I have this code: http://jsfiddle.net/Ninjacu/t9r9S/4/

It's this

<div class="gamedes">
    <img class="miniaturas"src="http://thumbs.mochiads.com/c/g/coaster-racer-3/_thumb_200x200.png">
        <a class="gamede" src="google.es">Hola</a>
        <div class="description">Description about 120 caracters</div><br><br><br><br>
        </div>

        <div class="gamedes">
    <img class="miniaturas"src="http://thumbs.mochiads.com/c/g/coaster-racer-3/_thumb_200x200.png">
        <a class="gamede" src="google.es">Hola</a>
        <div class="description">Description about 120 caracters</div><br><br><br><br>
        </div>

And I Want to put the second image, title and text next to the first, like in two columns.

I don't understand why I can't do that because I try all the methods I know and it doesn't work.

Any solution?

Upvotes: 0

Views: 68

Answers (5)

SULTAN
SULTAN

Reputation: 1159

HTML:

<div class="gamedes">
    <img class="miniaturas"src="http://thumbs.mochiads.com/c/g/coaster-racer-3/_thumb_200x200.png"><br />
        <a href="#" class="gamedes" src="google.es">Hola</a><br />
  <div class="description">Description about 120 caracters</div>
</div>
<div class="gamedes">
    <img class="miniaturas"src="http://thumbs.mochiads.com/c/g/coaster-racer-3/_thumb_200x200.png"><br />
        <a href="#" class="gamedes" src="google.es">Hola</a><br />
  <div class="description">Description about 120 caracters</div>
</div>

CSS:

.gamedes{
   float: left;
   margin-left: 10px;
}
.miniaturas {
    border-radius: 10px;
}

.description {
    font-size: 15px;
    background-color: #A4A4A4;
    border-radius: 3px;
    margin-left: 5px;
}

Results here: http://jsfiddle.net/2kXFH/

Upvotes: 0

JunM
JunM

Reputation: 7150

You can use display: inline-block;

Fiddle

.gamedes{
    display: inline-block;
}

Also, I have modified a bit on your html

Upvotes: 1

stmfunk
stmfunk

Reputation: 683

Try this 

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

.description {
    font-size: 15px;
    background-color: #A4A4A4;
    display: inline;
    border-radius: 3px;
    margin-left: 5px;
    width: 10%;
}

.gamede{
    font-size: 20px;
    font-weight: bold;
    margin-left: 5px;
}

.gamedes {
    float:left;
}

Upvotes: 0

dirigibleplum
dirigibleplum

Reputation: 137

Have you tried floating the divs?

.gamedes {
  float:left
}

Upvotes: 1

user3443160
user3443160

Reputation: 106

First give them specific width and the float them left like this.

.gamedes{
  width:200px;
  float:left;
}

Upvotes: 0

Related Questions