CSS inline-block Positioning Issue

Question

I'm trying to make a website and I'm having some problems at layout.
I want div:logo and div:social media to be at the same line but I couldn't do.

Demo

Answer 1

write your div:logo and div:social media like this (side by side) don't make any space between them

<div class="child" id="logo">logo</div><div class="child" id="socialMedia">sosyal media</div>

hope this will solve your issue.

Answer 2

Try this:

HTML:

        <div class="parent">
            <div class="parent" id="header">
                <div class="child floatL" id="logo" >
                    logo
                </div>
                <div class="child floatL" id="socialMedia" >
                    sosyal media
                </div>
                <div class="child" id="menuBar">
                    menu bar
                </div>
            </div>

            <div class="parent" id="body">
                body
            </div>

            <div class="parent" id="footer">
                footer
            </div>
        </div>

CSS:

body {
    text-align: center;
}

.floatL
{
    float:left;
}

.parent {
    display: inline-block;
    width: 960px;
}

.child {
    display: inline-block;
}

.parent, .child {
    border:  none;
    background-color: #CCC;
}

#logo {
    width: 640px;
    background-color: #ff6a00;
}

#socialMedia {
    width: 320px;
    background-color: #ffd800;
}

#menuBar {
    width: 100%;
    background-color: #b6ff00;
}

Fiddle

Answer 3

If you are using display:inline-block you are unable to have a space between your inline-block elements otherwise it will treat this as a whitespace and insert it.

Remove this and it will work:

White space between divs deleted

Indentation of code kept with comments