Title: Gap between divs
Last modified: August 19, 2016

---

# Gap between divs

 *  Resolved [Bandonn](https://wordpress.org/support/users/bandonn/)
 * (@bandonn)
 * [15 years, 1 month ago](https://wordpress.org/support/topic/gap-between-divs/)
 * Hey everyone
 * I’ve got this annoying gap between two of my divs, it doesn’t happen in FF but
   it does happen in IE and safari. I know there are quite a lot of these topics
   around and I had a look at them and tried to apply the fixes listed there but
   I still couldn’t get it to work
 * Here is the problem section from the markup:
 *     ```
       <!-- Header -->
             <div id="header">
               <div id="logo">
                             <h1 class="text"><a href="http://localhost/wordpress/">philproj</a></h1>
                   <p id="site-description">Just another WordPress site</p>
   
               </div>
       		 <!-- Navigation -->
       		 <ul>
                 <div class="menu"><ul><li class="current_page_item"><a href="http://localhost/wordpress/" title="Home"><span class="left"></span><span class="text">Home</span><span class="right"></span></a></li><li class="page_item page-item-19"><a href="http://localhost/wordpress/?page_id=19" title="All Posts"><span class="left"></span><span class="text">All Posts</span><span class="right"></span></a></li><li class="page_item page-item-5"><a href="http://localhost/wordpress/?cat=3" title="Reading"><span class="left"></span><span class="text">Reading</span><span class="right"></span></a></li><li class="page_item page-item-7"><a href="http://localhost/wordpress/?cat=4" title="Podcasts"><span class="left"></span><span class="text">Podcasts</span><span class="right"></span></a></li><li class="page_item page-item-9"><a href="http://localhost/wordpress/?cat=5" title="Lectures"><span class="left"></span><span class="text">Lectures</span><span class="right"></span></a></li><li class="page_item page-item-11 current_page_ancestor current_page_parent"><a href="http://localhost/wordpress/?page_id=11" title="Forum"><span class="left"></span><span class="text">Forum</span><span class="right"></span></a></li></ul></div>
               </ul>
       		<!-- !Navigation -->
             </div>
             <!-- !Header-->
       ```
   
 * Here are the elements from the stylesheet:
 *     ```
       /* -- Header -- */
   
       #header {
         width: 924px;
         border-bottom: 12px solid #ededed;
         position: relative;
         margin-bottom: 50px;
       }
   
       #header .rss { background: #ededed; position: absolute; bottom: 0 !important; bottom: -1px; right: 0; padding: 5px 6px; }
   
       /* Logo */
   
       #logo {
         background: #4e4e4e;
         padding-left: 32px;
   
         /* min-height hack for ie6 */
         min-height: 179px;
         height: auto !important;
         height: 179px;
       }
   
       #logo h1.text { padding-top: 30px; }
   
       /* Navigation */
   
       #header ul {
         background: #2d313d url('../../images/nav_bg.png') no-repeat top left;
         height: 37px;
         list-style: none;
         margin: 0;
       }
   
       #header ul li { float: left; }
   
       #header ul li a {
         display: block;
         float: left;
         height: 37px;
         line-height: 37px;
         padding: 0 24px;
       }
   
       #header ul li.current_page_item .left {
         background: transparent url('../../images/current_left.png') no-repeat top left;
         float: left;
         height: 47px;
         width: 6px;
       }
   
       #header ul li.current_page_item .right {
         background: transparent url('../../images/current_right.png') no-repeat top left;
         float: left;
         height: 47px;
         width: 6px;
       }
   
       #header ul li.current_page_item .text { float: left; margin: 0 18px; }
   
       #header ul li.current_page_item a {
         background: transparent url('../../images/current_center.png') repeat-x top left;
         height: 47px;
         line-height: 47px;
         margin-top: -5px;
         padding: 0; position: relative;
       }
       ```
   
 * As well as the stylesheet from the child theme I’m using:
 *     ```
       /* -- Header -- */
       #header {
         width: 940px;
         }
   
       /* -- Logo -- */
   
         #logo {
         min-height: 120px;
         height: auto !important;
         height: 120px;
         }
   
         #logo h1.text { padding-top: 5px; }
   
       /* -- Navigation -- */
         #header ul {
         background: #2d313d url('images/nav_bg.png') no-repeat top left;
         }
   
         #header ul li.current_page_item .left {
         background: transparent url('images/current_left.png') no-repeat center;
         }
   
         #header ul li.current_page_item .right {
         background: transparent url('images/current_right.png') no-repeat center;
         }
   
         #header ul li.current_page_item a {
         background: transparent url('images/current_center.png') repeat-x center;
         }
       ```
   
 * And finally the section in the header.php file:
 *     ```
       <!-- Header -->
             <div id="header">
               <div id="logo">
                 <?php if(agile_check_option('logo') && get_option('agile_header_type') == 'Logo') { ?>
                   <h1><a href="<?php echo get_option('home'); ?>/"><img src="<?php echo get_option('agile_logo'); ?>" alt="<?php bloginfo('name'); ?>"></a></h1>
                 <?php } else { ?>
                   <h1 class="text"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
                   <p id="site-description"><?php bloginfo('description'); ?></p>
                 <?php } ?>
               </div>
       		 <!-- Navigation -->
       		 <ul>
                 <?php wp_page_menu('show_home=1&title_li=&depth=-1&link_before=<span class="left"></span><span class="text">&link_after=</span><span class="right"></span>&include='.get_option('agile_nav_pages')); ?>
               </ul>
       		<!-- !Navigation -->
             </div>
       ```
   
 * I currently don’t have a host since I’m building the site locally first, so I
   can’t link to it unfortunately but hopefully I included all the relevant information,
   if not just tell me and I’ll put it in. Does anyone have a solution for this?
 * Thanks

The topic ‘Gap between divs’ is closed to new replies.

 * 0 replies
 * 1 participant
 * Last reply from: [Bandonn](https://wordpress.org/support/users/bandonn/)
 * Last activity: [15 years, 1 month ago](https://wordpress.org/support/topic/gap-between-divs/)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics