HTML - Prevent overflow?

Question

My site has a footer with content, but if you look on a bigger screen, or zoom out, it will flow out of the div.

LIVE DEMO

Code

#yht { //Footer container
width: 100%;
min-height: 20px;
max-height: 30px;
vertical-align: middle;
background: black;
text-align:center;
opacity: 0.7;
max-height: auto;
height: auto;
overflow: hidden;
}

#main:hover #yht span {
opacity: 1;
}

#yht span {
text-align:center;
position: relative;
display: block;
margin-top: auto;
margin-bottom: auto;
padding: 5px;
}

#yht2 { //Text ul
display: block;
height: auto;
max-height: auto;
margin-top: auto;
margin-bottom: auto;
}

#yht2 ul li {
font-size: 50px;
color: magenta;
overflow: hidden;
display: block;
margin-top: auto;
margin-bottom: auto;
}

As your site may change over time, could you provide a jsfiddle - this will allow others who may have the same problem as you in the future to refer to the jsfiddle which will not be changed (a lot, as a website may be). — ʰᵈˑ
– ʰᵈˑ, Commented Jan 22, 2014 at 13:17

AfromanJ · Accepted Answer · 2014-01-22 14:00:43Z

1

Remove max-height: 30px; on the ID #yht.

edited Jan 22, 2014 at 14:00

answered Jan 22, 2014 at 13:23

AfromanJ

3,9323 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML - Prevent overflow?

LIVE DEMO

Code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related