Search code examples
csscss-position

How to align DIV right or left or center in CSS without absolute positioning?

I would like to position some DIV by it's distance from the right side of the container, or from the left side from the container, or centered; but everything without of excluding it from the flow, like absolute does.

Is it possible?

The only thing I can is centered. I can't believe this is not easily possible!

#outer {
    position: relative;
    width: 100%;
}

#first {
    position: relative;
    background-color: red;
    width: 100px;
    right: 10px;
}

#second {
    position: relative;
    background-color: green;
    width: 100px;
}

#third {
    position: relative;
    background-color: yellow;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

The sample is here: https://jsfiddle.net/dimskraft/vm3Lg835/8/

If I make absolute position, another DIV starts to ignore absoluted one...

UPDATE

Visual explanation of what I want:

enter image description here

UPDATE 2

Incredible!

Isn't this task have simple solution? Without any cheating / hacking??

I just want to set distance from right side. Why can't I do this with ONE property???

Solution

  • This one do what you ask, keeping the flow and your original html structure.

    I also added a "centered" div, which you commented might be needed.

    (As per request, I added a second group of 3 div's in below sample using margins only, and here is also a fiddle: http://jsfiddle.net/qxvoLr5u/2/)

    html, body {
    margin: 0;
}

#outer {
    width: 100%;
    text-align: right;
}
#first {
    display: inline-block;
    width: 100px;
    background-color: red;
    text-align: left;
    margin-right: 10px;
}
#second {
    background-color: green;
    width:100px;
    text-align: left;
}
#third {
    display: inline-block;
    background-color: yellow;
    width:100px;
    text-align: left;
    position: relative;
    right: 50%;
    margin-right: -50px;
}

/* sample 2 */

#outer2 div:before {
    content: attr(class);
}
.div1 {
    width: 100px;
    margin-left: auto;
    margin-right: 10px;
    background-color: red;
}
.div2 {
    width: 100px;
    margin-right: auto;
    background-color: green;
}
.div3 {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: yellow;
}
    <div id="outer">
    
    <div id="first">
        &nbsp;
    </div>
    
    <div id="second">
        &nbsp;
    </div>

    <div id="third">
        &nbsp;
    </div>
  
</div>

<br />
<hr />
As per request, these 3 divs use margin only<br />
<hr />

<div id="outer2">

  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>

</div>