How to Combine Position: Relative and Float: Left

Can I combine position: relative and float: left?

Yes.

CSS2.1, 9.4.3:

"Once a box has been laid out according to the normal flow or floated,
it may be shifted relative to this position. This is called relative positioning"

Combine float and absolute position

Using relative positioning almost solves your issue. However, it leaves gaps between events:

Fiddle #1

The only way I know to solve this problem is using absolute positioning, with JavaScript determining top and left coordinates:

var events= [].slice.call(document.querySelectorAll('.container div')),
                //array of event elements. See http://davidwalsh.name/nodelist-array
    count= [],  //running total of events during an hour. used to calculate left offset.
    i,          //loop through the events
    time,       //event time as array, such as ['6','AM']
    hour,       //event hour (1 - 24)
    minute,     //event minute (0 - 59)
    offset;     //top offset based on hour and minute

events.sort(function(a,b) {
  return a.textContent < b.textContent ? -1 : 1;
});

for(i = 0 ; i < events.length ; i++) {
  time= events[i].textContent.split(' ');
  hour= time[0].split(':')[0] * 1;
  if(time[1]==='PM' && hour !== 12) {
    hour+= 12;
  }
  minute= time[0].split(':')[1] || 0;
  offset= hour+minute/60;
  count[hour]= (count[hour] || 0)+1;
  events[i].style.top= (offset-6)*50 + 'px';
  events[i].style.left= count[hour]*100-100 + 'px';
}

Fiddle #2

Note that this code needs some tweaking to avoid events covering up other events, as you'll in the Fiddle for 12:00 PM.

Float right and position absolute doesn't work together

Use

position:absolute; right: 0;

No need for float:right with absolute positioning

Also, make sure the parent element is set to position:relative;

Difference and impact of position:relative, position:absolute, and float

Position:absolute and float do not coincide. If you position an element absolutely it is then no longer "floating". i.e. absolutely positioned items (or fixed items) are taken out of the flow of the document.

It is generally better to position things statically or relatively unless necessary. Absolute positioning has its uses, but is not generally needed.

Relative positioning is useful when you need to position a child element relative to the parent. So if A is positioned relatively, then positioning B absolutely will mean it is placed based on A's position.

So:

A {
    position:relative;
}

B {
    position:absolute;
    top:30px;
    left:20px;
}

Will place B 30px from the top and 20px from the left of A's upper left corner.

Anything then positioned within B, will be based on B's position. If you have B1 inside B, it will be placed relative to B's position, either floated left or right, or positioned absolutely within B (unless it is position:fixed, which is always relative to the viewport).

Is that the sort of explanation you were after?

Moving an element surrounded by float left and right to next line

Using media queries: Fiddle

     header {
     border: 1px solid black; 
     padding-bottom: 50px;}
.pull-left, .pull-right {
     border: 1px solid red; 
     padding: 5px; margin: 5px}
.menu {
     border: 1px solid blue;
     position: absolute;
     margin-top: 50px;
     right: 0;
     left: 0px;}
@media (min-width: 768px) {
    .menu {
         position: relative;
         margin: 5px;
         width: auto;
     }
     header {
          padding-bottom: 0px;
}
}

Getting left and right floats to overlap instead of stack

You could use absolute positioning.

Instead of

float: right

use:

position: absolute;
right: 0;

and instead of

float: left

use:

position: absolute;
left: 0;

Be sure to set position: relative; on your parent divs so that the absolute positioning is relative to their respective containers instead of the page.

How can I get an absolute element to float right within its parent?

This should work for you.

ul{
    position:relative; // You need this
}

#absolute_position{
   position:absolute;
   right:0;
   bottom:0; 

}

How to place two divs next to each other?

Float one or both inner divs.

Floating one div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

or if you float both, you'll need to encourage the wrapper div to contain both the floated children, or it will think it's empty and not put the border around them

Floating both divs:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}