How to make a div next to each other in CSS

Question

I need to make a div next to each other, but I don't know how.

All of them are inside of a section.

My code:

HTML:

<section id="corpo">
    <h1><center>Informatize seu negócio!</h1>

    <div id="status">
    <div class="secoes">
    <h1>Seu negócio</h1>
    <h2>Informatizado</h2>
    </div>

    <div class="secoes">
    <h1>Encomende um</h1>
    <h2>Sistema</h2>    
    </div>

    <div class="secoes">
    <h1>Treinamos sua</h1>
    <h2>Equipe</h2>
    </div>
    </div>
  </section>

CSS:

div.secoes{
    width: 422.906px;
    height: 92px;
    text-align: center;
    overflow:hidden;
    *zoom:1;
    margin:0 0 5.8rem;
    display:block;
}

section#corpo div#status{
    width: 1270px;
    height: 225px;
}

How can I make them next to each other?

What I'm getting:

Answer 1

There's a few ways you could do this, each with their own drawbacks.

Probably the most common way would be to use float: left (or float: right):

div.secoes{
    width: 422.906px;
    height: 92px;
    text-align: center;
    overflow:hidden;
    *zoom:1;
    margin:0 0 5.8rem;
    display:block;
    float: left;
}

section#corpo div#status{
    width: 1270px;
    height: 225px;
}

<section id="corpo">
    <h1><center>Informatize seu negócio!</h1>

    <div id="status">
    <div class="secoes">
    <h1>Seu negócio</h1>
    <h2>Informatizado</h2>
    </div>

    <div class="secoes">
    <h1>Encomende um</h1>
    <h2>Sistema</h2>    
    </div>

    <div class="secoes">
    <h1>Treinamos sua</h1>
    <h2>Equipe</h2>
    </div>
    </div>
  </section>

This has the unfortunate effect of taking all three div.secoes out of the flow of the document though. This means that unless you clear them (clearfix) the parent element, div#status, would have no height. Not a big issue (since it can be fixed), but annoying.

Another way to fix it would be to set the div's to inline-block:

div.secoes{
    width: 422.906px;
    height: 92px;
    text-align: center;
    overflow:hidden;
    *zoom:1;
    margin:0 0 5.8rem;
    display:inline-block;
}

section#corpo div#status{
    width: 1270px;
    height: 225px;
}

<section id="corpo">
    <h1><center>Informatize seu negócio!</h1>

    <div id="status"><div class="secoes">
    <h1>Seu negócio</h1>
    <h2>Informatizado</h2>
    </div><div class="secoes">
    <h1>Encomende um</h1>
    <h2>Sistema</h2>    
    </div><div class="secoes">
    <h1>Treinamos sua</h1>
    <h2>Equipe</h2>
    </div>
    </div>
  </section>

This has it's own issues. Mainly that since it is a combination of inline and block it inherits an annoying trait from display: inline. That is, it preserves some measure of whitespace. It's fairly simple to be rid of (getting rid of inline-block whitespace), but, once again, it's annoying. (I used one of the methods described in the link - putting the opening tag on the same line as the element before.)

The final method (there are others, but I'm only going over three) is to use display: flex:

div.secoes{
    width: 422.906px;
    height: 92px;
    text-align: center;
    overflow:hidden;
    *zoom:1;
    margin:0 0 5.8rem;
    display:block;
}

section#corpo div#status{
    width: 1270px;
    height: 225px;
}

div#status {
    display: flex;
}

<section id="corpo">
    <h1><center>Informatize seu negócio!</h1>

    <div id="status">
    <div class="secoes">
    <h1>Seu negócio</h1>
    <h2>Informatizado</h2>
    </div>

    <div class="secoes">
    <h1>Encomende um</h1>
    <h2>Sistema</h2>    
    </div>

    <div class="secoes">
    <h1>Treinamos sua</h1>
    <h2>Equipe</h2>
    </div>
    </div>
  </section>

This is by far the best method, if you don't need particularly robust browser support. If you don't need to support IE9 and don't mind prefixes then this is by far the easiest way get what you want. It even makes floating the internal divs have no effect (so if you wanted to use both methods one and three you could support new and old browsers). By default it simply lines them up next to each other, but if you care to you can make them fill their parent completely (simply put flex: 1 in the children). With this method you could even remove the width on div.secoes. This is by far my favorite method.

There's three methods that work fairly well. Though all of them have drawbacks between them you can find a solution for just about anything.

Answer 2

An alternate would be to use "inline-block":

div.secoes {
...
display: inline-block;
}

Like the name says the elements are block elements but inline. If you use "float" you have to clear the float after your floatet content.

Answer 3

You need to add a 'float' to get your DIVS to stack on the same line. Try the updated CSS below. Note that the 'left' in float means that the DIVs will stack to the left side first - you can try 'right' to see the difference that makes too.

div.secoes{
    width: 422.906px;
    height: 92px;
    text-align: center;
    overflow:hidden;
    *zoom:1;
    margin:0 0 5.8rem;
    display:block;
    float: left;

}

section#corpo div#status{
    width: 1270px;
    height: 225px;
}