How to prevent inline divs from jumping to the next line within a parent?

css, html

Solution

You can use `position: absolute;` for this, else no other way except increasing your container div width or making it `nowrap`

Demo

Using `z-index` Demo

CSS

.a {
    width: 100px;
    height: 50px;
    border: solid 1px #345;
    position: relative;
}

.b {
    width: 60px;    
    height: 50px;
    background-color: red;
}
.c {
    width: 50px;    
    height: 50px;
    background-color: green;
    position: absolute;
    right: 0;
    top: 0;
}

Problem

I have two inline divs which exceed in width the parent's width. Therefore the second div jumps to the next line: http://jsfiddle.net/uVqG6/2/ How can I keep both divs on the same line? Adding `overflow:hidden;` to div.a simply hides the second div.

Original source

Related problems