Title: SMALL SIDEBAR / CSS ISSUE
Last modified: August 19, 2016

---

# SMALL SIDEBAR / CSS ISSUE

 *  Resolved [dice_spadez](https://wordpress.org/support/users/dice_spadez/)
 * (@dice_spadez)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/small-sidebar-css-issue/)
 * Hi,
 * I’m using the monochrome theme and I would like to add the navigation to the 
   leftside. I would like the navigation bar to always be above any post details(
   date, comments etc)
 * When I edit the sidebar.php and insert an area for the left_col I have this large
   gap from the top of the leftside column
 * I have tried editing some CSS elements but I can’t figure out how to a) get rid
   of the large margin or padding gap from the top leftside column or b) how to 
   make sure it stays above the post details
 * If you could help me that would be great, thanks!
 * domain
 * ( [http://www.relayenterprises.com](http://www.relayenterprises.com) )
 * Sidebar coding…. (left_col @ bottom)
 * <div id=”right_col”>
 *  <div id=”logo”>
    /”><?php bloginfo(‘name’); ?>
   
    <h1><?php bloginfo(‘description’);?
   ></h1> </div>
 *  <?php $options = get_option(‘mc_options’); ?>
 *  <?php if($options[‘search_position’] == ‘top’) { ?>
    <div class=”side_box” id
   =”search_area_top”> <div id=”search_area” class=”clearfix”> <form method=”get”
   id=”searchform” action=”<?php bloginfo(‘home’); ?>/”> <div><input type=”text”
   value=”<?php _e(‘Search’,’monochrome’); ?>” name=”s” id=”search_input” onfocus
   =”this.value=”; changefc(‘white’);” /></div> <div><input type=”image” src=”<?
   php bloginfo(‘template_url’); ?>/img/search_button_n.gif” alt=”<?php _e(‘Search
   from this blog.’,’monochrome’); ?>” title=”<?php _e(‘Search from this blog.’,’
   monochrome’); ?>” id=”search_button” /></div> </form> </div>
 * <div class=”side_box first_side_box” id=”info_background”>
    <div class=”clearfix”
   > <div id=”information_contents”> <h3>NAVIGATION</h3>
    -  <?php wp_list_cats(‘include=1’); ?>
       <?php wp_list_pages(‘exclude=775,777,772,766,768,770&
      title_li=&sort_column=menu_order’); ?>
 *  </div>
    </div> </div>
 *  <?php if ($options[‘tag_list’]) : ?>
    <div id=”tag_list” class=”clearfix”> [<?php _e(‘TAG LIST’,’monochrome’); ?>](https://wordpress.org/support/topic/small-sidebar-css-issue/void(0);?output_format=md)
   <?php wp_tag_cloud(‘smallest=11&largest=11&number=30&orderby=count&unit=px&format
   =list’); ?> </div> <?php endif; ?> </div> <?php } ?>
 *  <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
 * <?php endif; ?>
 *  <?php if($options[‘search_position’] == ‘bottom’) { ?>
    <div class=”side_box”
   id=”search_area_bottom”> <h3><?php _e(‘SEARCH’,’monochrome’); ?></h3> <div id
   =”search_area” class=”clearfix”> <form method=”get” id=”searchform” action=”<?
   php bloginfo(‘home’); ?>/”> <div><input type=”text” value=”<?php _e(‘Search’,’
   monochrome’); ?>” name=”s” id=”search_input” onfocus=”this.value=”; changefc(‘
   white’);” /></div> <div><input type=”image” src=”<?php bloginfo(‘template_url’);?
   >/img/search_button_n.gif” alt=”<?php _e(‘Search from this blog.’,’monochrome’);?
   >” title=”<?php _e(‘Search from this blog.’,’monochrome’); ?>” id=”search_button”/
   ></div> </form> </div> <?php if ($options[‘tag_list’]) : ?> <div id=”tag_list”
   class=”clearfix”> [<?php _e(‘TAG LIST’,’monochrome’); ?>](https://wordpress.org/support/topic/small-sidebar-css-issue/void(0);?output_format=md)
   <?php wp_tag_cloud(‘smallest=11&largest=11&number=30&orderby=count&unit=px&format
   =list’); ?> </div> <?php endif; ?> </div> <?php } ?>
 * <div class=”side_box first_side_box” id=”information”>
    <div class=”clearfix”
   > <h3>SIDE BOXES</h3> <div id=”information_contents”>We can use this area for
   different types of content</div> </div> </div>
 * </div><!– #right_col end –>
 * <div id=”left_col”>
 * <div class=”side_box first_side_box”>
 *  <h3>NAVIGATION</h3>
    -  <?php wp_list_cats(‘include=1’); ?>
       <?php wp_list_pages(‘exclude=775,777,772,766,768,770&
      title_li=&sort_column=menu_order’); ?>
 *  </div>
    </div>
 *  </div>

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

 *  Thread Starter [dice_spadez](https://wordpress.org/support/users/dice_spadez/)
 * (@dice_spadez)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/small-sidebar-css-issue/#post-1274057)
 * I figured it maybe helpful to add in the CSS info also.
 * /*
    Theme Name:monochrome Theme URI: Description:This theme supports widget, 
   threaded-comments, theme-options,and translation is ready. Also including page-
   navigation and multi level dropdown menu.You can see live demo including more
   information here [http://www.mono-lab.net/demo1/](http://www.mono-lab.net/demo1/)
   Author:mono-lab Author URI:[http://www.mono-lab.net](http://www.mono-lab.net)
   Version:2.2 Tags: black, white, three-columns, fixed-width, theme-options, threaded-
   comments, translation-ready */
 * /* —– basic ——————————————————————————————————————————— */
    body { margin:0; 
   padding:0; background:#fff; font-family: Arial, Helvetica, sans-serif; font-size:
   12px; color:#666; } a img { border:none; } a, a:visited { color:#7f8e91; text-
   decoration:none; outline:none; } a:hover { color:#009900; text-decoration:underline;}
   p { margin:0 0 1em 0; padding:0; line-height:200%; } ul { list-style-type:none;
   margin:0 0 1em 0; padding:0; line-height:0%; } ul li { margin:0px; padding:0;
   line-height:normal; zoom:1; } ol { margin:0 0 1em 23px; padding:0; } * html ol{
   margin:0 0 1em 23px; padding:0; } ol li { padding:0 0 5px 0; } form,table,input,
   textarea,dl,dt,dd { margin:0; padding:0; } table { border-collapse:collapse; 
   width:100%; border:0; } blockquote { margin:0 0 1em 0; padding:35px 20px 0 20px;
   border:1px solid #ccc; background:#fafafa url(img/quote1.gif) no-repeat 10px 
   10px; } blockquote p { margin:0 0 5px 0; } .quote_bottom { height:30px; background:#
   fafafa url(img/quote2.gif) no-repeat right ; margin-right:-10px; } pre { border:
   1px solid #ccc; background:#fafafa; padding:10px 20px; margin:0 0 1em 0; overflow:
   auto; } object { display:block; margin:0 auto; } .wp-caption-text { text-align:
   center; } .alignright { float:right; } .alignleft { float:left; } .aligncenter{
   display:block; margin-left:auto; margin-right:auto; } .centered { display: block;
   margin-left:auto; margin-right:auto; } .clear { clear:both; }
 * /* —– layout ——————————————————————————————————————————– */
    #wrapper { width:
   930px; margin:0 auto; } #header { background:url(img/header.gif) no-repeat bottom;}#
   contents { background:url(img/side.gif) repeat-y; } #left_col { float:left; display:
   inline; width:690px; margin:0 0 0 2px; } #right_col { float:right; display:inline;
   width:236px; margin:10px 2px 30px 0; } #footer { background:url(img/footer.gif)
   no-repeat top; height:90px; }
 * /* —– header ——————————————————————————————————————————– */
    #header_top { height:
   135px; width: 930px; } #logo { float:left; display:inline; margin:0px 0px 20px
   13px; } #logoimg { background:url(img/hornets_logo.jpg) no-repeat scroll 0% 0%;
   margin-top: 10px; width:930px; height:126px }
 * /*blogtitle*/
    #logo a, #logo a:visited { color:#000; font-size:27px; } #logo
   a:hover { text-decoration:none; color:#006600; }
 * /*description*/
    #logo h1 { font-weight:normal; line-height:100%; margin:0; padding:
   0; color:#f3dc19; font-size:14px; }
 * /*header menu is at the bottom of this page*/
 * /* —– left_col —————————————————————————————————————————— */
    .post { background:
   url(img/post_line.gif) no-repeat left bottom; } #single_post { background:none;}.
   post_even { background:url(img/meta_stripe.gif) repeat-y left; } .post_content_wrapper{
   float:right; width:510px; padding:50px 15px; } .post_meta { float:left; display:
   inline; width:120px; padding:0 15px 35px; margin:35px 0 0 0; } .content_noside{
   float:right; width:510px; padding:15px; }
 * #leftside { float:left; display:inline; width:236px; margin:10px 2px 30px 0; }
   .
   left_meta { float:left; display:inline; width:120px; padding:0 15px 10px; margin:
   10px 0 0 0; }
 * /* post contents */
    .post h2, #single_post h2, .page h2 { font-size:16px; margin:
   0 0 11px 0; font-weight:normal; line-height:0; background:url(img/stripe1.gif)
   repeat-x bottom; padding:0; } .post h2 a, .post h2 a:visited, #single_post h2
   span, .page h2 span { color:#666; line-height:120%; display:inline-block; padding:
   0 0 13px 0; } .post h2 a:hover { text-decoration:none; color:#2089cc; }
 * .post_content {line-height:160%; }
    .post_content p { margin:0 0 1em 0; }
 * .post_content a,.post_content a:visited { color:#009900; text-decoration:underline;}
   .
   post_content a:hover { color:#009900; } .post_content a.more-link, .post_content
   a.more-link:visited { display:block; clear:both; color:#666; margin:15px 0 0 
   0; height:20px; padding:0 0 4px 45px; background:url(img/read_more.gif) no-repeat
   left top; text-decoration:none; } .post_content a.more-link:hover { color:#2089cc;
   background:url(img/read_more.gif) no-repeat left bottom; text-decoration:none;}
 * .post img, .post a img { border:1px solid #ccc; padding:5px; margin:0 10px 0 
   0; background:#f2f2f2; }
    .post a:hover img { border:1px solid #fff; background:#
   fff; } .post img.centered { display:block; margin:0 auto; } .post img.alignright{
   margin:4px 0 15px 15px; display:inline; } .post img.alignleft { margin:4px 15px
   15px 0; display:inline; } .post img.wp-smiley { border:0px; padding:0px; margin:
   0px; }
 * .post table { margin:0 0 1em 0; }
    .post td, .post th { border:1px solid #ccc;
   padding:15px; } .post th { background:#eee; font-weight:normal; }
 * .post_content ul li { margin:0 0 1em 0; line-height:160%; background:url(img/
   bullet1.gif) no-repeat 3px 7px; padding:0 0 0 18px; }
    .post_content ol li { 
   margin:0 0 1em 0; } .post_content input { margin:5px 0; }
 * /* post meta */
    .post_meta { font-size:11px; text-align:right; line-height:160%;
   margin:34px 0 0 0; } .post_meta dt { color:#999; margin:20px 0 0 0; padding-top:
   20px; background:url(img/dot1.gif) repeat-x top; } .post_meta dt.meta_date { 
   padding:16px 0 5px 0; margin:0; background:none; } .post_meta a, .post_meta a:
   visited { color:#666; } .post_meta a:hover { color:#009900; } .post_date { font-
   size:32px; padding:5px 0 0 0; } .post_date span { color:#666; }
 * /* odd post color */
    .meta_comment a, .meta_comment a:visited, .post_date, .
   post_meta dt.meta_comment { color:#33a8e5; }
 * /* even post color */
    .post_even .meta_comment a, .post_even .meta_comment a:
   visited, .post_even .post_date, .post_even .post_meta dt.meta_comment, .post_even.
   post_meta a:hover { color:#75e730; }
 * /* —– right_col —————————————————————————————————————————– */
    .side_box { color:#
   FFFF00; margin:0 15px 25px; font-size:13.5px; background:url(img/dot1.gif) repeat-
   x top; clear:both; padding:30px 0 0; } .first_side_box { background:none; padding:
   0; }
 * #right_col h3 { font-size:15px; color:#f3dc19; font-weight:normal; text-transform:
   uppercase; line-height:100%; margin:0 0 1em 0; padding:0; }
    #right_col a, #right_col
   a:visited { color:#009900; } #right_col a:hover { color:#f3dc19; }
 * .side_box ul { margin:0; }
    .side_box li { margin:0 0 1em 0; line-height:140%;}.
   side_box li li { padding:0 0 0 1em; margin:3px 0; }
 * #information_area { padding:0 0 0 0; margin:0 0 20px 0; }
    #information { color:#
   7d7d7d; background:url(img/stripe4.gif) left top; padding:10px; border:1px solid#
   454545; margin:0 15px; line-height:160%; } #entries_rss { font-size:11px; background:
   url(img/entries_rss.gif) no-repeat left top; padding:2px 0 0 18px; margin:8px
   15px 0 0; float:right; display:inline; } #entries_rss a:hover { text-decoration:
   none; } #info_background { color:#7d7d7d; left top; padding:10px; border:3px 
   solid #454545; margin:0 15px; line-height:160%; }
 * /* search area */
    #search_area { width:206px; height:27px; background:url(img/
   search.gif) no-repeat left top; margin:0 0 17px 0; } #search_input { float:left;
   margin:7px 0 0 10px; border:0px; height:15px; display:inline; width:150px; font-
   size:12px; color:#f3dc19; background:transparent; } #search_button { float:right;}#
   tag_list { margin:0 0 -25px 0; } .search_tag { float:right; display:block; margin:
   0 0 5px 0; padding:2px 0 2px 24px; font-size:11px; background:url(img/tag1.gif)
   no-repeat left top; } .search_tag:hover { text-decoration:none; } .active_search_tag{
   background:url(img/tag2.gif) no-repeat left top; } #tag_list .wp-tag-cloud { 
   clear:both; margin:0 0 10px 0; border:1px solid #f3dc19; background:#333; padding:
   6px; display:none; } #tag_list .wp-tag-cloud li { display:inline; margin:0 5px
   0 0; line-height:170%; }
 * #search_area_top { background:none; padding:0; margin:0 15px 25px; }
 * /* NAV area */
    #nav_area { width:206px; height:27px; background:url(img/navbox.
   gif) no-repeat left top; margin:0 0 7px 0; } #nav_titles { float:left; margin:
   7px 0 0 10px; border:0px; height:15px; display:inline; width:150px; font-size:
   12px; color:#009900; background:transparent; }
 * /* calendar */
    #wp-calendar { margin:0 auto; width:100%; color:#777; } #wp-calendar
   th, #wp-calendar td { border:1px solid #444; padding:0; width:14%; line-height:
   220%; text-align:center; } #wp-calendar th { line-height:100%; padding:4px 0 
   2px 0; font-weight:normal; } #wp-calendar td a, #wp-calendar td a:visited { display:
   block; text-decoration:none; color:#f3dc19; background:#111; } #wp-calendar td
   a:hover { text-decoration:none; background:#444; } #wp-calendar caption { padding:
   8px 0; } #wp-calendar th { background:#111; } #wp-calendar tfoot td { border:
   none; padding:5px 0; } #wp-calendar #prev a, #wp-calendar #prev a:visited, #wp-
   calendar #next a, #wp-calendar #next a:visited { text-decoration:none; background:
   none; } #wp-calendar #prev a:hover, #wp-calendar #next a:hover { text-decoration:
   underline; } #wp-calendar td#today { background:#111; color:#f3dc19; text-decoration:
   underline; }
 * /* recent post date (for non widget user) */
    .side_box li.side_date { margin:
   0; padding:0; }
 * /* —– footer ——————————————————————————————————————————- */
    #copyright { float:
   left; display:inline; margin:55px 0 0 -10px; color:#777; } #copyright li { float:
   left; display:inline; font-size:11px; margin:0 10px 0 0; padding:0 0 0 13px; 
   background:url(img/footer_line.gif) no-repeat left center; } #copyright li a,#
   copyright li a:visited { text-decoration:underline; }
 * #return_top a { position:absolute; position:fixed; right:15px; bottom:15px; width:
   18px; height:99px;
    display:block; background:url(img/return_top.png) no-repeat
   left top; } #return_top a:hover { background:url(img/return_top.png) no-repeat
   right top; }
 * /* —– page ———————————————————————————————————————————- */
    #page_noside_contents{
   background:url(img/side_noside.gif) repeat-y; padding:30px 122px 10px; } #page_noside_header{
   background:url(img/header_noside.gif) no-repeat top; height:32px; margin:-32px
   0 0 0; } #page_noside_post { padding:0 15px 20px; background:none; } #footer_noside{
   background:url(img/footer_noside.gif) no-repeat top; height:90px; }
 * /* —– archive/category/tag/search/ ———————————————————————————————————- */
    #
   headline { background:url(img/headline_bottom.gif) no-repeat left bottom; width:
   510px; margin:0 0 20px 0; } #headline p { background:url(img/headline_top.gif)
   no-repeat left top; padding:26px 15px 22px; font-weight:bold; font-size:14px;
   margin:0; line-height:100%; text-align:center; color:#006600; } .archive_contents{
   margin:0 0 20px 0; padding:0 15px 20px; background:url(img/dot1.gif) repeat-x
   bottom; } .archive_contents h2 { font-size:14px; margin:0 0 5px 0; padding:0;}.
   archive_meta { margin:0 0 5px 0; color:#999; } .archive_meta a, .archive_meta
   a:visited { color:#999; } .archive_meta li { display:inline; font-size:11px; 
   margin:0 10px 0 0; } .archive_contents p { font-size:11px; margin:0; } .archive_contents
   p a, .archive_contents p a:visited { color:#000; } .archive_contents p a:hover{
   color:#009900; }
 * /* —– page navi —————————————————————————————————————————– */
    .page_navi { margin:
   0 0 10px 0; padding:20px 0 0 0; } .page_navi li { line-height:0%; display:inline;
   padding:0; margin:0; font-size:11px; } .page_navi a, .page_navi a:visited, .page_navi
   a:hover, .page_navi span.current, .page_navi span.pages, .page_navi span.extend,.
   page_navi span.current, .page_navi span.dots { color:#999; width:30px; padding:
   0; margin:0 3px 0 0; display:block; float:left; text-align:center; line-height:
   30px; background:url(img/pager1.gif) no-repeat left top; } .page_navi a:hover{
   color:#999; background:url(img/pager1.gif) no-repeat left bottom; text-decoration:
   none; } .page_navi span.current { background:url(img/pager2.gif) no-repeat left
   top; color:#fff; }
 * /* —– header-menu ————————————————————————————————————————— */
    #header_menu {
   float:right; display:inline; margin:20px 0 0 0; height:52px; background:url(img/
   header_menu_right.gif) no-repeat right top; }
 * #menu { float:left; background:url(img/header_menu_left.gif) no-repeat left top;
   font-size:11px; height:52px; margin:0; }
    #menu, #menu ul { line-height:1; margin:
   0; padding:0; } #menu li { position:relative; float:left; border-left:1px solid#
   444; height:48px; margin:2px 0 0 0; z-index:10; } #menu ul li { height:auto; 
   border-left:none; padding:0; left:auto; margin:0; } #menu a:link, #menu a:visited{
   color:#009900; display:block; padding:19px 30px 14px; position:relative; } #menu
   a:hover { color:#f3dc19; text-decoration:none; background:#333; } #menu ul { 
   position:absolute; top:48px; left:0; display:none; opacity:0; width:200px; } #
   menu ul ul { margin:0 0 0 189px; top:0; }
 * #menu ul a:link, #menu ul a:visited,
    #menu .current_page_item ul a:link, #menu.
   current_page_item ul a:visited, #menu ul .current_page_item a:link, #menu ul .
   current_page_item a:visited, #menu ul .current_page_item ul a:link, #menu ul .
   current_page_item ul a:visited, #menu .current-cat ul a:link, #menu .current-
   cat ul a:visited, #menu ul .current-cat a:link, #menu ul .current-cat a:visited,#
   menu ul .current-cat ul a:link, #menu ul .current-cat ul a:visited { color:#009900;
   background:#282828; line-height:140%; padding:9px 28px 7px; border:1px solid #
   444; width: 132px; margin:-1px 0 0 0; } #menu ul a:hover, #menu .current_page_item
   ul a:hover, #menu .current-cat ul a:hover, #menu .first_menu ul a:hover, #menu.
   last_menu ul a:hover { color:#f3dc19; background:#333; }
 * #menu .current_page_item, #menu .current-cat { background:url(img/navback.gif)
   left top; z-index:9;}
    #menu .current_page_item a:link, #menu .current_page_item
   a:visited, #menu .current-cat a:link, #menu .current-cat a:visited { color:#009900;
   padding-bottom:21px; background:url(img/header_menu_arrow.gif) no-repeat center
   bottom; } #menu ul .current_page_item a:link, #menu ul .current_page_item a:visited,#
   menu ul .current-cat a:link, #menu ul .current-cat a:visited { color:#009900;
   background:#282828 url(img/stripe2.gif) left top; } #menu ul .current_page_item
   ul a:link, #menu ul .current_page_item ul a:visited, #menu ul .current-cat ul
   a:link, #menu ul .current-cat ul a:visited { color:#009900; background:#282828;}#
   menu ul .current_page_item ul a:hover, #menu ul .current-cat ul a:hover { color:#
   e2415b; background:#333; }
 * #menu .first_menu { border:none; background:none; }
    #menu .first_menu_active{
   background:url(img/header_menu_first_active.gif) no-repeat left top; } #menu .
   first_menu a:hover { background:url(img/header_menu_first_hover.gif) no-repeat
   left top; } #menu .last_menu { background:none; } #menu .last_menu_active { background:
   url(img/header_menu_last_active.gif) no-repeat right top; } #menu .last_menu 
   a:hover { background:url(img/header_menu_last_hover.gif) no-repeat right top;}
 * #menu ul .parent_menu > a:link, #menu ul .parent_menu > a:visited { background:#
   282828 url(img/arrow4.gif) no-repeat right 14px; }
    #menu ul .parent_menu > a:
   hover { background:#333 url(img/arrow4.gif) no-repeat right 14px; }
 * /* ———- clearfix hack ———- */
    .clearfix:after { content: “.”; display: block;
   clear: both; height: 0; visibility: hidden; } .clearfix { display: inline-block;}/*
   exlude MacIE5 \*/ * html .clearfix { height: 1% } .clearfix {display:block;} /*
   end MacIE5 */
 *  Thread Starter [dice_spadez](https://wordpress.org/support/users/dice_spadez/)
 * (@dice_spadez)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/small-sidebar-css-issue/#post-1274102)
 * I figured out why…. the gap of space is an area blocked off for Post meta such
   as date tags etc etc.
 *  Thread Starter [dice_spadez](https://wordpress.org/support/users/dice_spadez/)
 * (@dice_spadez)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/small-sidebar-css-issue/#post-1274103)
 * plz delete this thread. Thx

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

The topic ‘SMALL SIDEBAR / CSS ISSUE’ is closed to new replies.

 * 3 replies
 * 1 participant
 * Last reply from: [dice_spadez](https://wordpress.org/support/users/dice_spadez/)
 * Last activity: [16 years, 6 months ago](https://wordpress.org/support/topic/small-sidebar-css-issue/#post-1274103)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics