scrollbars appearing on my html page

Question

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.

Answer 1

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.

Answer 2

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 */