Michael Kniskern Michael Kniskern - 5 months ago 15
CSS Question

Get rid of space between divs - CSS

I have the following HTML code where the

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

HTML:

<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>
<div id="featuredexhibit">
Featured Exhibit - this can be a rotating menu of exhibits
</div>


CSS:

#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

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

Comments