Question

So, I have a container dive with two divs contained in it.

#main_container {
margin: 0 auto;
width: 980px;
padding: 0 0 0 0;
border: none;
}
    .content_third {
    display: inline-block;
    width: 326px;
    padding: 0 0 0 0;
    border: none;
    }

    .content_two {
    display: inline-block;
    width: 653px;
    vertical-align: top;
    padding: 0 0 0 0;
    border: none;
    }




<div id="main_container">
            <div class="content_third">
            hello world!

            </div>
            <div class="content_two">
            Hello World!
            </div>
        </div>

The divs stack vertically instead of lining up horizontally like I need. The widths add up (326px + 653px = 979px) so I can’t figure out why they wont line up correctly. Any ideas what is going on here?

Answer 1

It would help to see the HTML, but the best guess is that you have something like this:

<div class="content_third">
    foo
</div>
<div class="content_two">
    bar
</div>

Because the both divs have display: inline-block; the whitespace between the divs becomes meaningful, that is, a space character is added between them. Change the HTML so that there’s no whitespace (line breaks, spaces) at all between the divs:

<div class="content_third">
    foo
</div><div class="content_two">
    bar
</div>