Text won't stay inside DIV

[jamie34]

Hello,

Could someone please look at this code. I want my text to stay within the footer DIV but it goes outside of it. If someone were to scale their font I would like the text to remain inside the DIV. Thank you.

CSS

.footer {
height:110px;
width:1024px;
background-color:#000000; 
margin: auto;
-webkit-box-shadow: 1px 2px 20px 0 #000000;
-moz-box-shadow: 1px 2px 20px 0 #000000;
box-shadow: 1px 2px 20px 0 #000000;
font-family: 'Jura', serif;
font-size: 20px;
color:#ffffff;
}

[WebMachine]

You have a fixed height of 110px for the footer, so the div doesn’t have the ability to expand to the larger area of text that you will get when you increase the font size. Remove the fixed height.

[PaulOB]

@WebMachine

Remove the fixed height.

Or use min-height instead of height if you want an initial height.

Generally you should avoid setting a fixed height on containers that contain elements like text as you never know how much room that text will take up and whether the user has resized their text or used their own fonts etc.

Containers (again generally) should adjust to their content and not the other way around.