How to position a div to right end of the container without absolute position and float?

Question

Is there any possibilities to position a div to the right of the container without use of absolute position and float? Whenever I use the float:right or position: absolute the container does not know about the floated or positioned element content height which leads to layout issues.

I tried setting fixed height to the floated or positioned element then adding padding-bottom to the height of the floated or positioned element.

.container{
  padding-bottom: 20px;
}

.container .float_right{
   float: right;
   height: 20px;
}

Even though it is okay but I am looking for better solution than this. Can anyone here tell me if there are any other solution to the problem?

score 3 · Accepted Answer · edited May 23 '17 at 12:18

3

Just add overflow: hidden; to the .container, read more here

.container{
  padding-bottom: 20px;
  overflow: hidden;
}

.container .float_right{
   float: right;
   height: 20px; /* no longer necessary */
}

I've kept you're padding-top and height styles in order to see the effect of overflow: hidden;. No fixed height is needed.

codepen

edited May 23 '17 at 12:18

Community

1
1

answered May 15 '17 at 10:31

Colby Sargent

341
2
6

Thanks for your answer. I am looking for a solution which does not require me to use fixed height. – forethought May 15 '17 at 16:53
Works perfectly fine without a fixed height, trying changing the codepen around to test it out - I just kept all of your own styles in there – Colby Sargent May 15 '17 at 17:16

XYZ · Answer 2 · 2017-05-15T10:44:54.807

set .container styles text-align:right to parent

   .container{
      padding-bottom: 20px; 
      text-align:right;
      width:100%
    }

and

.container .float_right{
       //float: right;
       height: 20px;
       display:inline-block;
    }

.container{
  padding-bottom: 20px; 
  text-align:right;
  width:100%
}

.container .float_right{ 
   height: 20px;
   display:inline-block;
}

<div class="container">
  <div class="float_right">
    Right align div
  </div>
</div>

or by seting parent to display:flex and margin-left: auto; to child div

.container{
  padding-bottom: 20px;  
  width:100%;
  display:flex; 
}

.container .float_right{ 
   height: 20px; 
   margin-left: auto;
}

<div class="container">
      <div class="float_right">
        Right align div
      </div>
    </div>

or to fix the height of container you can add a div with class clear and set styles

.clear{
      clear:both;
  }

.container{
  padding-bottom: 20px; 
  background:red;
  width:100%
}

.container .float_right{
   float: right;
   height: 40px;

}
.clear{
   clear:both;
 }

<div class="container">
  <div class="float_right">
  float right
  </div>
  <div class="clear"></div>
</div>

Thanks for your answer. I cannot use flex because of IE8 support. I am looking for a solution which does not require me to use fixed height. — forethought, May 15 '17 at 16:53

score 0 · Answer 3 · answered May 16 '17 at 13:34

0

Even though, I have accepted the answer I think the following solution is a bit better than all other solutions because it does not require you to use padding-bottom on the container or height of the floated element.

.container:after{
      content: "";
      display: table;
      clear: both;
}

Apply the above code on the container element; this will solve the problem.

Credit to https://css-tricks.com/

answered May 16 '17 at 13:34

forethought

2,913
2
16
26

Thanks for accepting the answer but again to make sure you understand my answer fully, it **does not require** the `padding-bottom` or `height`. They were just to demonstrate it would not cause the layout issue you mentioned: _"the container does not know about the floated or positioned element content height which leads to layout issues."_ – Colby Sargent May 16 '17 at 23:01

How to position a div to right end of the container without absolute position and float?

3 Answers3