Position a div container on the right side
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:
Any idea how to achieve this using css?
Solution 1:
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:
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:
- 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:
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>