Title: Need some help avoiding scrollbars.
Last modified: August 19, 2016

---

# Need some help avoiding scrollbars.

 *  [mhensler](https://wordpress.org/support/users/mhensler/)
 * (@mhensler)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/need-some-help-avoiding-scrollbars/)
 * Ok, so I’ve gotten my theme down to almost where I want it. I just have an issue
   with my content scrolling when there’s overflow in my blogcontent div. I have
   it set to 100% height, and overflow:visible, but when I do that, it’s below the
   footer if there’s an excess amount. I can avoid this by setting it to overflow:
   scroll, but I don’t really like having a scrollbar in the middle of the page.
   Can someone take a look at my code, and where I can fix this? I think I just 
   need a second set of eyes on this one:
 * [Here’s the site as it stands (the resources, and Tech 10 class page uses scroll bars right now).](http://mrhensler.com/)
 * The CSS:
 *     ```
       @charset "utf-8";
   
       /* CSS Document */
   
       html, body {height:100%;}
   
       body
   
          {
   
          margin: 0px 0px 0px;
   
          padding: 0px;
   
          text-align: center;
   
          background-color:#585858;
   
        color:#CCC;
        font-size:12px;
        font:Tahoma, Geneva, sans-serif;
          }
   
       h1, h2, h3, ul, li, p, form
   
          {
   
          margin: 0px;
   
          padding: 0px;
           font:Tahoma, Geneva, sans-serif;
   
          }
   
       hr
   
          {
   
          display: none;
   
          }
   
       a{
   
          text-decoration:none;
          font-size:12px;
          color:#F90;
   
          }
   
       a:hover{
   
          text-decoration:underline;
        font-size:12px;
          color:#F90;
          }
   
       .space
   
          {
   
          clear: both;
   
          }
   
       #page
   
          {
   
          margin: 0px auto;
   
          padding: 0;
   
          width: 842px;
   
          background-image:url(images/PNG/contentbg.png);
   
          background-repeat:repeat-y;
          height:100%;
          overflow:visible;
          font-family:Tahoma, Geneva, sans-serif;
   
          }
   
       #header
   
          {
   
          background:#CCCCCC;
   
       	height: 231px;
   
          width: 842px;
   
          text-align: center;
   
          background-image:url(images/PNG/header.png);
   
          padding-bottom:0px;
   
          }
   
       #headerimg
   
          {
   
          margin: 0px;
   
          text-align: left;
   
          }
   
       #top_nav
   
          {
   
          height: 45px;
   
          padding-left: 65px;
   
          padding-top:145px;
   
          text-align: left;
   
          }
   
        #top_nav ul
   
          {
   
          list-style: none;
          padding-right:0px;
   
          }
   
          #top_nav li
   
          {
   
          display: inline;
   
          padding:10px;
          padding-top:0px;
   
          }
   
          #top_nav li a:hover
   
          {
   
          }
   
       #top_sidebar
   
          {
   
          color: #fff;
   
          font-weight: bold;
   
          height: 10px;
   
          padding-right: 155px;
   
          text-align: right;
   
          }
   
       #content
   
          {
   
          float: none ;
   
          text-align: left;
   
          width:842px;
         height:100%;
         font:Tahoma, Geneva, sans-serif;
   
          }
   
       .blogcontent, .widecolumn
   
          {
   
          float: left;
   
          padding: 10px 0px;
   
          width: 553px;
   
          background-image:url(images/PNG/postbg.png);
   
          background-repeat:repeat-y;
          height:100%;
          overflow:scroll;
   
          }
   
       .blogcontent form
   
          {
   
          color: #fff;
   
          padding: 10px 50px 0px 0px;
   
          background-color:transparent;
   
          }
   
        .blogcontent input
   
          {
   
          background-color: transparent;
   
          border: 1px solid #F90;
   
          color: #fff;
   
          }
   
          .blogcontent #searchsubmit
   
          {
       	   background-color:transparent;
   
          color: #CCC;
   
          font-weight: bold;
   
          padding: 2px;
   
          width:auto;
   
          border: 1px solid #F90;
   
        font: Tahoma, Geneva, sans-serif;
   
        overflow:visible;
   
          }
   
          .blogcontent h2
   
          {
   
          color: #fff;
   
          font: bold 18px Tahoma, Geneva, sans-serif;
   
          padding: 0px 50px 0px 90px;
   
          }
   
          .blogcontent h3
   
          {
   
          color: #fff;
   
          font: bold 12px Tahoma, Geneva, sans-serif;
   
          padding: 0px 50px 0px 0px;
   
          width:auto;
   
          }
   
          .blogcontent small a
   
          {
   
          font-size: 12px;
   
          padding: 0px 0px 0px 0px;
          color:#F90;
   
          }
   
          .blogcontent small {
   
       	   font-size:12px;
       	   color:#FFF;
          }
   
       .post
   
          {
   
          text-align: left;
   
          padding:0px 20px 0px 35px;
   
          font:Tahoma, Geneva, sans-serif;
          font-size:12px;
   
          }
   
       .post h2 a{
       	padding:0px 0px 0px 0px;
   
          margin: 0px;
   
          font: Tahoma, Geneva, sans-serif;
   
          font-size:18px;
   
          color:#CCC;
   
          }
   
       .post h2 a:hover{
       	padding:0px 0px 0px 0px;
   
          margin: 0px;
   
          font: Tahoma, Geneva, sans-serif;
   
          font-size:18px;
   
          color:#F90;}
   
        .post h2
   
          {
   
          padding: 0px 0px 0px 0px;
   
          color:#fff;
   
          }
   
        .post .post_title
   
          {
   
          float: left;
   
          padding-left:25px;
   
          }
   
          .post_title h2, a
   
          {
   
          padding:0px 0px 0px 0px;
   
          margin: 0px;
   
          font: Tahoma, Geneva, sans-serif;
   
          font-size:18px;
   
          color:#F90;
   
          }
   
       .post_title h2 {padding:0px 0px 0px 0px;
   
          margin: 0px;
   
          font: Tahoma, Geneva, sans-serif;
   
          font-size:18px;
   
          color:#CCC;}
   
          .post_title a
   
          {
   
          text-decoration: none;
          font-size:18px;
          font: Tahoma, Geneva, sans-serif;
           padding: 0px 0px 0px 0px;
   
          }
   
          .post_title a:hover
   
          {color:#CCC;
          text-decoration: underline;
          font-size:18px;
          font: Tahoma, Geneva, sans-serif;
           padding: 0px 0px 0px 0px;
   
          }
   
          .post_title small
   
          {color: #FFFFFF;
   
          font: normal 12px Tahoma, Geneva, sans-serif;
   
          }
   
          .post_title small a
   
          {
   
           color: #FFFFFF;
   
          font: normal 12px Tahoma, Geneva, sans-serif;
   
          padding: 0px;
   
          margin: 0px;
   
          }
   
          .post .postmetadata
   
          {
   
          float: right;
   
          height: 15px;
   
          padding: 0px;
   
          }
   
          .post p {
   
       	   padding-left:25px;}
   
          .postmetadatatwo {
   
       	  float: left;
   
          height: 15px;
   
          padding: 5px 0px 5px 15px;
          font: normal 12px Tahoma, Geneva, sans-serif;
          border-bottom:1px solid #F90;}
   
          .postmetadatatwo a {
   
       	   text-decoration: none;
   
          font-size:12px;
   
          color:#F90;
          font: normal 12px Tahoma, Geneva, sans-serif;}
   
          .postmetadatatwo a:hover {
   
       	     text-decoration: underline;
   
          font-size:12px;
   
          color:#CCC;
          font: normal 12px Tahoma, Geneva, sans-serif;}
   
          .postmetadata a
   
          {
   
          text-decoration: none;
   
          font-size:12px;
   
          color:#F90;
          font: normal 12px Tahoma, Geneva, sans-serif;
   
          }
   
          .postmetadata a:hover {
       	   text-decoration: underline;
   
          font-size:12px;
   
          color:#CCC;
          font: normal 12px Tahoma, Geneva, sans-serif;
   
          }
   
          .postmetadata span
   
          {
   
          padding-left:5px;
   
          color:#F90;
   
          font: normal 12px Tahoma, Geneva, sans-serif;
   
          }
   
       .entry
   
          {color: #F90;
   
          font: normal 12px Tahoma, Geneva, sans-serif;
   
          padding-bottom:25px;
   
          padding-top:5px;
   
          padding-right:5px;
          padding-left:35px;
   
          }
   
        .entry a
   
          {
   
          padding: 0px;
   
          margin: 0px;
   
          color:#F90;
   
          font: Tahoma, Geneva, sans-serif;
   
          font-size:12px;
   
          }
   
          .entry a:hover
   
          {
   
       	   color:#CCC;
       	   font-size:12px;
       	   text-decoration:underline;
   
          }
   
          .entry blockquote
   
          {
   
          border: 2px dashed #F90;
   
          }
   
          .entry img
   
          {
   
          float: left;
   
          padding: 0px 20px 0px 0px;
   
          }
   
          .entry ul
   
          {padding-left:20px;
   
          }
   
          .entry li
   
          {
   
          }
   
          .entry ol li
   
          {
   
          list-style: decimal;
   
          } 
   
          .entry p
   
          {
   
          text-align: left;
   
          padding: 0px;
          padding-right:5px;
          font:Tahoma, Geneva, sans-serif;
   
          font-size:12px;
   
          color:#FFF;
   
          }
   
          .entry span
   
          {color:#F90;
          font-size:12px;
   
          }
   
       #sidebar
   
          {
   
          float: left;
   
          padding: 0px 0px 0px 0px;
   
          text-align: left;
   
          width: 289px;
   
          background-image:url(images/PNG/sidebarbg.png);
   
          background-repeat:repeat-y;
   
          color:#CCC;
   
          font:Tahoma, Geneva, sans-serif;
   
          font-size:12px;
   
          }
   
          #sidebar a {
   
       	   color:#F90;
       	   font-size:12px;
       	   font:Tahoma, Geneva, sans-serif;
   
          }
   
          #sidebar a:hover{
   
       	   color:#F90;
       	   font-size:12px;
       	   font:Tahoma, Geneva, sans-serif;
       	   text-decoration:underline;
   
          }
   
        .belowsidebar
   
        {width:289px;
   
        background-image:url(images/PNG/belowsidebarbg.png);
        background-repeat:repeat-y;
        float: left;
   
          padding: 0px 0px 0px 0px ;
          height:100%;
   
        }
   
          .sidebartop
   
          {
   
          float: left;
   
          padding: 0px 0px 0px 0px ;
   
          text-align: left;
   
          width: 289px;
          height:44px;
   
          background-image:url(images/PNG/sidebartoporange.png);
   
          }
   
        #sidebar ul
   
          {
   
          list-style: none;
   
          margin: 0px 0px 0px 0px; padding:0px 0px 0px 5px;
   
         font:Tahoma, Geneva, sans-serif;
   
          }
   
          #sidebar li
   
          {
   
          margin: 0px 10px 0px 45px;
   
          padding-right:10px;
           font:Tahoma, Geneva, sans-serif;
   
          }
   
          #sidebar li h2
   
          {
   
          margin: 0px;
   
          font-size:14px;
          font-family:Tahoma, Geneva, sans-serif;
   
          color:#FFF;
          padding-right:0px;
   
          }
   
        #sidebar li h3
   
          {
   
          margin: 0px;
   
          font-size:14px;
   
          font: Tahoma, Geneva, sans-serif;
   
          padding:0px;
   
          }
   
        #sidebar ul ul
   
          {
   
          list-style: none;
   
          margin: 0px;
   
          font-size:11px;
   
          font: normal Tahoma, Geneva, sans-serif;
   
          padding-bottom:5px;
          padding-top:5px;
   
          }
   
          #sidebar ul ul li
   
          {
   
          margin: 0px;
   
          font: normal 12px Tahoma, Geneva, sans-serif;
   
         padding:0px 0px 0px 15px;
   
            padding-bottom:2px;
          padding-top:2px;
   
          }
   
          #sidebar ul ul li a
   
          {font: normal 12px Tahoma, Geneva, sans-serif;
   
          text-decoration:none;
   
             padding-bottom:2px;
          padding-top:2px;
   
          }
   
          #sidebar ul ul li a:hover
   
          {text-decoration:underline;
   
          color:#CCC;
   
          }
   
       .bottom_sidebar
   
          {
   
          float: right;
   
          height: 40px;
   
          width: 289px;
   
          background-image:url(images/PNG/sidebarbottomtwo.png);
   
          font:Tahoma, Geneva, sans-serif;
   
          font-size:12px;
   
          padding:0px 0px 0px 0px;}
   
       #search
   
          { padding:0px 0px 0px 350px;
   
         }
   
        #search input
   
          {background-color:#F90;
   
          color:#000;
   
          font:Arial, Helvetica, sans-serif;
   
        }
   
       #search #searchsubmit
   
          {
   
          background:#3c3c3c;
          border:1px solid #FF9900;
          font:Tahoma, Geneva, sans-serif;
          font-weight:500;
          color:#FFFFFF
   
       }
   
       .footer 
   
          {
   
          height: 50px;
   
          text-align: center;
   
          width: 842px;/*909*/
   
          background-image:url(images/PNG/bottomglowbar.png);
   
          position:relative;
          bottom:0px;
          padding-bottom:0px;
          font:Tahoma, Geneva, sans-serif;
   
          }
   
       .footer a {color:#F90;
       font-size:12px;
       font:Tahoma, Geneva, sans-serif;
       }
   
       .footer a:hover {color:#CCC;
       font-size:12px;
       text-decoration:underline;
       font:Tahoma, Geneva, sans-serif;}
   
        .footer .column1
   
          {
   
          background:#FF3333;
   
          float: left;
   
       	width: 300px;
       	text-align:center;
   
          }
   
          .column1 .bottom
   
          {
   
       }
   
          .column1 a
   
          {
   
          text-decoration: none;
   
          }
   
          .footer .column2
   
          {
   
          background-color:#006699;
   
        float: left;
          width: 250px;
   
          }
   
          .column2 h2
   
          {
   
          }
   
          .column2 ul
   
          {
   
          list-style: none;
   
          }
   
          .column2 a
   
          {
   
          text-decoration: none;
   
          }
   
       .clear {
   
         clear: both;
   
       }
   
       .footertext {color:#FF9900;
       font:Tahoma, Geneva, sans-serif;
       font-weight:600;
       font-size:12px;
   
       text-align:center;
   
       }
   
       .footertext a{
   
       	color:#CCC;
       	text-decoration:none;
       	font-size:12px;
       	font:Tahoma, Geneva, sans-serif;
       }
   
       .footertext a:hover{
   
       	color:#CCC;
       	text-decoration:underline;
       	font-size:12px;
       	font:Tahoma, Geneva, sans-serif;
       }
   
       .commentform{
       	background-color:transparent;
       	font:Tahoma, Geneva, sans-serif;
       	font-size:12px;
       	color:#fff;
       	border:1px solid #F90;
       	width:200px;
       	}
   
       .commentbox {
   
       	background-color:transparent;
       	font: Tahoma, Geneva, sans-serif;
       	font-size:12px;
       	color:#fff;
       	border:1px solid #F90;
       	width:400px;
       	height:100px;}
   
       #respond {
   
       	width:553px;
       	font-size:12px;
       	padding:0px 0px 0px 0px;
       }
   
       .submitbutton {
   
       	width:auto;
       	height:auto;
       }
   
       .entrytwo
   
          {color: #c3c3c3;
   
          font: normal 12px Tahoma, Geneva, sans-serif;
          padding: 0px 10px 40px 25px;
   
          }
   
        .entrytwo a
   
          {
   
          padding: 0px;
   
          margin: 0px;
   
          color:#F90;
   
          font: normal 12px Tahoma, Geneva, sans-serif;
   
          }
   
          .entrytwo a:hover
   
          {
   
       	   color:#CCC;
   
          }
   
          .entrytwo blockquote
   
          {
   
          border: 2px dashed #F90;
   
          }
   
          .entrytwo img
   
          {
   
          float: left;
   
          padding: 0px 20px 0px 0px;
   
          }
   
          .entrytwo ul
   
          {padding-left:20px;
   
          }
   
          .entrytwo li
   
          {
   
          }
   
          .entrytwo ol li
   
          {
   
          list-style: decimal;
   
          } 
   
          .entrytwo p
   
          {
   
          text-align: left;
   
          padding: 15px;
   
          font: Tahoma, Geneva, sans-serif;
   
          font-size:12px;
   
          color:#FFF;
   
          line-height:1.3em;
   
          }
   
          .entrytwo span
   
          {color:#F60;
          font: normal 12px Tahoma, Geneva, sans-serif;
   
          }
   
       .postmetadata alt {
   
       	color: #F90;
   
          font: normal 12px Tahoma, Geneva, sans-serif;
   
          padding-bottom:25px;
   
          }
   
         .postmetadata alt a {
   
       	color: #F90;
   
          font: normal 12px Tahoma, Geneva, sans-serif;
   
          padding-bottom:25px;
   
          } 
   
       .sidebartitles{
       	background-color:#0F0;
       	width:213px;
       }
   
       hr {color:#F90;
       line-height:5px;
       width:220px;}
   
       .navigation {
   
       	padding:0px 0px 0px 0px;
       	font:Tahoma, Geneva, sans-serif;
       	font-size:12px;
       	margin-left:40px;}
   
       .navigation a {
   
       	padding:0px 0px 0px 0px;
       	font:Tahoma, Geneva, sans-serif;
       	font-size:12px;
       	text-decoration:none;
       	margin-left:40px;}
   
       .navigation a:hover {
       padding:0px 0px 0px 0px;
       	font:Tahoma, Geneva, sans-serif;
       	font-size:12px;
       	text-decoration:underline;}	
   
       .postbg {
   
       	width:553px;
       	height:37px;
       	background-image:url(images/PNG/postitlebg.png);
       }
   
       .contentheading {
   
       	font:Tahoma, Geneva, sans-serif;
       	color:#F90;
       	font-size:16px;}
   
       .imgfloat {
   
       	float:right;
       	padding:2px;
       }
   
       .imgfloat img {
   
       	float:right;
       	padding:2px;}
   
       .edit {
   
       	font:Tahoma, Geneva, sans-serif;
       	font-size:16px;
       	color:#F90;
       	padding-top:20px;
       }
   
       .edit a{
   
       	font:Tahoma, Geneva, sans-serif;
       	font-size:16px;
       	color:#F90;
       	padding-top:20px;
       }
   
       .edit a:hover {
   
       	font:Tahoma, Geneva, sans-serif;
       	font-size:16px;
       	color:#F90;
       	padding-top:20px;
       	text-decoration:underline;
       	margin-top:20px;
       }
       ```
   
 * Index.php:
 *     ```
       <?php
       /**
        * @package WordPress
        * @subpackage Default_Theme
        */
   
       get_header(); ?>
   
       	<div id="content">
   
           <div class="blogcontent">
   
          <div class="post">
   
       	<?php if (have_posts()) : ?>
   
       		<?php while (have_posts()) : the_post(); ?>
   
       			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
       				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                       <hr />
       				<p class="postmetadatatwo"><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --><?php the_tags('Tags: ', ', ', '<br />'); ?>  <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p></div>
   
       				<br /><div class="entrytwo"><hr />
       					<?php the_content('Read the rest of this entry &raquo;'); ?>
       				</div>
   
       		<?php endwhile; ?>
   
       		<div class="navigation">
       			<div><?php next_posts_link('&laquo; Older Entries') ?></div>
       			<div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
       		</div>
   
       	<?php else : ?>
   
       		<h2 class="center">Not Found</h2>
       		<p class="center">Sorry, but you are looking for something that isn't here.</p>
       		<?php get_search_form(); ?>
   
       	<?php endif; ?>
                </div><!---End of Post--><br /><br />
       </div><!---End of BlogContent-->
       <?php get_sidebar(); ?>
       </div><!--End of Content-->
       <?php get_footer(); ?>
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/need-some-help-avoiding-scrollbars/#post-1223589)
 * You could try removing `position:relative` from the .footer and replacing it 
   with `clear:left;`
 *  Thread Starter [mhensler](https://wordpress.org/support/users/mhensler/)
 * (@mhensler)
 * [16 years, 7 months ago](https://wordpress.org/support/topic/need-some-help-avoiding-scrollbars/#post-1223709)
 * Thanks for the suggestion. Tried it, but still doesn’t work. The content on my
   Tech 10 page overflows and goes under the footer.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Need some help avoiding scrollbars.’ is closed to new replies.

 * 2 replies
 * 2 participants
 * Last reply from: [mhensler](https://wordpress.org/support/users/mhensler/)
 * Last activity: [16 years, 7 months ago](https://wordpress.org/support/topic/need-some-help-avoiding-scrollbars/#post-1223709)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics