CSS Layout nested div's weird behavior

Question

I have a webpage im trying to layout and it current looks like this. https://i.sstatic.net/s4TOb.jpg

I want the purple box to be inline w/ the pink box in the yellow box, which is in the green box. When i change the display field in css to inline-block for the two the whole green box moves down to bottom of grey box w/ height = to yellow box. Why is this happening?

CSS

div.localPlayer {
  position: fixed;
  bottom: 0;
  width: 100%;
  left:0;
  height: 300px;
  background: rgb(181, 181, 181);
  text-align:center;
}

div.coinStatus {
  position: relative;
  top: 0px;
  left: 0px;
  display: block;
  width: 100%;
  height: 100px;
  background-color:yellow;
}

div.coinInfo {
  height: 100px;
  width: 100px;
  background: purple;
  display: block;
}

div.coin {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-color: pink;
  display: block;
  background-image: url('../images/6.png');
}

div.status {
  postion: relative;
  width: 400px;
  height: 280px;
  display: inline-block;
  margin: 10px;
  background-size: cover;
  border-radius: 10px;
  background: green;
}

div.card {
  width: 180px;
  height: 280px;
  display: inline-block;
  margin: 10px;
  background-size: cover;
  border-radius: 10px;
}

div.card.1 {
  background-image: url('../images/1.png');
}
div.card.2 {
  background-image: url('../images/2.png');
}
div.card.3 {
  background-image: url('../images/3.png');
}
div.card.4 {
  background-image: url('../images/4.png');
}
div.card.5 {
  background-image: url('../images/5.png');
}

HTML

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="css/coup.css">
      <script src="js/jquery-2.1.3.min.js"></script>
      <script src="js/file.js"></script>
   </head>
   <body>
      <div> Image </div>
      <div id="this" class="localPlayer">
         <div id="card1" class="card 1"></div>
         <div id="card2" class="card 2"></div>
         <div id="status" class="status">
            <div id="coinStatus" class="coinStatus">
               <div class="coin"></div>
               <div id="numberOfCoins" class="coinInfo"></div>
            </div>
         </div>
      </div>
   </body>
</html>

Please, remove unnecessary CSS rules and check each CSS rule — belykh
– belykh, Commented Jan 7, 2015 at 5:12
Try vertical-align: top on div.status : jsbin.com/popajequqo/1/edit?html,css — user3790069
– user3790069, Commented Jan 7, 2015 at 5:22

Suresh Ponnukalai · Accepted Answer · 2015-01-07 06:14:23Z

0

inline-block elements default alignment is vertical-align:bottom. So that it is going down to bottom. Apply vertical-align:top for your inline block elements. Hopefully it will fix the issue.

 div.status {
 postion: relative;
 width: 400px;
 height: 280px;
 display: inline-block;
 margin: 10px;
 background-size: cover;
 border-radius: 10px;
 background: green;
 vertical-align:top;
 }

 div.card {
  width: 180px;
  height: 280px;
  display: inline-block;
  margin: 10px;
  background-size: cover;
  border-radius: 10px;
 vertical-align:top;
}

answered Jan 7, 2015 at 6:14

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

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

Comments

Mudeyanse · Accepted Answer · 2015-01-08 01:09:28Z

Please check this " adding float: left might fix this

div.localPlayer {
  position: fixed;
  bottom: 0;
  width: 100%;
  left:0;
  height: 300px;
  background: rgb(181, 181, 181);
  text-align:center;
}

div.coinStatus {
  position: relative;
  top: 0px;
  left: 0px;
  display: block;
  width: 400px;
  height: 100px;
  background-color:yellow;
}

div.coinInfo {
  height: 100px;
  width: 100px;
  background: purple;
  display: block;
  float:left;
}

div.coin {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-color: pink;
  display: block;
  float:left;
}

div.status {
  postion: relative;
  width: 400px;
  height: 280px;
  display: inline-block;
  margin: 10px;
  background-size: cover;
  border-radius: 10px;
  background: green;
  vertical-align:top;
}

div.card {
  width: 180px;
  height: 280px;
  display: inline-block;
  margin: 10px;
  background-size: cover;
  border-radius: 10px;
  vertical-align:top;
}

Collectives™ on Stack Overflow

CSS Layout nested div's weird behavior

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related