-1

Assume I have this codes:

<div class="mother">
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
    <br>
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
</div>

And the css:

.r {
    display: inline;
}
.l {
    display: inline;
}

I want all of the .r <div>s to be rendered at the right side of .mother and all of the .l <div>s at the left side. something like float: right/left;

but I don't want to use float. I want to use a smart text-align.

I tried text-align; right/left; for .mother but all of them will have the same align, all left or all right. How can I tell .mother that your text-align must be left for .ls and right for .rs?

AHB
  • 212
  • 2
  • 10
  • something like [this](http://codepen.io/danield770/pen/RrpddB)? - I just removed the `display:inline` – Danield Jan 07 '16 at 07:43

5 Answers5

1

Just remove display:inline - text-align won't work here because the width of the element shrinks to fit the text - so there's no room to align anything.

Codepen demo using text-align

.r {
  text-align: right;
}
.l {
  text-align: left;
}
<div class="mother">
  <div class="r">r
  </div>
  <br>
  <div class="l">l
  </div>
  <br>
  <div class="r">r
  </div>
  <br>
  <div class="l">l
  </div>
</div>

Another way of doing this (without floats or absolute positioning) is with flexbox (NB: This method should only be used if - for some reason - the above method is inadequate)

Codepen demo using flexbox

.mother {
  display: flex;
  flex-direction: column;
}
.r {
  align-self: flex-end;
}
<div class="mother">
  <div class="r">r
  </div>
  <br>
  <div class="l">l
  </div>
  <br>
  <div class="r">r
  </div>
  <br>
  <div class="l">l
  </div>
</div>
Danield
  • 121,619
  • 37
  • 226
  • 255
1

Try This

.mother{width:200px}
.r {
    display: table;
    text-align: right;
    width: 100%;
}
.l {
    display: table;
    text-align: left;
    width: 100%;
}
<div class="mother">
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
    <br>
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
</div>
Shurvir Mori
  • 2,288
  • 1
  • 17
  • 29
0

You css is wrong. Use .before r and l as it is class. And give float:left to .l and float:right to .r.

.l {
    float: left;
}
.r, .l {
    display: inline;
}

.r {
    float: right;
}
<div class="mother">
    <div class="r">r
    </div>
    <div class="l">l
    </div>
    <div class="r">r
    </div>
    <div class="l">l
    </div>
</div>

Working Fiddle

ketan
  • 19,129
  • 42
  • 60
  • 98
  • Is there anyway **without float**? :( I mean using `text-align` but the smart way I told. – AHB Jan 07 '16 at 07:16
  • So, i think you should use `position:absolute` and should make changes in html. – ketan Jan 07 '16 at 07:22
0

change display to inline-block

.r, .l {
    display: inline-block;
}
.l {
    float: left;
}
.r {
    float: right;
}

and clear float of div.mother

.mother:after{
  display: block;
  content: " ";
  clear: both;
  height: 0;
  overflow: hidden;
}
lee
  • 111
  • 3
0

try this:

    .r,.l {
        display: inline;
        clear:both;}

    .r {float:right;}
    .l {float:left;}
<div class="mother">
    <div class="r">
    Right
    </div>
    <div class="l">
    Left
    </div>
    <div class="r">
    Right
    </div>
    <div class="l">
    Left
    </div>
</div>

When you float the elements, left or to the right, it creates an empty space on the other side which allows other elements to take up the remaining space. The clear property specifies on which sides of an element floating elements are not allowed to float.

and also read this: What does the CSS rule clear: both do?

Community
  • 1
  • 1
user5756166
  • 1
  • 1
  • `float: left/right;` has no effect on `display: inline;` elements! and your snippet is empty. – AHB Jan 07 '16 at 07:43