CODEWITHSUNDEEP
csscss-position
Dims
Dims

Reputation: 51009

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???

Upvotes: 2

Views: 11071

Answers (7)

JohaanThejus
JohaanThejus

Reputation: 11

just add these two property for your body:

body{ margin: 0px; padding: 0px; }

by the way, I should also mention that if you are using a margin for your div then this wont work the margin on your div must be removed

EDIT:

I just looked through your code more and saw that you are using a margin for some. sorry, what I meant was "if you have margin you don't want on your div".

Upvotes: 0

hashchange
hashchange

Reputation: 7225

I found your question to be a bit confusing, to be honest. If I have understood you correctly, aligning stuff the way you describe it is simple, to the point of being trivial, with float and clear.

#outer {
    width=100%;
}

#first {
    background-color: red;
    width:100px;

    float: right; 
    margin-right:10px;
}

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

    clear: right;
}

#third {
    background-color: yellow;
    width:100px;

    margin-left: auto;
    margin-right: auto;
}

Is that what you wanted to achieve? Here's the fiddle.

Upvotes: 0

Asons
Asons

Reputation: 87191

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>

Upvotes: 3

Irshad
Irshad

Reputation: 222

UPDATED
Add margin-left: 100px; according to your need. It should work for you.
Take a look

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

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

#second {
    position: relative;
    background-color: green;
    width:100px;
    float:left;
}
<div id="outer">
    
    <div id="first">&nbsp;</div>
    
    <div id="second">&nbsp;</div>
    
</div>

Upvotes: -1

Nenad Vracar
Nenad Vracar

Reputation: 122027

I think this is best solution https://jsfiddle.net/vm3Lg835/6/

CSS

#outer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column; 
    flex-direction: column;
}

#first {
    background-color: red;
    width:100px;
    right:10px;
    align-self: flex-end;
    margin-right: 10px;
}

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

Upvotes: 1

andrrs
andrrs

Reputation: 2309

I would probably wrap it in another relative div that has text-align:right and then give first display:inline-block:

https://jsfiddle.net/aqvug8uj/2/

Upvotes: 3

Ajit Kumar Singh
Ajit Kumar Singh

Reputation: 357

Use the following code: HTML:

<div id="outer">
    <div id="first">&nbsp;</div>

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

    <div class="clearboth"></div>
</div>

CSS:

#outer {
    position: absolute;
}

#first {
    background-color: red;
    width:100px;
    float: left;
}

#second {
    background-color: green;
    width:100px;
    float: right;
}

.clearboth
{
    clear: both;
}

Upvotes: -1

Related Questions