Gap between div sections and display:table;

I’m having a problem overcoming the space created between the nav bar and the div section below it. A negative bottom margin will get it done but isn’t the future proof solution I want. Here’s a screenshot of the page:

Here’s a link to the site:

http://htmlkoala.com/mccabe-electric

Here’s the html:

<div class="section group">
 <div class="col span_2_of_2">
  <nav class="menu-container">
    <div class="inside-container">
        <ul class="menu">
         <li class="active"><a href="index.html"><i class="fa fa-home fa-lg"></i></a></li>
         
         <li><a href="#services" class="">Services</a></li>
         <li><a href="#contact" class="">Contact</a></li>
        </ul>
     </div><!-- .inside-container -->  
  </nav><!-- .menu-container --> 
 </div><!-- .col .span_2_of_2 -->
</div><!-- .section .group -->
        
<div class="slideshow">
 <div class="section group inside-container">
  <div class="col2 span_3_of_4">
    <!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
   <div id="wowslider-container1">
    <div class="ws_images">
      <ul>
      <li><img src="data1/images/commercialelectricalwiring.jpg" alt="industrial" title="industrial" id="wows1_0"/>
      </li>
      <li><img src="data1/images/electricaljob.jpg" alt="commercial" title="commercial" id="wows1_1"/>
      </li>
      <li><a href="http://wowslider.com"><img src="data1/images/lightingupgradeelectrician.jpg" alt="lighting upgrades" title="lighting upgrades" id="wows1_2"/></a>
      </li>
      <li><img src="data1/images/patbox.jpg" alt="residential/new construction" title="residential/new construction" id="wows1_3"/>
      </li>
      </ul>
    </div><!-- .ws_images -->
    <div class="ws_shadow"></div>
    </div><!-- #wowslider-container1 .slider-pos -->
   </div>
   <script type="text/javascript" src="engine1/wowslider.js"></script>
   <script type="text/javascript" src="engine1/script.js"></script>
   <!-- End WOWSlider.com BODY section -->
   <div class="col2 span_1_of_4 intro">
    <h2>Honesty Commitment and Experience</h2>
    <p>Use my 40+ years of expertise to create custom solutions to fit your needs and budget
    </p>
   </div><!--.col .span_1_of_4-->
  </div><!--.section .group .slide-container--> 
 </div><!--.slideshow-->

Here’s the CSS:

*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}


.menu-container {
    background: #e54c10 none repeat scroll 0 0;
    border-top: 1px solid #c14e20;
    margin-bottom: -80px;
}

ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #e54c10 none repeat scroll 0 0;
}

ul.menu li {
    float: left;
    border-right: 1px solid #537248;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #413f53;
    text-transform: uppercase;
}

.menu li:first-child {
    border-left:1px solid #537248; 
}

.menu li a {
    display: inline-block;
    color: #413f33;
    
    padding: 0.875em 1em;
    text-decoration: none;
}

.menu li a:hover:not(.active) {
    background: #413f33;
    color: rgba(255, 255, 255, 0.7);
}

.menu li a:focus {
    background: #413f33;
    color: rgba(255, 255, 255, 0.7);
}

.active {
    background: #413f33;
}

.menu li i {
    color: #B0C2AA;
}

.slideshow {
   background: #3D3B2F none repeat scroll 0 0;
   position: relative;
   top: 30px;
}

.intro {
    float: right;
}

.intro h2 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 2em;
    text-transform: uppercase;
    padding-top: 30px;
    line-height: 38px;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

.intro p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875em;
    margin-top: 20px;
    width: 100%;
    line-height: 23px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

Have you tried using the property inspector? Perhaps the ul in your nav section has bottom padding or bottom margin.

Hi Gandalf,

I’m not sure what your talking about by “Property Inspector” but I have been using Firebug and other dev tools to dig into the code. My first attempt at the problem was to remove all padding which I did.

It doesn’t seem to be a padding or margin issue but display: table makes it a block level element with the inherent white space around it. As I said I can use a negative margin to bring the slideshow section to snug up to the nav bar, but it’s not a future proof solution.

Somehow I need to overcome the white space around display: table;

@sonofadoc,

Please go back and edit your first post. It looks to me like the three backticks before and after the CSS code are misplaced. They should be on lines by themselves (just like the HTML).

```
CSS
```

In what browser are you seeing that space? I do not see it in FF or Chrome.

It’s not showing on the site because I have a negative margin snugging it up. The screenshot provided shows it without the negative margin applied.

Two things making the gap.
.col on <div class="col span_2_of_2"> has margins.
and .slideshow has top:30px;

1 Like

Contributors:

main.css (line 66)

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;  /* Contributor */
}

main.css (lines 300, 1083)

.slideshow {
    background: #3d3b2f none repeat scroll 0 0;
    position: relative;
    top: 30px;  /* Contributor */
}

<ninja'd !>

You are right, I’d forgotten that. I’ve removed the top:30px; which narrowed the gap. Now there is a small gap. The col class you mentioned is actually col2 which I have the top margin removed from but still have the gap. I’ll double check and get back.

.col2 {
	display: block;
	float:left;
	margin: 0 0 0 1.6%;
}

Yeah, the top margin for .col2 is removed and there isn’t a bottom margin for the nav bar above it so where’s the gap coming from?

In what browser and at what width(s) do you see the gap?

The most I see at this time is a 1px “pixel jog” the gap.

Never mind. It’s not a pixel jog. Looking elsewhere now…

Here’s another screenshot: Your not going to see it on the site as I’m working locally. If you do want to see it happen on the site in all browsers scale the text down and it will appear. Or open up a dev tool and remove the negative margin on the .menu-container.

It would be very helpful if you could upload your changes to the site. Delete the “workaround” negative margins and relative tops, etc.

OK. Give it a minute or so and it’ll be live.

It’s the bottom margin on .col

Yep, you’re right. How do I miss those obvious things? Thanks so much for your help. No telling how long I would have been scratching my head over that. Thanks!

Can we consider this issue solved… almost?

Yes ronpat, the bottom margin on the .col class which SamA pointed out was the one I was looking for and is now resolved. I actually was already aware of the top:30px part of the issue but had done an undo and mistakenly put it back. Thanks to all of you for your help! You saved me a lot of time.

I’m really getting to like this Sitepoint forum as this is not the first time I’ve been helped out of a jam.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.