Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

extra space between divs, another one

extra space between divs, another one

Problem

Not sure why do I get an extra space between my divs

http://jsfiddle.net/3cx8w/1/

It's simple as hell:

HTML:


CSS:

#menu {
    position: absolute;
    top: 16%;
    left: 5%;
    width: 90%;
    background-color: #343434;
    border: 1px solid black;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#menu div {
    display: inline-block;
    height: 100%;
    padding: 1% 2%;
    margin: 0;
    border-left: 1px dotted gray;
    border-right: 1px dotted gray;
    font-size: 60%;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

#menu a {
    color: white;
    text-decoration: none;
}

Please help.

Problem courtesy of: Alex G

Solution

Give the button divs the style

float:left;

instead of

display:inline-block;

And add this div to the end of the #menu

Solution courtesy of: George

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

extra space between divs, another one

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×