HTML/CSS Text overflowing its container

Question

I\'ve been doing this simple page with a text field and two select fields, where I can choose a text color and a text size. I put some borders with diferent colors to each d

Answer 1

When you change a div's display property to inline, you lose the ability to control the height of that container because it is no longer a block element. Using inline-block will fix it.

div
{
  display:inline-block;
}

div.subject {
  border: thin solid #008000;

}

Cheers!

Answer 2

Add this to all elements surrounding the inputs:

display: block;
height: 100%;

I tried it out, it works great.

Answer 3

Your div has a style of "display: inline;", Change that to "display: inline-block;"

div
{
    display:inline;
}

change to:

div
{
    display:inline-block;
}

Think of it this way. Inline elements aren't meant to contain block elements. For instance, a <span> (which is an inline element) can span from the end of one line to the beginning of the other, so it has no well defined width or height:

..... ..... ..... ..... ..... ..... ..... <span>Hello
World </span> ..... ..... ..... ..... ..... ..... ...

But you don't want to make it a block (or <div>) either because it takes up the whole line:

<div>Hello ..... ..... ..... ..... ..... ..... </div>
<div>World ..... ..... ..... ..... ..... ..... </div>

So if you declare an element inline-block, you can have several blocks side-by-side

<div class="ib">Hello</div><div class="ib">World</div>