Position a div container on the right side

Question

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

User · Accepted Answer

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       lt div id  wrapper  gt       lt div id  c1  gt con1 lt  div gt       lt div id  c2  gt con2 lt  div gt   lt  div gt

User · Answer

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

User · Answer

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      lt div id  wrapper  gt       lt div id  c1  gt con1 lt  div gt       lt div id  c2  gt con2 lt  div gt   lt  div gt

User · Answer

This works for me    lt div style  position  relative width 100    gt       lt div style  position absolute left 0px background-color red width 25  height 100px   gt        This will be on the left      lt  div gt        lt div style  position absolute right 0px background-color blue width 25  height 100px   gt        This will be on the right      lt  div gt   lt  div gt

User · Answer

if you don t want to use float   lt div style  text-align right  margin 0px auto 0px auto   gt   lt p gt  Hello  lt  p gt   lt  div gt     lt div style    gt   lt p gt  Hello  lt  p gt   lt  div gt

[css] Position a div container on the right side

Examples related to css