Overflow CSS – About and How to use it in various conditions

Overflow CSS – About and How to use it in various conditions

2 29645

Overflow CSS – About and How to use it in various conditions

Today I will tell you about CSS again. This is will property called ‘overflow’. This property already in CSS since second version (CSS2). All popular browsers like Firefox, IE, Safari, Opera etc supporting this property. I will tell about IE browsers in details a little after.

Overflow property determines the behavior of a block-type element in situations, where its contents exceeds its size. Overflow property can have five values. Each value defines two aspects of the generated element: whether to display the contents outside of the block itself and are we will have scrolling mechanism. If the value of the overflow property is auto, the browser displays the contents of the element according to its settings, plus – it should allow the user to scroll if the content does not fit in the container.


‘overflow’ property has the following possible values:

  • auto – algorithm provided by browser by default, scrollbars adding only when necessary. Overflow clipped.
  • hidden – showing only the area inside the element, the rest will be hidden. Overflow clipped.
  • inherit – element will take value from its parent. Note, this value not supported with IE8 and below.
  • scroll – element content is displayed only within its boundaries, scrollbars adding always. Overflow clipped.
  • visible – displays the entire contents of the element, even outside the established height and width. This is default value.

Here are few samples of using overflow with css

Sample 1 – we will use overflow = auto. Sample code you will see below too

A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.
#sample1{width:150px;height:150px;border:1px dashed #888;overflow:auto}
<div id='sample1'>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>

Sample 2 – lets change overflow to hidden

A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.

Interesting, isn`t it? As we can see – all rest content just clipped and invisible. And we don`t see scrollers.

Sample 3 – scroll value

A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.
#sample3{width:150px;height:150px;border:1px dashed #888;overflow:scroll}
<div id='sample3'>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>

Sample 4 – visible value

A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.
#sample4{width:150px;height:150px;border:1px dashed #888;overflow:visible}
<div id='sample4'>A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>

Also I collected for several stranges of IE8 browser related tith overflow property:

  • The combination overflow scroll with a value of the properties of max-height, and float can lead to failure of elements of a Web page, the browser displays a blank screen.
  • For the block, which indicated the property float and overflow with the value of scroll, ignoring the width defined by the property max-width.
  • The height of the block with a horizontal scroll bar grows to a height skrolbara, although given the size of the CSS specification should also include a scroll bar.

Conclusion

I hope that our new article was very useful for your projects. Good luck!

SIMILAR ARTICLES


2 COMMENTS

    • For all samples all
      #sample1{width:150px;height:150px;border:1px dashed #888;overflow:auto}
      code – is CSS styles :)

Leave a Reply to Thomas Cancel reply