CODEWITHSUNDEEP
htmlcss
José Del Valle
José Del Valle

Reputation: 691

HTML/CSS Text overflowing its container

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!

Upvotes: 2

Views: 7654

Answers (3)

Ood
Ood

Reputation: 1795

Add this to all elements surrounding the inputs:

display: block;
height: 100%;

I tried it out, it works great.

Upvotes: 0

wizulus
wizulus

Reputation: 6333

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>

Upvotes: 4

gerald
gerald

Reputation: 223

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!

Upvotes: 2

Related Questions