[Solved] Multiple css classes – small square inside a box?

[MBM]

Why isn’t this working? It’s supposed to display a rectangle box with a yellow square inside it.

.messagebox {
position:fixed;
background-color:#000000;
color:#ffffff;
left:40%;
top:40%;
z-index:1;
border:3px solid #ffffff;
font-family:'Voltaire', sans-serif;
font-size:24px;
height:60px;
width:300px;
text-align:center;
border-radius:15px;
padding-top:20px;
}

.icon{
position:absolute;
width:20px; 
height:2px; 
background:#ffff00;
border-radius:1px;
}

<div class="messagebox icon"></div>

http://codepen.io/Nullbreaker/pen/bvpgo

[Paulie_D]

At the moment some of your .icon classes properties are overriding your .messagebox classes properties.

If you want a box in a box…you have to get the structure right.

<div class="messagebox">  
  <div class="icon"></div>
</div>>

http://codepen.io/Paulie-D/pen/haADc

[MBM]

Thank you.

[Author]

Posts