Antonio Kovačević Antonio Kovačević - 1 month ago 5
CSS Question

How to make text overflow and overlap another div?

I'm making a interactive periodic table of elements and I've run into an issue.

In my example below the Potassium and 39.0983 is below 2,8,8,1 that is in a separate div.

I need it so that the numbers 2,8,8,1 overlay above Potassium so that it doesn't push it down.



.base {
margin: -1px;
height: 75px;
width: 75px;
padding: 0px;
}
.element {
text-align: center;
border: 1px solid white;
cursor: pointer;
display: flex;
flex-direction: column;
}
div.element > div {
display: flex;
justify-content: space-between;
}
div.element > div code {
background-color: transparent;
font: 10px arial, sans-serif;
}
div.element > div abbr {
font-size: 140%;
font-weight: bolder;
}
div.element > div ed {
font: 10px arial, sans-serif;
}
div.element span,
p {
font: 12px arial, sans-serif;
}
div.element span {
display: block;
text-align: center;
}
div.element p {
display: block;
font: 10px arial, sans-serif;
position: relative;
top: 1px;
text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-1 base">
<div id="4_1" class="base element" style="background-color: rgb(255, 153, 0);">
<div>
<code>19</code>
<abbr>K</abbr>
<ed>
2
<br>8
<br>8
<br>1
</ed>
</div>
<span>Potassium</span>
<p>39.0983</p>
</div>
</div>





https://jsfiddle.net/fau2Lk3k/

Answer

It's not really clear how you want the image to appear. But a quick google search of periodic table elements yields this common layout:

enter image description here

Source: Google (image terms permit use)

Using your original code, here's a revised version:

.base {
  height: 75px;
  width: 75px;
  padding: 0 0 0 2px;
  font-family: arial, sans-serif;
  font-size: 12px;
  background-color: rgb(255, 153, 0);
}
.element {
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}
div.element > code {
  font-size: 140%;
  font-weight: bold;
}
div.element > abbr {
  font-size: 175%;
  font-weight: bold;
}
div.element > ol {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
<div class="base element">
  <code>19</code>
  <abbr>K</abbr>
  <ol>
    <li>2</li>
    <li>8</li>
    <li>8</li>
    <li>1</li>
  </ol>
  <span>Potassium</span>
  <span>39.0983</span>
</div>