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 div to see where are they placed. The issue I'm having is when I select a bigger size for the text and it overflows the container, but I want the container to grow as the text grows, more clearly, I want the text to be inside the border no matter its size, so the border will get bigger if the text gets bigger. I'll put my fiddle link and the css:

http://jsfiddle.net/jdelva/CCLJ4/2/

css:

div {
   display:inline;
}

div.main {
    border-style:solid;
    border-width:thin;
    border-color:blue;
    margin-left:60px;
}

div.subject {
    width:3cm;
    border-style:solid;
    border-width:thin;
    border-color:green;
}

#control {
    border-style:solid;
    border-width:thin;
    border-color:red;
    margin-right:60px;
}

I tried with the overflow property but it seems to work with the content and not with the container. Thanks for your time!

Answer 1

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>

Answer 2

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 3

Add this to all elements surrounding the inputs:

display: block;
height: 100%;

I tried it out, it works great.