.NET MVC 3 - Unwanted Horizontal Scroll Bar
I have a page which is displaying the text of a book with pictures included in it. I have a problem where a horizontal scroll bar is displayed in certain circumstances. The CSS is as follows:
#textDisplay
{
width: 704px;
height: 750px;
margin: 0 0 20px 20px;
overflow-y: auto;
overflow-x; auto;
}
.picture
{
font: 13px Arial, sans-serif;
font-style: italic开发者_运维百科;
text-align: center;
border: 0;
}
.picture img
{
border: 1px solid #CCCCCC;
vertical-align: middle;
margin-bottom: 5px;
}
.left
{
margin: 0 20px 10px 20px;
float: left;
}
The #textDisplay is used in a div that surrounds the entire text. The definition of the picture is as follows:
<div class="picture left">
<img src="../../../../Content/Images/BookPhotos/Men Bowlers 1953.jpg" alt="Men Bowlers 1953 - drawings by Cyril Thompson" />
<br />Men Bowlers 1953 – drawings by Cyril Thompson
</div>
If I follow that with a paragraph tag p, then a horizontal scrollbar is displayed. If however I precede or follow it with a h4 tag, the scrollbar is not displayed.
Their definitions are:
p
{
font-size: 10pt;
font-family: Verdana;
margin: 15pt 20px 15pt 20px;
}
h4
{
text-align: left;
font-size: 10pt;
font-weight: bold;
font-family: Arial, Verdana, Sans-Serif;
}
Anybody any ideas why this should be so and how I can fix it?
It doesn't happen in Firefox nor Chrome!
Use this:
overflow-y: auto;
overflow-x: hidden;
Take a look at:
- https://developer.mozilla.org/en/CSS/overflow
- http://reference.sitepoint.com/css/overflow
Yes, thirtydot, that worked for me, too.
I had a wrapper div below my body tag and it had horizontal overflow that made an unwanted scroll bar.
overflow-y: auto;
overflow-x: hidden;
This did the trick. Thanks for posting.
Just write the whole html code after body tag, Example:
<body>
<div class="container-fluid">
//all the html code
</div>
</body>
Wrap everything inside div class "container-fluid", simple and easy way around!
Works all the time for me!!
加载中,请稍侯......
精彩评论