CSS | Center one div and position two divs, one on each side

Question

I need to position divs as follows:

The div2 element must be centered.

The div3 element must be with 30px space between div3 finishes and div2 starts.

The div4 element bust be with 30px space between div2 finishes and div4 starts.

I need some help cause i don't know how to achieve so..

Answer 1

You really should have added some of your tries in html and css. But i go in for an answer, because you drew what you wanted to achieve.

The biggest problem with your question is, that you did not give enough information. I think you try to have the given layout, with 3 centered <div>s of unknown width.

You can solve this with flexbox. Here is one possible answer to your question:

HTML:

<div class="container">
    <div class="left">Text</div>
    <div class="center">More text</div>
    <div class="right">Some text</div>
</div>

(relevant) CSS:

.container
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container > div
{
    margin: 0 15px;
    flex: 0 0 auto;
}

Full demo: http://jsfiddle.net/vk4Lqvo7/1/

Answer 2

Another option would be to position your div1 relative while applying absolute positioning to the div2,div3, & div4. Here is a simple example: http://jsfiddle.net/clarketm/k9tbjjoy/2/

HTML

<div id="div1">
    <div class="insideDiv" id="div2"></div>
    <div class="insideDiv" id="div3"></div>
    <div class="insideDiv" id="div4"></div>
</div>

CSS

#div1 {
    width: 100px;
    height: 100px;
    background-color: black;
    position: relative;
}

.insideDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    width: 10px;
    height: 10px;

}
#div2 {
    margin: -5px 0 0 -5px;
    background-color: green;

}

#div3 {
    margin: -5px 0 0 25px;
    background-color: red;

}

#div4 {
    margin: -5px 0 0 -35px;
    background-color: blue;

}