CODEWITHSUNDEEP
htmlcss
Locke Donohoe
Locke Donohoe

Reputation: 492

HTML/CSS Strange spacing in divs

In refining the banner/navbar of my website I discovered some strange spacing between divs. Here are two links showing my problem in JSFiddle. Link 1 | Link 2
(I am using php to determine what content to show so I needed two to demonstrate the issue for both possibilities).

I have spent about 3 hours fiddling with code trying to find out what is happening and how to fix it, but to no avail. I can't seem to identify what is causing the problem.

EDIT: What I find strange is the gaps between the green and the black outlined border.

My code (from JSFiddle):

Link 1 HTML:

<div id="banner">
    <div id="bannerleft"></div>
    <div id="bannercenter">
        <div id="nav_content">
            <ul>
                <li>
                    <div><a href="../">Home</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="forum">Forums</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="market">Market</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="bannerright">
        <div id=accountcontent> <span><a href="login">Login</a> | <a href="register">Register</a></span>

        </div>
    </div>
</div>

Link 1 CSS:

#banner {
    height: 30px;
    width: 100%;
    display: table;
    margin-bottom: 20px;
}
#bannerleft {
    display: table-cell;
    text-align: left;
    outline-color: black;
    outline-style: dashed;
    width: 33.33%;
}
#bannercenter {
    display: table-cell;
    text-align: center;
    outline-color: black;
    outline-style: dashed;
    padding: 0px;
    height:30px;
    width: 33.33%;
}
#nav_content {
    height: 30px;
    margin: 0 auto;
    padding: 0px;
    outline-color: green;
    outline-style: dashed;
}
#nav_content ul {
    height: 30px;
    margin: 0 auto;
    padding: 0px;
}
#nav_content ul li {
    display: inline-block;
    list-style: none;
    line-height: 30px;
}
#nav_content ul li div {
    height: 30px;
}
#bannerright {
    display: table-cell;
    text-align: center;
    outline-color: black;
    outline-style: dashed;
    padding: 0px;
    height:30px;
    width: 33.33%;
}
#accountcontent {
    outline-color: green;
    outline-style: dashed;
    height:30px;
}

Link 2 HTML:

<div id="banner">
    <div id="bannerleft"></div>
    <div id="bannercenter">
        <div id="nav_content">
            <ul>
                <li>
                    <div><a href="../">Home</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="forum">Forums</a>
                    </div>
                </li>
                <li>|</li>
                <li>
                    <div><a href="market">Market</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="bannerright">
        <div id=accountcontent><a href="account"><img id="avatarsmall" src=""/>AccountName</a>
        </div>
    </div>
</div>

Link 2 CSS:

#banner {
    height: 30px;
    width: 100%;
    display: table;
    margin-bottom: 20px;
}
#bannerleft {
    display: table-cell;
    text-align: left;
    outline-color: black;
    outline-style: dashed;
    width: 33.33%;
}
#bannercenter {
    display: table-cell;
    text-align: center;
    outline-color: black;
    outline-style: dashed;
    padding: 0px;
    height:30px;
    width: 33.33%;
}
#nav_content {
    height: 30px;
    margin: 0 auto;
    padding: 0px;
    outline-color: green;
    outline-style: dashed;
}
#nav_content ul {
    height: 30px;
    margin: 0 auto;
    padding: 0px;
}
#nav_content ul li {
    display: inline-block;
    list-style: none;
    line-height: 30px;
}
#nav_content ul li div {
    height: 30px;
}
#bannerright {
    display: table-cell;
    text-align: center;
    outline-color: black;
    outline-style: dashed;
    padding: 0px;
    height:30px;
    width: 33.33%;
}
#accountcontent {
    outline-color: green;
    outline-style: dashed;
    height:30px;
}
#avatarsmall {
    height: 30px;
    width: 30px;
    padding: 0px;
    margin: 0px;
}

Upvotes: 1

Views: 464

Answers (2)

Blaise
Blaise

Reputation: 13479

Add vertical-align: top to #bannercenter:

https://jsfiddle.net/d5d83uvd/1/

By default table cells (including CSS display: table-cell) have vertical-align: middle, so if there are any sibling table cells that have taller content, content in short, non tall cells will appear in the vertical middle.

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Quick fix, using vertical-align: top for #bannercenter, which is not recommended. If you would like to do it as per semantics, readability, then read on.

I am not sure what exactly you are trying to achieve, but using contextual classes will help you. I suspect your issue is something related to line-height and margin. The fix is to make line-height: 1; margin: 0; for both of the <ul>s. And it is not a good idea to use display: table or display: table-cell. Instead either use inline-block or flexbox.

.parent {border: 1px dashed blue; text-align: center;}
.child-one {display: inline-block; border: 1px dashed red; margin: 0 5px; padding: 5px; width: 33%;}
.child-two {display: inline-block; border: 1px dashed green; margin: 0 5px; padding: 5px; width: 33%;}
<div class="parent">
  <div class="child-one">Home</div>
  <div class="child-two">Office</div>
</div>

May be if you want to have three columns, and use one column as an offset (making the contents centred) and then use the next column to display the other things, you can use the following piece of code:

* {font-family: Segoe UI, sans-serif;}
header {overflow: hidden;}
header ul,
header ul li {margin: 0; padding: 0; list-style: none; float: left;}
header ul li {margin-right: 10px;}
header a {text-decoration: none; color: #09f;}
header a:hover {color: #33f;}

header ul.main-menu {margin-left: 35%;}
header ul.sub-menu {float: right;}
header .acct-settings {float: right;}

.acct-settings {position: relative; min-height: 32px; padding-left: 40px;}
.acct-settings a,
.acct-settings span {display: block; width: 100px;}
.acct-settings a.thumb {position: absolute; left: 0; top: 5px; width: 32px;}
.acct-settings a.thumb img {font-weight: bold;}
<header>
  <ul class="main-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Forums</a></li>
    <li><a href="#">Market</a></li>
  </ul>
  <ul class="sub-menu">
    <li><a href="#">Register</a></li>
    <li><a href="#">Sign In</a></li>
  </ul>
</header>
<hr />
<header>
  <ul class="main-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Forums</a></li>
    <li><a href="#">Market</a></li>
  </ul>
  <div class="acct-settings">
    <a href="#" class="thumb">
      <img src="http://placehold.it/32x32" alt="" />
    </a>
    <a href="#">User Name</a>
    <span>Designation</span>
  </div>
</header>

It is a good idea to follow the standard coding practise and use semantic tags.

Upvotes: 3

Related Questions