CSS overflow property

this property specifies the behavior that occurs when an element's content overflow the element's box.

the below image show how useable overflow property.

css overflow property

if the overflow property is applied to the body and html elements in an html document,the 'user agent' may apply it(overflow) to the viewport.this does not apply to xhtml,though.

note:- css3 defines the overflow-x and overflow-y properties which allow for independent

control of the vertical and horizontal scrollbars.

         
   <html>
   
      <head>
      
         <style  type="text/css" >
         
         p.overflow_auto { width:200px ;
         
               height:40px ;
               
               border:1px solid red ;
               
               overflow:auto ;
               
               overflow-x:hidden ;  }
               
         p.overflow_scroll { width:200px ;
         
               height:40px ;
               
               border:1px solid red ;
               
               overflow:scroll ;  }
         
    </style> </head>
    
         <body>
         
             <div>
             
 <p class="overflow_auto"> <img  src="overflow.png"  height="100px;"/> </p>
              
 <p class="overflow_scroll"> <img  src="overflow.jpg"  
        width="400px;"  height="100px;"/> </p> </div> </body></html>

note :-if you want to center-align the container or do not want to specify an exact width.

in this case,use overflow:hidden on your parent container to completely wrap any floated child elements within it.

look likes it.

css overflow property


CSS overflow-x property

the css overflow-x property is a specific case of the generic overflow property.it controls how extra text exceeding the x axys(horizontal axis) of the bounding box of an element is rendered.

the overflow-x property syntax :-

				overflow-x:  visible  |  hidden  |  scroll  |  auto  |  no-display  ;
overflow-x
initial valuevisible
applies toall elements.
inheritedno
mediavisual
version:css3

browser support

the css overflow-x property is supported in all major browsers.

note:the overflow-x property does not work properly in ie8 earlier.


css overflow-x example

<style   class="text/css"
         
   div {	  overflow-x:scroll;
   
             	  border:5px outset  yellow;
             	  
             	  background-color:pink;
             	  
             	  width:200px;
             	  
             	  height:150px;
      }
           </style>

css  overflow-y  property.

the css3 overflow-y property is a specific case of the generic overflow property.it controls how extra text exceeding the y axys(vertical axis) of the bounding box of an element is rendered.

the overflow-y property syntax:-

         overflow-y:  visible  |  hidden  |  scroll  |  auto  |  no-display  ;
overflow-y
initial valuevisible
applies toall elements.
inheritedno
mediavisual
version:css3

browser support - css overflow-y

the css overflow-y property is supported in all major browsers.

note:the overflow-y property does not work properly in ie8 earlier.


css overflow-y property example

<style   class="text/css"
         
     div {
           overflow-y:scroll;
           
           border:5px outset  yellow;
           
           background-color:pink;
            
           width:200px;
            
           height:150px;
     }
          </style>

css overflow property.

the css overflow property is used to set the behaviour when an element's content overflows the element's box.

note:- you can also use the css overflow-x and overflow-y properties to specify only horizontal scrolling or vertical scrolling.

the overflow property syntax :-

				overflow:  visible  |  hidden  |  scroll  |  auto  |  inherit  ;
overflow
initial valuevisible
applies toall elements.
inheritedno
mediavisual
version:css2

browser support css overflow

the css overflow property is supported in all major browsers.

note:ie8 supports the overflow property only if a !doctype is specified.ie9 supports 'inherit' .

css overflow shorthand property example

<style   class="text/css"
         
    div {    overflow:scroll;
    
                  border:5px outset  yellow;
                  
                  background-color:pink;
                  
                  width:200px;
                  
                  height:150px;
              
              } </style>

css overflow property values

valuedescription
visiblethis is by default.content is not clipped and scroll bars are not added.
hiddencontent that exceeds the dimensions of the object is not shown.
autocontent is clipped and scrolling is added only when necessary.
scrollcontent is clipped and scroll bars are added, even if the content does not

exceed the dimensions of the object.
inheritinherit from the parent element.