CODEWITHSUNDEEP
javascripthtmlcss
Joshua R C
Joshua R C

Reputation: 83

Why are my links at different heights?

I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage

However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage

Can anyone tell me why this is happening and how to fix it?

Here is my HTML, CSS, and JavaScript:

//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
	var menuAWidth = $('.menu a').css('width');
	menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
	var menuAHeight = menuAWidth*1.618;
	menuAHeight = (Math.round(menuAHeight*1000))/1000;
	$('.menu a').css('height', menuAHeight);
});
body {
  background: #fffae5;
  font-family: sans-serif;
  margin: 0;
}
.main {
  margin-left: 300px;
  padding-left: 1%;
}
.main h2 {
  text-align: center;
  font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  float: left;
  width: 300px;
  font-size: 20px;
  background: #D2B48C;
  margin-left: 0;
  margin-top: 0;
  height: 100%;
}
#heading {
  background: #a52a2a;
  padding: 5px;
  text-align: center;
  font-family: serif;
}
#heading h1 {
  font-size: 30px;
}
nav {
  line-height: 35px;
  text-align: center;
}
nav ul {
  list-style: none;
  margin: 0;
}
nav ul li,
nav ul {
  padding-left: 0;
}
#sidebar a {
  color: #000;
  text-decoration: none;
}
/*This is the relevant code*/

.menu a {
  color: #000;
  text-decoration: none;
  display: inline-block;
  width: 21%;
  background: #9E7D70;
  padding: 5px;
  margin: 1%;
  border-radius: 10px;
}
.menu h3 {
  text-align: center;
  padding: 0 16px 0 16px;
}
.menu p {
  padding: 0 16px 0 16px;
}
/*Also irrelavent*/

nav a[href="vocab.html"] li {
  background: #000;
  color: #fff;
}
nav a[href="../vocab.html"] li {
  background: #000;
  color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>He Who Teacheth</title>
  <!--<link rel="stylesheet" type="text/css" href="main.css">
	<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
	<style>
	
	</style>-->
</head>

<body>
  <div id="sidebar">
    <a href="home.html">
      <div id="heading">
        <h1>He Who Teacheth</h1>
        <p><strong>Romans 2:21</strong>
          </br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
      </div>
    </a>
    <nav>
      <ul>
        <a href="home.html">
          <li>Home</li>
        </a>
        <a href="math.html">
          <li>Math</li>
        </a>
        <a href="science.html">
          <li>Science</li>
        </a>
        <a href="history.html">
          <li>History</li>
        </a>
        <a href="art.html">
          <li>Art</li>
        </a>
        <a href="vocab.html">
          <li>Vocabulary</li>
        </a>
        <a href="gospel.html">
          <li>Gospel</li>
        </a>
        <a href="english.html">
          <li>English</li>
        </a>
      </ul>
    </nav>
  </div>

  <!--Main code, this is the part that pertains to the question-->
  <div class="main">
    <h2>Vocabulary</h2>
    <div class="menu">
      <a href="skeleton.html">
        <h3>Skeleton</h3>
        <p>This is the basic HTML structure for all the math pages.</p>
      </a>
      <a href="skeleton.html">
        <h3>Literary</h3>
        <p>This is a personal dictionary of literary terms, with a description of each one.</p>
      </a>
    </div>
  </div>
  <!--<script src="jquery.min.js"></script>
  <script src="main.js"></script>-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

Upvotes: 1

Views: 56

Answers (1)

t-jam
t-jam

Reputation: 800

display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.

Upvotes: 3

Related Questions