CODEWITHSUNDEEP
htmlcssmargins
Digital Brent
Digital Brent

Reputation: 1285

Strange gap occurring in simple HTML + CSS page

I'm building a very simple web page that will be segmented into 4 even quarters of the page, with a div in each corner. I'm running into this weird problem though - One of the divs keeps acting like something is above it, but I can't see anything there when I inspect the element. Here's an image: enter image description here

Here is the complete HTML and CSS (It's not very long):

<html>

<head>

    <style type="text/css">

        *{
            margin: 0;
            font-family: "Helvetica", helvetica, arial, sans-serif;
        }

        html, body{
            height: 100%;
        }

        h2{
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: 5%;
        }

        .qrtr{
            width: 50%;
            display: inline-block;
            height: 50%;
            background: darkgrey;
        }

        #cat{
            width: 90%;
            height: 80%;
            border: 1px solid black;
            margin-left: 5%;
            font-size: 16px;
        }

        #viewer{
            width: 90%;
            height: 80%;
            border: 1px solid black;
            margin-left: 5%;
            background: white;
        }

    </style>

</head>

<body>

<div class="qrtr">
    <h2>Catalog</h2>
    <select id="cat" name="cat" size="50">
        <option>Hello</option>
        <option>Palm Trees</option>
        <option>Chocolate Milk</option>
        <option>Code</option>
    </select>
</div><div class="qrtr"><h2>View</h2><div id="viewer">

    </div>
</div>

</body>

</html>

When I inspect the elements, I can see no reason for that gap to be there. I've tried messing around with some of the CSS to get it into position but I can't figure out the right way to do it. More than I want to find a solution to this, I'd really like to understand why it's behaving that way when I clearly haven't written any CSS to make it do this intentionally. Anyone know what's causing this? It even does it in JSFiddle.

Upvotes: 0

Views: 58

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

The explanation is given in the last sentence of http://www.w3.org/TR/CSS21/visudet.html:

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

The select element in your first div defines its last line box. The h2 element in your second div defines its last line box. (The viewer doesn't have a line box, because it has no content.)

Therefore, the divs are aligned so that the select and the h2 are "sitting" on the same line.

Knowing this, there are a couple solutions to the problem:

  1. Add vertical-align: top; to .qrtr's style:

* {
  margin: 0;
  font-family: "Helvetica", helvetica, arial, sans-serif;
}
html,
body {
  height: 100%;
}
h2 {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5%;
}
.qrtr {
  width: 50%;
  display: inline-block;
  height: 50%;
  background: darkgrey;
  vertical-align: top;
}
#cat {
  width: 90%;
  height: 80%;
  border: 1px solid black;
  margin-left: 5%;
  font-size: 16px;
}
#viewer {
  width: 90%;
  height: 80%;
  border: 1px solid black;
  margin-left: 5%;
  background: white;
}
<div class="qrtr">
  <h2>Catalog</h2>
  <select id="cat" name="cat" size="50">
    <option>Hello</option>
    <option>Palm Trees</option>
    <option>Chocolate Milk</option>
    <option>Code</option>
  </select>
</div><div class="qrtr">
  <h2>View</h2>
  <div id="viewer">

  </div>
</div>

  1. Add overflow: hidden; (or overflow: auto;) do .qrtr's style:

* {
  margin: 0;
  font-family: "Helvetica", helvetica, arial, sans-serif;
}
html,
body {
  height: 100%;
}
h2 {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5%;
}
.qrtr {
  width: 50%;
  display: inline-block;
  height: 50%;
  background: darkgrey;
  overflow: hidden;
}
#cat {
  width: 90%;
  height: 80%;
  border: 1px solid black;
  margin-left: 5%;
  font-size: 16px;
}
#viewer {
  width: 90%;
  height: 80%;
  border: 1px solid black;
  margin-left: 5%;
  background: white;
}
<div class="qrtr">
  <h2>Catalog</h2>
  <select id="cat" name="cat" size="50">
    <option>Hello</option>
    <option>Palm Trees</option>
    <option>Chocolate Milk</option>
    <option>Code</option>
  </select>
</div><div class="qrtr">
  <h2>View</h2>
  <div id="viewer">

  </div>
</div>

Upvotes: 2

Lucky Chingi
Lucky Chingi

Reputation: 2258

        *{
            margin: 0;
            font-family: "Helvetica", helvetica, arial, sans-serif;
        }

        html, body{
            height: 100%;
        }

        h2{
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: 5%;
        }

        .qrtr{
            width: 50%;
            float:left;
            height: 50%;
            background: darkgrey;
        }

        #cat{
            width: 90%;
            height: 80%;
            border: 1px solid black;
            margin-left: 5%;
            font-size: 16px;
        }

        #viewer{
            width: 90%;
            height: 80%;
            border: 1px solid black;
            margin-left: 5%;
            background: white;
        }
<div class="qrtr">
    <h2>Catalog</h2>
    <select id="cat" name="cat" size="50">
        <option>Hello</option>
        <option>Palm Trees</option>
        <option>Chocolate Milk</option>
        <option>Code</option>
    </select>
</div><div class="qrtr"><h2>View</h2><div id="viewer">

    </div>
</div>

Change the CSS for qrts to

    .qrtr{
        width: 50%;
        float:left;
        height: 50%;
        background: darkgrey;
    }

Upvotes: 1

Related Questions