How do you make these div elements display correctly?

Question

I want to get div1 and div2 align horizontally but if I use display: inline-block there is a margin between these divs.

This is my html

<div>     
      <div id="content1">
        <div id="div1">contenido1</div>
        <div id="div2">contenido2</div>        
      </div>
      <div id="content2">contenido3</div>
</div>

and the CSS:

#content1
{
    background-color:green;
    width: 800px;   
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}
#content2
{
    background-color:purple;
    width: 800px;
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}
#div1
{
    background-color:brown;
    width: 600px;
    border: 0px;    
    padding: 0px;
    margin: 0px;
    display: inline-block;
}
#div2
{
    background-color:blue;
    width: 200px;
    border: 0px;
    padding: 0px;
    margin: 0px;    
    display: inline-block;
}
#div3
{
    background-color:yellow;
    width: 600px;
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}

How can this be done in CSS? I dont know what to do.

Display: inline-block produces some white space. Here's a link which might help you: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — TheFrozenOne, Aug 05 '14 at 15:56
possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Paulie_D, Aug 05 '14 at 15:59

score 1 · Accepted Answer · answered Aug 05 '14 at 15:58

The problem is that whitespace in inline content always (logically) collapses to a single space in the current font, like it does with regular text.

Easy solutions in no particular order:

Apply font-size:0 to the parent container and reset it on the children.
Eliminate the whitespace from the source, ie. <div id="div1">contenido1</div><div id="div2">contenido2</div>
Use float:left instead, and accept the resulting mess with clearing elements.

If you have HTML-level control solution 2 is most practical, if it's a complex 3rd party template solution 1 is easiest since it only requires CSS overrides, and if you're developing something yourself solution 3 might be easiest depending on the rest of the layout.

score 0 · Answer 2 · answered Aug 05 '14 at 15:58

Why not float the two div's with overflow:hidden on the container to control the float:

Demo Fiddle

#content1
{
    background-color:green;
    width: 800px;   
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
    overflow:auto;
}
#content2
{
    background-color:purple;
    width: 800px;
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}
#div1
{
    background-color:brown;
    width: 600px;
    border: 0px;    
    padding: 0px;
    margin: 0px;
    float:left;
}
#div2
{
    background-color:blue;
    width: 200px;
    border: 0px;
    padding: 0px;
    margin: 0px;    
    float:left;
}

misterManSam · Answer 3 · 2014-08-05T16:08:52.260

This is how inline-block elements behave. This link from the comments above explains some solutions nicely.

As an alternative, however, this is a nice place to use display: table. This way, whitespace in the markup does not affect how elements are displayed.

In this example:

#content1 as the parent of the columns is given display: table;
#div1 and #div2 are given display: table-cell; to align them next to each other.

jsBin Example!

More information from the w3.org wiki.

CSS

#content1
{
    background-color:green;
    width: 800px;   
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
    display: table;
}
#content2
{
    background-color:purple;
    width: 800px;
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}
#div1
{
    background-color:brown;
    width: 600px;
    border: 0px;    
    padding: 0px;
    margin: 0px;
    display: table-cell;
    vertical-align: top;
}
#div2
{
    background-color:blue;
    width: 200px;
    border: 0px;
    padding: 0px;
    margin: 0px;    
    display: table-cell;
    vertical-align: top;
}
#div3
{
    background-color:yellow;
    width: 600px;
    border: 0px;    
    padding: 0px;
    margin: 0px auto;
}

How do you make these div elements display correctly?

3 Answers3

Demo Fiddle