Search code examples
csshtmlalignment

Align 3 divs to the left of parent with some overlapping

I have this kind of structure coming from the following code. And I cannot achieve to do the following despite my efforts and reading.
In pure CSS, how may I force X to stick the right border of the container, being under Y2/Y1 divs ?

The container and C do not have a fixed width (I put a fixed width in the code for convenience). All the other ones have fixed width.

enter image description here

. I 

<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
BODY {
    font-family:Arial;
}

DIV.container {
    width:200px;
    height:20px;
    line-height:20px;
    font-size:9px;
    background-color:yellow;
}

DIV.BlocA {
    width:20px;
    background-color:#AAAAAA;

    float:left;
}

DIV.BlocB {
    width:20px;
    background-color:#999999;

    float:left;
}

DIV.BlocC {
    width:20px;
    background-color:#666666;

    float:left;
}

DIV.BlocX {
    padding-right:9px;
    width:50px;
    background-color:#00E9E9;
    text-align:center;

    float:right;

    -moz-opacity: 0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    filter:alpha(opacity=70);
}

DIV.BlocY1, DIV.BlocY2 {
    width:20px;

    float:right;
}
</style>
</HEAD>

<DIV class="container">
    <DIV class="BlocA">A</DIV>
    <DIV class="BlocB">B</DIV> 
    <DIV class="BlocC">C</DIV>
    <DIV class="BlocY1" style="background-color:red;">Y1</DIV>
    <DIV class="BlocY2" style="background-color:green;">Y2</DIV>
    <DIV class="BlocX">X</DIV>
</DIV>

</BODY>
</HTML>
Solution

  • I share with you the link that changed my life and how I deal with CSS positioning

    http://www.barelyfitz.com/screencast/html-training/css/positioning/

    To control which div is on top you may give them each a z-index. I would either float them all in a certain order or I would use position relative/absolute