CSS OVERFLOW-X
Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the ‘overflow-x’ property describes what to do with the content that exceeds the element’s width.
Example
blockquote {
width: 50px;
height: 50px;
overflow-x: scroll
}
some text
Possible Values
visible: Content is not clipped and may be rendered outside of the element’s box.
hidden: Content is clipped and content outside of the element’s box is not visible. The size of the clipping region is defined by the ‘clip’ property.
scroll: Content is clipped as necessary, but a horizontal scrollbar is made available where necessary to view the additional, non-visible content. If the Visual media in use is static (such as Print) the content should be treated as if the value was ‘visible’.
auto: This value is browser and media dependent, but should allow for a horizontal scrollbar if possible in case of overflow.
16 Responses
Hey i try to put the following in my css file
overflow-x: hidden;
But its showing a red underline in my VS Editor. i.e., my VS intellisense doesn’t have a property with the name ‘overflow-x’. But it shows the ‘overflow’ property.Even its showing as an error i m using overflow-x and getting correct result. Now pls dont say that dont use VS IDE.
I came to know that overflow-x is not supported in newer versions. Is it true?
To be safe, include the overflow property in addition to the overflow-x property. I found that if you have both, overflow-x will override overflow, so having both would provide support for users (or editors) who don’t have CSS3 available.
How to include the overflow property in addition to the overflow-x property? I tried to use the following code in my .CSS file, but it still show the red line under “overflow-x” and “overflow-y”.
.RadComboBoxDropDown .rcbScroll
{
overflow:auto;
overflow-y: auto !important;
overflow-x: hidden !important;
}
Is not required to use this syntax. If you want to have such a scroll, simply set the width of the container.
e.g.
HTML:
CSS:
.container_ {
width: 700px;
overflow: hidden;
background-color: red;
}
.content_ {
width: 1000px;
height: 1000px;
background-color: blue;
}
Sorry about HTML … interpreters of the code … :)
HTML:
<div class=”container_”>
<div class=”container_”></div>
</div>
Since overflow-x and overflow-y are CSS3 properties, a number of programs, such as Visual studio dont recognize them as valid properties yet
Is there any other valid way to replace overflow-x or -y ??
overflow-x:scroll is not working .If anyone have solution of this problem then plz reply…
Try this one, i have tested it on IE6 and Moz 3.5.6
.mydiv{
overflow-x:scroll;
height:200px;
width:100px;
}
How to add a flow that moves along with roller to the blogger??
How to add a flow that moves along with roller to the blogger??
overflow-x:scroll is not working .If anyone have solution of this problem then plz reply…………………..
thankyou!
Since overflow-x and overflow-y are CSS3 properties, a number of programs, such as Visual studio dont recognize them as valid properties yet…
thank you!
overflow-x:scroll is not working .If anyone have solution of this problem then plz reply…
i make css overflow-x:hidden; in body. but when i use right arrow key. page goes right… why and how to fix it help me…
i use
nav:before, nav:after {
content: “”;
position: absolute;
background:#1c1c1c; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
height:64px;
}
nav:before {
right: 100%;
}
nav:after {
left: 100%;
}
In my website template Over flow is not working??
What can i do ?