CODEWITHSUNDEEP
css
user3746998
user3746998

Reputation:

css - stick divs to a central div that has left absolute position

Is there a way to stick a div (#divA) to another div (#divB) that has left absolute position in pure CSS without javascript?

For example:

#divB {
    position: absolute;
    left: 100px;
}

I want that the #divA is attached to the left side of the #divB,
also if I dynamically increase the #divB left...

Update: my final objective is to manage the position of the others divs,
basing on the position of the div in the middle (div B in the picture)
staying sticked on it:

img http://www.sumoware.com/images/temp/xzpsxdkdnccotgoe.png

Upvotes: 0

Views: 99

Answers (2)

Bill
Bill

Reputation: 3

Making something absolute takes it out of the normal flow. A block element gets its context from its nearest positioned ancestor(ie:fixed,absolute, or relative) element. One more thing to watch out for is inheriting unwanted margins, paddings, and borders. That being said... According to your diagram you have a containing element, which you should use to position your 'set' of elements where you want. Putting "container -> subdivs = display:inline-block" allows you to dynamically add as many divs as you want. If something covers more than 1 element, make a class or direct it towards the children of an element. If it concerns 1 element, you may be better off with an Id. You can now absolutely position your desired sub and float the others... Also, in order for empty divs to 'show' they must be positioned(or floating) and have a dimension.

        #container{position:relative;padding:0px;margin:0px;
        top:0px;left:400px;width:300px;height:105px;}
        #container div{display:inline-block;}
        .sub{width:100px;height:100px;padding:0;display:inline-block;}
        #subA{float:left;background-color:red;}
        #subB{position:absolute;left:100px;background-color:yellow;}
        #subC{float:right;background-color:green;}

<div id="container">
    <div id="subA" class="sub"></div>
    <div id="subB" class="sub"></div>
    <div id="subC" class="sub"></div>   
</div>

Upvotes: 0

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

Just use absolute positioning with offsets of 100% to stick to the sides of the originator.

HTML:

<div id="a">
    <div id="b">
    </div>
    <div id="c">
    </div>
</div>

CSS:

div {
    position:absolute;
    height:50px;
    width:50px;
}
#a {
    left:100px;
    background:red;
}
#b {
    right:100%;
    background:blue;
}
#c {
    background:green;
    left:100%;
}

Will give you exactly what you want.

Upvotes: 3

Related Questions