Michael Kniskern Michael Kniskern - 1 year ago 83
CSS Question

Get rid of space between divs - CSS

I have the following HTML code where the

div is a collection of
tags that will act as tabs across the the
div. Problem is that there is a white space adding between the top of the
div and bottom of the


<div id="subnav">
<div id="subnavtab"><a href="">Plan Your Visit</a></div>
<div id="subnavtab"><a href="">Tour the Museum</a></div>
<div id="subnavtab"><a href="">Program & Events</a></div>
<div id="subnavtab"><a href="">Membership</a></div>
<div id="subnavtab"><a href="">Donate</a></div>
<div id="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits


#subnav { margin-top: 20px; width: 740px; display: inline-block; }
#featuredexhibit { width: 732px; height: 200px; background-color: #A7A9AC; margin: 0; }
#subnavtab { background-color: #A1CD3A; float: left; padding: 10px 10px 10px 10px; margin: 0 5px 0 0; display: inline-block; }

I have tried using the Chrome Developer Tools to find the issue but I do not have any luck or I do not know what to look for.

Answer Source

You should give a float to the subnav and then clear the featuredexhibit and then only it couldn't save a space between them.

#subnav{float: left;}
#featuredexhibit{clear: both;}

See this Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download