coding help

Introduction

Overflow is an Attribute that allows elements/boxes to have scrollbars, hide extra info, scroll through content/elements, and other things as well.

Different Types of Overflow

Overflow:visible

overflow:visible is the default overflow mode - if you do not specify what mode of overflow you want, it will automatically show as overflow:visible.

In this mode, any text or content that doesn't fit into the boundaries of the element will simply appear out of it, potentially overlapping with other elements.


Code: 

<div style="overflow:visible; height:100px; width:100px; background:green;">
Some long text...
</div>

Result:

Some long text here, long enough to overflow out of the container. text text text text text text text.




Overflow:auto

Overflow:auto is the type of overflow that allows you to have a scrollbar for the width and height of your choice.

Code:

<div style="height:100px;width:100px;overflow:auto;background:green">
text long enough for a scrollbar to appear...
</div>

Result:

fillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfiller

Overflow:hidden

Overflow:hidden is the type of overflow that hides any extra overflow.

Code:

<div style="height:100px;width:100px;overflow:hidden;background:green">
filler...
</div>

Result:

fillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfiller


Overflow:scroll

Overflow:scroll is an overflow that has a scrollbar, even when the text doesn't go out of the specified height/width(s). 

<div style="height:100px;width:100px;overflow:scroll;background:green">
filler...
</div>

Result:

fillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfillerfiller