How to avoid span size affecting parent's CSS

Question

I'm trying to use a sidebar in my webapp project, for that I have my sidebar.jsp like following:

.social {
  width: 100px;
  height: 220px;
  left: 0px;
}

.social li a {
  display: block;
  background: #222;
  font: normal normal normal
  16px/20px 
  'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;;
  text-decoration: none;
  text-align: center;
  transition: background .5s ease .300ms
}

.social li{
    list-style: none;
}

.social li:first-child a:hover { background: #3b5998 }
.social li:nth-child(2) a:hover { background: #00acee }
.social li:nth-child(3) a:hover { background: #ea4c89 }
.social li:nth-child(4) a:hover { background: #dd4b39 }

.social li:first-child a { border-radius: 0 5px 0 0 }
.social li:last-child a { border-radius: 0 0 5px 0 }

.social li a span {
  width: 250px;
  float: left;
  text-align: left;
  background: #222;
  color: #fff;
  margin: -25px 74px;
  padding: 8px;
  transform-origin: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(45deg);
  border-radius: 5px;
  transition: all .5s ease .300ms;
  overflow: auto;

}

.social li span:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -20px;
  top: 7px;
  border-left: 10px solid transparent;
  border-right: 10px solid #222;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;

}

.social li a:hover span {
  visibility: visible;
  opacity: 1;
  transform: rotateY(0)
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<ul class='social'>


  <li>
    <a href="#"> First
     <span>This is a big spawn that will break my app</span>
    </a>
  </li>

  <li>
    <a href="#"> Second
     <span>This is a big spawn that will break my app This is a big spawn that will break my appThis is a big spawn that will break my appThis is a big spawn that will break my app</span>
    </a>
  </li>

  <li>
    <a href="#"> Third
     <span>This is a big spawn that will break my app</span>
    </a>
  </li>  

</ul>

It works fine but, as you can see, the "second" item has a very large spawn, so that makes my "third" item to have so much space beffore.

Is there any way to make the size of the spawn not affect my list size? I mean, I want all items to have the same size, no matter how big spawn is.

Answer 1

You need to position your span absolutely so it takes it out of the flow of the page (to not take up any room) - I have commented bits added in your css below

.social {
  width: 100px;
  height: 220px;
  left: 0px;
}

.social li a {
  width:100%;
  display: block;
  background: #222;
  font: normal normal normal 16px/20px 'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  
  text-decoration: none;
  text-align: center;
  transition: background .5s ease .300ms;
  
  
  position:relative; /* add this to make span position relative to anchor */
}

.social li {
  list-style: none;
}

.social li:first-child a:hover {
  background: #3b5998
}

.social li:nth-child(2) a:hover {
  background: #00acee
}

.social li:nth-child(3) a:hover {
  background: #ea4c89
}

.social li:nth-child(4) a:hover {
  background: #dd4b39
}

.social li:first-child a {
  border-radius: 0 5px 0 0
}

.social li:last-child a {
  border-radius: 0 0 5px 0
}

.social li a span {
  width: 250px;
  text-align: left;
  background: #222;
  color: #fff;
  padding: 8px;
  transform-origin: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-50%) rotateY(45deg); /* I added this translate just to vertically center it along with top 50% */
  border-radius: 5px;
  transition: all .5s ease .300ms;
  overflow: auto;
  
  position:absolute; /* add the following - play with top and left to adjust the position, I have removed float left and margin from here */
  left: calc(100% + 10px);  /* the 10px is the gap */
  top:50%; 
}

.social li span:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -20px;
  top: 7px;
  border-left: 10px solid transparent;
  border-right: 10px solid #222;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
}

.social li a:hover span {
  visibility: visible;
  opacity: 1;
  transform: rotateY(0)  translateY(-50%); /* translate needs to go here too */
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<ul class='social'>
  <li>
    <a href="#"> First
     <span>This is a big spawn that will break my app</span>
    </a>
  </li>
  <li>
    <a href="#"> Second
     <span>This is a big spawn that will break my app This is a big spawn that will break my appThis is a big spawn that will break my appThis is a big spawn that will break my app</span>
    </a>
  </li>
  <li>
    <a href="#"> Third
     <span>This is a big spawn that will break my app</span>
    </a>
  </li>
</ul>

Answer 2

give span any style you want to avoid the damage like

<span style="display:inline; left:0;"> </span>

inline css is powerful than style sheet

Answer 3

Make the parent element position: relative;and the child element postion: absolute;.

.social {
  width: 100px;
  height: 220px;
  left: 0px;
}

.social li a {
  display: block;
  background: #222;
  font: normal normal normal 16px/20px 'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  ;
  text-decoration: none;
  text-align: center;
  transition: background .5s ease .300ms;
  position: relative;
}

.social li {
  list-style: none;
}

.social li:first-child a:hover {
  background: #3b5998
}

.social li:nth-child(2) a:hover {
  background: #00acee
}

.social li:nth-child(3) a:hover {
  background: #ea4c89
}

.social li:nth-child(4) a:hover {
  background: #dd4b39
}

.social li:first-child a {
  border-radius: 0 5px 0 0
}

.social li:last-child a {
  border-radius: 0 0 5px 0
}

.social li a span {
  width: 250px;
  float: left;
  text-align: left;
  background: #222;
  color: #fff;
  margin: 0;
  padding: 8px;
  transform-origin: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(45deg);
  border-radius: 5px;
  transition: all .5s ease .300ms;
  overflow: auto;
  position: absolute;
  left: 100%;
}

.social li span:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -20px;
  top: 7px;
  border-left: 10px solid transparent;
  border-right: 10px solid #222;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
}

.social li a:hover span {
  visibility: visible;
  opacity: 1;
  transform: rotateY(0)
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<ul class='social'>


  <li>
    <a href="#"> First
     <span>This is a big spawn that will break my app</span>
    </a>
  </li>

  <li>
    <a href="#"> Second
     <span>This is a big spawn that will break my app This is a big spawn that will break my appThis is a big spawn that will break my appThis is a big spawn that will break my app</span>
    </a>
  </li>

  <li>
    <a href="#"> Third
     <span>This is a big spawn that will break my app</span>
    </a>
  </li>

</ul>