CODEWITHSUNDEEP
htmlcssscrollbar
dstewart101
dstewart101

Reputation: 1112

scrollbars appearing on my html page

hopefully this is an easy one. I've got scrollbars appearing on my web page when viewed in chrome. I think it's a padding or margin issue but I haven't been able to get it sorted. Can someone take a look please?

My css:

.sub-news {width: 750px; margin: 0 0 20px 0px; padding: 0 0 0 10px; clear: both; overflow: auto; }
.sub-news h3 {font-size: 1em; margin: 5px 0 0 0;}
.sub-news a {background-color: #f39200; padding: 5px; margin: 0 0 10px 0; color: #fff; text-decoration: none;}
.sub-news img {width: 220px; height: 127px;}
.sub-news p {width: 220px;}

.first-sub-news, .second-sub-news, .third-sub-news {width: 240px; float: left; overflow: auto;}

Fiddle.

Upvotes: 2

Views: 188

Answers (3)

Andrew
Andrew

Reputation: 1989

The CSS property overflow determines what happens to the text that doesn't fit inside the default area. Having it set to auto means that if it goes out of the boundaries, it will have a scrollbar, otherwise it will not. The other possible settings for this are:

overflow: visible;  /* Appears over the top of other elements on the page */
overflow: hidden;   /* Anything outside gets cut off */
overflow: auto;     /* Scroll bars appear if needed */
overflow: scroll    /* Scrollbar will always be present, even if there is nothing to scroll */
overflow: inherit;  /* Same as parent */

Upvotes: 3

jopfre
jopfre

Reputation: 503

remove your overflow:autos from .sub-news and .first-sub-news

http://jsfiddle.net/YeVXm/1/

Upvotes: 1

AfromanJ
AfromanJ

Reputation: 3932

Remove the overflow: auto; CSS property from the .first-sub-news class.

Also on the .sub-news class if you don't want that to scroll either.

Note: overflow: auto; will automatically add scroll bars if the content within is greater than the defined height or width.

Upvotes: 5

Related Questions