handle space between div when scolling

Question

This may look like a duplicate question, but I could not find any satisfactory answer. I want to create a navigate bar. I just created some inline div, but it generates some space in between. so, I put them in a container div and gave it same background color. It works fine, till the browser is full screen size. If I reduce the size of the browser, so that the horizontal scroll bar appears, Then, in the scroll region, it still shows the gap between divs (See the image).Reason being, underlying container does not expand to full width(it will only take the width of the browser without considering scroll). I tried same thing using span or using unordered list(ul ,li) but it gives same result.

The code -

   .navbtn {
        white-space:nowrap;
        background: #333;
    }
   .dark-btn-div {
    display:inline-block;
    vertical-align:middle;
    line-height:2em;
    margin: 0;
    padding: 0;
    background:#333;
    color:#fff;
    cursor:pointer;
    font-size:1em;
}

 <div class=" navbtn">
    <div class="dark-btn-div">Test1111</div>
    <div class="dark-btn-div">Test2222</div>
    <div class="dark-btn-div">Test3333</div>
    <div class="dark-btn-div">Test4444</div>
    <div class="dark-btn-div">Test5555</div>
    <div class="dark-btn-div">Test6666</div>
    <div class="dark-btn-div">Test7777</div>
    <div class="dark-btn-div">Test8888</div>
    <div class="dark-btn-div">Test9999</div>

</div>


<ul class=" navbtn">
    <li class="dark-btn-div">Test1111</li>
    <li class="dark-btn-div">Test2222</li>
    <li class="dark-btn-div">Test3333</li>
    <li class="dark-btn-div">Test4444</li>
    <li class="dark-btn-div">Test5555</li>
    <li class="dark-btn-div">Test6666</li>
    <li class="dark-btn-div">Test7777</li>
    <li class="dark-btn-div">Test8888</li>
    <li class="dark-btn-div">Test9999</li>

</ul>

Please Help..

use float:left property to remove space. – priya_singh Jan 17 '17 at 06:25 — priya_singh, Jan 17 '17 at 06:25

score 1 · Answer 1 · answered Jan 17 '17 at 06:28

   .navbtn {
        white-space:nowrap;
        background: #333;
    }
   .dark-btn-div {
    display:inline-block;
    vertical-align:middle;
    line-height:2em;
    margin: 0;
    padding: 0;
    background:#333;
    color:#fff;
    cursor:pointer;
    font-size:1em;
}

<div class=" navbtn">
    <div class="dark-btn-div">Test1111</div>
    <div class="dark-btn-div">Test2222</div>
    <div class="dark-btn-div">Test3333</div>
    <div class="dark-btn-div">Test4444</div>
    <div class="dark-btn-div">Test5555</div>
    <div class="dark-btn-div">Test6666</div>
    <div class="dark-btn-div">Test7777</div>
    <div class="dark-btn-div">Test8888</div>
    <div class="dark-btn-div">Test9999</div>

</div>


<ul class=" navbtn">
    <li class="dark-btn-div">Test1111</li>
    <li class="dark-btn-div">Test2222</li>
    <li class="dark-btn-div">Test3333</li>
    <li class="dark-btn-div">Test4444</li>
    <li class="dark-btn-div">Test5555</li>
    <li class="dark-btn-div">Test6666</li>
    <li class="dark-btn-div">Test7777</li>
    <li class="dark-btn-div">Test8888</li>
    <li class="dark-btn-div">Test9999</li>

</ul>

Sorry, cant figure out what has been changed in this code... Also the problem still exists — vivek, Jan 17 '17 at 06:40

score 1 · Answer 2 · answered Jan 17 '17 at 06:33

There is also a nice CSS way to fix this, as it may be sometimes difficult to remove white-space in your HTML markup.

By default inline-block elements have spacing between each other. I have the following spaceless fix which you can use:

SCSS

@mixin spaceless-reset() {

  font-family: <your-initial-font>; // reset font settings
  letter-spacing: normal;

}


@mixin spaceless() {

  font-family: monospace; // kill all whitespace
  letter-spacing: -.64em;

  > * {

    @include spaceless-reset();
    display:inline-block;
    vertical-align: middle;

  }

}


%spaceless {

  @include spaceless();

}


%spaceless-reset {

  @include spaceless-reset();

}

// Usage
.navbtn {
    @extend %spaceless;
}

CSS

The SCSS example outputs as:

.navbtn {
  font-family: monospace;
  letter-spacing: -.64em; }
  .navbtn > * {
    font-family: <your-initial-font>;
    letter-spacing: normal;
    display: inline-block;
    vertical-align: middle; }

See also various other articles about this topic:

Thanks Kees. But I just figured out from one of the answer posted here that, the space is actually because I was typing each div on a newline. Just getting the divs on one line solved my problem. Person who had post this answer, deleted it in few moments (dont know why) but whoever it was, thanks a lot. — vivek, Jan 17 '17 at 06:47
Yes, as mentioned, it maybe sometimes difficult to remove the new lines, because that breaks the readability of your code. That's why my answer is a CSS only fix that doesn't affect your HTML markup :) — Kees van Lierop, Jan 17 '17 at 06:54
So, is it not possible to give some escape sequence like '\' to make the code more readable? (like we do in other programming languages like c++ — vivek, Jan 17 '17 at 06:59

score 0 · Answer 3 · answered Jan 17 '17 at 06:32

<style>

   .navbtn {
     white-space:nowrap;
     background: #333;
   }
   .dark-btn-div {
   display:inline-block;
   vertical-align:middle;
   line-height:2em;
   margin: 0px; // change
   padding: 0px; // change
   background:#333;
   color:#fff;
   cursor:pointer;
   font-size:1em;
   }
</style>

handle space between div when scolling

3 Answers3