Position a div container on the right side

Css

Css Problem Overview


I want to develop some kind of utility bar. I can position each element in this bar side by side using float:left;

But I want the second element to be positioned at the very right of the bar. This is hard for me because the width of the bar is not static.

Have a look at my demo: http://jsfiddle.net/x5vyC/2/

It should look like this:

enter image description here

Any idea how to achieve this using css?

Css Solutions


Solution 1 - Css

Is this what you wanted? - http://jsfiddle.net/jomanlk/x5vyC/3/

Floats on both sides now

#wrapper{
    background:red;
    overflow:auto;
}
    
#c1{
   float:left;
   background:blue;
}

#c2{
    background:green;
    float:right;
}​

<div id="wrapper">
    <div id="c1">con1</div>
    <div id="c2">con2</div>
</div>​

Solution 2 - Css

Just wanna update this for beginners now you should definitly use flexbox to do that, it's more appropriate and work for responsive try this : http://jsfiddle.net/x5vyC/3957/

#wrapper{
  display:flex;
  justify-content:space-between;
  background:red;
}


#c1{
   background:blue;
}


#c2{
    background:green;
}

<div id="wrapper">
    <div id="c1">con1</div>
    <div id="c2">con2</div>
</div>​

Solution 3 - Css

  • Use float: right to.. float the second column to the.. right.
  • Use overflow: hidden to clear the floats so that the background color I just put in will be visible.

Live Demo

#wrapper{
    background:#000;
    overflow: hidden
}
#c1 {
   float:left;
   background:red;
}
#c2 {
    background:green;
    float: right
}

Solution 4 - Css

if you don't want to use float

<div style="text-align:right; margin:0px auto 0px auto;">
<p> Hello </p>
</div>
  <div style="">
<p> Hello </p>
</div>

Solution 5 - Css

I have one more solution other than float: right.

text-align: right;
padding: 10rem 3rem 2rem 3rem;
width: 58%;
align-items: end;
margin: 0px 0px 0px auto;

sometimes float does not work when we use width element for specific width at that time we can use the above code

Solution 6 - Css

This works for me.

<div style="position: relative;width:100%;">
	<div style="position:absolute;left:0px;background-color:red;width:25%;height:100px;">
	  This will be on the left
	</div>

	<div style="position:absolute;right:0px;background-color:blue;width:25%;height:100px;">
	  This will be on the right
	</div>
</div>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionUpCatView Question on Stackoverflow
Solution 1 - CssJohnPView Answer on Stackoverflow
Solution 2 - CssGrmsView Answer on Stackoverflow
Solution 3 - CssthirtydotView Answer on Stackoverflow
Solution 4 - CssansonView Answer on Stackoverflow
Solution 5 - Cssravina yadavView Answer on Stackoverflow
Solution 6 - CssJonny MousleyView Answer on Stackoverflow