Does select, input and label elements have height property?

Question

The structure of my markup looks something like this:

<div id="outerdiv">
    <div>
        Some text <select>...options...</select>
    </div>
    <div>
        <input><label><input><label>...
    </div>
    <div>
        Some text <select>...otions...</select>
    </div>
</div>

The text is bold, the select tags have their default styling, and the label tags are styled as below and all take up space on the page. (The input has display:none.) However unless the #outerdiv is explicitly given a height, it collapses; if a 1px border is applied, it makes a straight horizontal line from which the other styled elements appear to "hang."

Why is this / what is happening here?

Edit: All the inner divs are floated left, and the labels are styled as such:

.CheckLabels{
    display: inline-block;
    width: 7%;
    height: 45px;
}

No other relevant styles are applied as far as I can tell.

Your markup for inputs and labels is incorrect. I'm not sure why you've included '.CheckLabels { }` — sheriffderek, Jul 08 '17 at 04:32

score 2 · Accepted Answer · answered Jul 08 '17 at 04:31

Does select, input and label elements have height property?

To declare 'height', the element has to be either display: "block" or "inline-block" -

.thing {
  display: block; /* or */
  display: inline-block;
  height: 20px; /* 95% of the time.. you should NOT declare a height */
  /* but this will work */
}

(real question)

Why does my parent Element collapse when I float it's children?

When you 'float' elements, it takes them out of the traditional flow - and so you have to use a "clear-fix." What is a clearfix?

You can also use overflow: hidden; or a border to trick it back into order. Overflow hidden used to have some side-effects... but I don't think that's a concern these days...

.parent {
  background: lightgreen;
  overflow: hidden; /* but really - you should use a clearfix */
}

.parent div {
  width: 100%;
  float: left;
}

<section class="parent">
  <div>
    Some text
    <select>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>

  <div>
    <label for="thing-1">Input label</label>
    <input type="text" id="thing-1">
  </div>

  <div>
    Some text
    <select>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
</section>

Thanks for this useful explanation and reference! Experimenting with your code and reading this now, I see the issue. (Also - agreed on the question. I did try to change the title to something closer to what you named, but for some reason the edit was declined.) — drenl, Jul 08 '17 at 12:09

Does select, input and label elements have height property?

1 Answers1