How to keep elements in place.

Question

Please have a look at this form that I am trying to design with not much luck. Let me say that I come from a tables world and am really trying to learn this css stuff. Because I have used tables for so long, I guess I'm expecting the same results. For example, if I write a row of data then start a new row, the bottom row will never move from where it is; that is that unlike css, the contents of the rows stay put.

Now, in this case, I'm expecting the same behavior but what I'm getting are these boxes that are jumping up and every which way. All I am trying to do here is to put 2 input boxes side by side and another below it. What happens is that the last row jumps up. I have to maintain a hight attribute on the box on the right in order to push the next box down.

I am including all of the css and if you view it in your browser, you will hopefully see these boxes as I intend them to be.

#passage .input-right {
  border:1px solid #888;
  height:22px; <----------------------If you change this to something lower, the bottom box jumps up.
  width:99%;
  margin:0;
  padding:0;
}

---

Here is all of the code.

<style>
#passage {
  width:90%;
  height:350px;
  border:0px solid #000;
  color:black;
  margin:auto;
}
#passage p {
  font-size:11px;
}
#passage span.left {
  float:left;
  width:49%;
  border:0px solid #000;
}
#passage span.right {
  float:right;
  width:49%;
  border:0px solid #000;
}
#passage .select-left {
  border:1px solid #888;
  height:21px;
  width:99%;
  margin:0;
  padding:0;
}
#passage .input-right {
  border:1px solid #888;
  height:22px;
  width:99%;
  margin:0;
  padding:0;
}
#passage div#submit {
  float:left;
  width:100%;
  border:0px solid #000;
  margin-top:20px;
}
</style>

<div id="passage">
  <span class="left">
    Book<br />
    <select class="select-left" name="book">
      <option value="">Select..</option>
    </select>
  </span>

  <span class="right">
    Chapter<br />
    <input type="text" class="input-right" name="chapter-verse" />
  </span>

  <span class="left">
    Translation<br />
    <select class="select-left" name="translation">
      <option value="">Select...</option>
    </select>
  </span>

  <div id="submit">
    <form method="post" action="">
      <div>
        <input type="submit" value="submit" name="search" />
      </div>
    </form>
  </div>
</div>

Answer 1

I fought with a similar problem for a long time, especially with keeping it the same across major browsers. Eventually, I switched to using YUI Grids to simplify it all. There are several other CSS grid solutions available for simplifying it as well, but I haven't personally used any of the others.

Answer 2

What you need to understand is the difference between block and inline elements and that both come from a rather text oriented philosophy. Block elements, like <div> or <p>, will push each other down, i.e. they won't appear on the same "line" next to each other but behave more like paragraphs. Inline elements, like <span> and <input>, on the other hand behave like text. They line up next to each other on the same line as long as there's space, then they wrap onto the next line by moving down, then left until they hit an obstacle and start the procedure again.

Applying a height to an inline element will have a different result than applying it to a block level element. It probably won't visibly affect the inline element immediately, but might have an effect on other nearby block level elements by pushing them away.

If you throw float into the mix though, it gets a bit tricky, since floated elements behave a bit like both block and inline elements. Block level elements will largely ignore floated elements, i.e. a floated element inside a block level element won't contribute to the total height of said block level element. OTOH, inline elements will "interact" with floated elements by floating around them (this behavior was designed for images embedded in text paragraphs). Floated elements will largely behave like inline elements amongst themselves.

-- div (block) -----------------------------------
| inline inline inline -- img (floated right) -- |
| inline inline inline |                       | |
| inline inline inline |                       | |
| inline inline inline ------------------------- |
| inline inline inline inline inline inline      |
| inline inline inline inline inline             |
--------------------------------------------------

-- div (block) -----------------------------------
| inline inline inline -- img (floated right) -- |
| inline inline inline |                       | |
-----------------------|                       |--
                       -------------------------
            (the float is not contributing to the div's height)

The easiest way to have two inputs appear next to each other with a third one below is probably like this:

-- div (block) ---------------------------
|   input (inline)      input (inline)   |
------------------------------------------
-- div (block) ---------------------------
|   input (inline)                       |
------------------------------------------

You can either code your HTML like this, or manipulate your existing HTML via CSS to behave like this (display: block/display: inline). Welcome to the world of CSS. It's not really all that hard in principle, you just need to get away from the table thinking. :)