CSS inline Div invisible spacing?

Question

Been trying to get these div's to line up along side of each other without there being that space in between them. Not really sure what's happening... I have tried everything and I just can't figure out what this is... I know it is a simple fix but it just doesn't seem to want to work. The weird thing is there are times that I am messing around with the live code on Chrome and it magically seems to work momentarily...

Any help is appreciated.

Here is my fiddle: http://jsfiddle.net/2jL5D/

HTML

<div class="table-Container">
    <div id="fan-free-container">
        FAN-FREE AND ENERGY EFFICIENT<br>
        <div id="seriesContainer">
            <div id="tx4200Container"><div class="txHeader">TX4200E</div></div>
            <div id="ks6700Container"><div class="ksHeader">KS6700</div></div>
            <div id="ks7200Container"><div class="ksHeader">KS7200</div></div>
            <div id="ks7500Container"><div class="ksHeader">KS7500</div></div>
            <div id="ks7700Container"><div class="ksHeader">KS7700</div></div>
        </div>
    </div>
</div>

CSS

#fan-free-container {
    background: rgb(230,231,233);
    -moz-border-radius:10px 10px 0px 0px;
    -webkit-border-radius:10px 10px 0px 0px;
    border-radius:10px 10px 0px 0px;
    text-align: center;
    border-style: solid;
    border-color: #c4c5c6;
    border-width: 2px;
}

#seriesContainer > div{
    display: inline-block;
}

#seriesContainer div > div{
    padding: 4px 25px;
    color: white;
    font-weight: bold;
    border-style: solid;
    border-color: #c4c5c6;
    border-width: 2px;
}

.txHeader {
    background: -webkit-linear-gradient(#af9358, #ded1b9); /* For Safari */
    background: -o-linear-gradient(#af9358, #ded1b9); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#af9358, #ded1b9); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#af9358, #ded1b9); /* Standard syntax (must be last) */
}

.ksHeader {
    background: -webkit-linear-gradient(#06426b, #93a7c2); /* For Safari */
    background: -o-linear-gradient(#06426b, #93a7c2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#06426b, #93a7c2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#06426b, #93a7c2); /* Standard syntax (must be last) */
}

Just search a little on google the answer is here http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — DaniP, Dec 06 '13 at 20:59
@NinjaFart so it's basically taking the new line character and turning it into whitespace? — Adjit, Dec 06 '13 at 21:04
@metsales Well, something like that. You've also got space before every DIV. — NinjaFart, Dec 06 '13 at 21:13

score -1 · Accepted Answer · answered Dec 06 '13 at 21:01

-1

Inline elements are sensitive to white space so you can just eliminate the space between the divs like in this jsFiddle example.

You can also use HTML comments between them like: </div></div>. jsfiddle example

answered Dec 06 '13 at 21:01

j08691

190,436
28
232
252

CSS inline Div invisible spacing?

1 Answers1