CODEWITHSUNDEEP
htmlcss
Jiroscopes
Jiroscopes

Reputation: 555

Div is making a margin by itself?

I am trying to have 2 divs side by side and when i tried to put them in they just fall under eachother. One div is creating a margin on its own to push the others down, how to I get them side-by-side?

fiddle

HTML:

    <div class="teams">
  <div class="team1">
    <img src="images/teams/prolific.png" style="height : 100%; width : 100%; position : relative; z-index : 1">
  </div>
  <p class="team_info">
    nothing</br>
    something
  </p>
</div>

<div class="teams">
  <div class="team2">
    <img src="images/teams/victory.png" style="height : 100%; width : 100%; position : relative; z-index : 1">
  </div>
  <p class="team_info">
    nothing</br>
    something
  </p>
</div>

Upvotes: 0

Views: 275

Answers (3)

caldera.sac
caldera.sac

Reputation: 5108

I wrote a code for you.try this.just copy and paste.this will help to you.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<style type="text/css">

   div.left{
    width:500px;
    height: 600px;
    position: absolute;
    left: 5%;
    box-shadow: 1px 2px 1px black;
   }

   div.left img{
    width: 100%;
    height: 500px;
   }

   div.right{
    width:500px;
    height: 600px;
    position: absolute;
    right: 5%;
    box-shadow: 1px 2px 1px black;

   }

     div.right img{
    width: 100%;
    height: 500px;
   }

</style>

<body>
 <div class="maindiv">
    <div class="left">
        <img src="https://i.ytimg.com/vi/QGiJFumHUPo/maxresdefault.jpg">
        <p>your description</p>
    </div>
    <div class="right">
        <img src="http://media1.santabanta.com/full1/Countries/Places/places-126a.jpg">
        <p>your descripion</p>
    </div>


 </div>

</body>
</html>

Upvotes: 0

Kshiteej Jain
Kshiteej Jain

Reputation: 23

Add display: inline-block; in parent class

.teams {display: inline-block; margin: 0; width: 250px;}

Upvotes: 0

Venugopal
Venugopal

Reputation: 1896

div elements are by default block level elements. giving width is not enough to make them "inline" elements. to do that, you need to change the display property to inline-block.

.teams {
    width: 250px;
    margin: 0;
    display: inline-block;
}

check this fiddle

Upvotes: 1

Related Questions