Travis Travis - 4 months ago 8
HTML Question

Placing a span at bottom of div (Horizontal displacement issue)

I know the general rule of thumb is research before asking questions, and I'm looking at a lot if different sources. Not to much luck here.

My end goal is to have the text centered and at the bottom of the div. Simple as that.

But when I use the code given by other sources, it's not centered in the actual div.

HTML:

<div class="fbox" id="breast">
<span class="title">Breast Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="facial">
<span class="title">Facial Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="body">
<span class="title">Body Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>
<div class="fbox" id="surgery">
<span class="title">Non-Surgical Procedures</span>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<span class="read">View Descriptions</span>
</div>


CSS:

.title{
font-size:16px;
margin:0 auto;
text-align:center;
font-weight:600;
}
.fbox{
width: 250px;
height: 300px;
background: rgb(250, 250, 250);
-moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
display:inline-block;
vertical-align:top;
text-align:center;
margin:0 auto;
position:relative;
}
.main-content ul li{
list-style-type:none;
}
.main-content ul{
margin:0 auto;
}
.read{
height:40px;
width:250px;
position:absolute;
bottom:0;
}


JSFiddle

All help is appreciated!

Answer

You were so close!

SOLUTION:

Replace:

.read {
  height: 40px;
  width: 250px;
  position: absolute;
  bottom: 0;
}

With:

.read {
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

CODE SNIPPET:

.title {
  font-size: 16px;
  margin: 0 auto;
  text-align: center;
  font-weight: 600;
}
.fbox {
  width: 250px;
  height: 300px;
  background: rgb(250, 250, 250);
  -moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
  -webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
  box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin: 0 auto;
  position: relative;
}
.main-content ul li {
  list-style-type: none;
}
.main-content ul {
  margin: 0 auto;
}
.read {
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
<div class="fbox" id="breast">
  <span class="title">Breast Procedures</span>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  <span class="read">View Descriptions</span>
</div>
<div class="fbox" id="facial">
  <span class="title">Facial Procedures</span>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  <span class="read">View Descriptions</span>
</div>
<div class="fbox" id="body">
  <span class="title">Body Procedures</span>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  <span class="read">View Descriptions</span>
</div>
<div class="fbox" id="surgery">
  <span class="title">Non-Surgical Procedures</span>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  <span class="read">View Descriptions</span>
</div>


JSFiddle