A correct way to place divs side by side

Question

I know its a noob and repeated question, but I need some answers.

I think: 1 div with width: 100% and 2 divs inside this with width:50% each.WHy does it not fit ?

HTML:

<div id="top-menu">
   <div id="logo"></div>            
   <div id="menu-top"></div>
</div>

CSS:

#top-menu{
    width: 100%;
    height: 100px;
    position: relative;
    border: 1px solid black;
    background-color: #A3238E;
}

#logo{
    width: 50%;
    height: 100px;
    position: relative;
    display: inline-block;
    background: orange;
}

#menu-top{
    width: 50%;
    height: 100px;
    position: relative;
    display: inline-block;
    background: green;
    left: 0;
}

I get a little blank space between the 2 divs, but I don't know how to remove it... Also, if I set the second one with Width: 49%, it works... But with 50% it doesnt, I Guess it's because that little blank space betweem them.

How to make it work ?

Answer 1

you need to use the following:

#top-menu{
    width: 100%;
    height: 100px;
    position: relative;
    border: 1px solid black;
    background-color: #A3238E;
}

#logo{
    width: 50%;
    float:left;
    height: 100px;
    position: relative;
    display: inline-block;
    background: orange;
}

#menu-top{
    width: 49%;
    float:left;
    height: 100px;
    position: relative;
    display: inline-block;
    background: green;
    left: 0;
}

Noticed I added float:left; to the two divs that you want side by side. Then on your html use the following:

<div id="top-menu">
   <div id="logo"></div>            
   <div id="menu-top"></div>
   <div style="clear:both;"></div>
</div>

Notice I added <div style="clear:both;"></div> which will clear the float:left;. You can use <div style="clear:left;"></div> to do the same thing if you would like.

Answer 2

Simply add float: right; to #menu-top: http://jsfiddle.net/n5md7/

Answer 3

The issue is because of inline-block: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Replace display: inline-block; with float: left;

.. and then you can add overflow: hidden to the #top-menu to clear the floats.

UPDATE:

You'll probably need to remove height: 100px from #top-menu to use the overflow: hidden clearfix technique.

Answer 4

• http://jsfiddle.net/UbQq9/

#top-menu{
    width: 100%;
    height: 100px;
    position: relative;
    border: 1px solid black;
    background-color: #A3238E;
    display: table;
}

#logo{
    width: 50%;
    height: 100px;
    position: relative;
    display: table-cell;
    background: orange;
}

#menu-top{
    width: 50%;
    height: 100px;
    position: relative;
    display: table-cell;
    background: green;
}