SharePoint: CSS - text at bottom of DIV

  • Article

A seemingly simple request recently had me spinning around for a day, wrestling with CSS. A set of simple boxes, with text at the BOTTOM of the box. Thrown up by a Content Editor web-part. Easy? Heh! I futzed around for a day, before  a colleague took it up and nailed it for me. Judicial use of just "position" and "bottom" and it works fine.

<!DOCTYPE html>
<STYLE type="text/css">
.bluebox {
    background-color: rgb(0, 114, 198);
    display: inline-block;
    height: 100px;
    width: 100px;
    margin-top: 0px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 0px;
    position: relative;
    cursor: pointer;
}
.title {
    font-family:'Segoe UI';
    float: left;
    margin: 5px;
    bottom: 5px;
    line-height: 9.5pt;
    font-size: 10.5pt;
    font-weight: 400;
    color: white;
    position: absolute;
}

.bluebox:hover {
    background-color:rgb(0, 32, 80);
}

</STYLE>

<html>
   <head>
      <title>Modern Style</title>
      <script src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.js"></script>
    </head>
    <body>
      <div id="link1" class="bluebox" onclick="location.href='#';"><div class="title">Windows 8</div></div>
      <div id="link1" class="bluebox" onclick="location.href='#';"><div class="title">Office 365</div></div>
      <div id="link3" class="bluebox" onclick="location.href='#';"><div class="title">Surface</div></div>
      <div id="link3" class="bluebox" onclick="location.href='#';"><div class="title">Windows Phone</div></div>
      <div id="link3" class="bluebox" onclick="location.href='#';"><div class="title">Xbox Live</div></div>
      <div id="link3" class="bluebox" onclick="location.href='#';"><div class="title">Windows Server</div></div>
      <div id="link2" class="bluebox" onclick="location.href='#';"><div class="title">SharePoint</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">SQL Server</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Exchange</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">System Centre</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Visual Studio</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Skydrive cloud storage</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Skype</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Bing</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Outlook.com</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Microsoft PhotoSynth</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Azure</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Biztalk</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Lync</div></div>
      <div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Microsoft Dynamics</div></div>
    </body>
</html>