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

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

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.

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>

Related

How to resize the width of div left to another which has float:left;?

I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!

Display relative containers (with variable height) below each other

I have some relatively positioned containers (that vary in height) and I want to display them under each other. What's happening is they are displaying on top of each other (see fiddle).
I am using position:relative on the containers because I want the child elements to have position:absolute and display relative to their container. I think there is probably a quick fix with a fixed height for example but that isn't very flexible, my containers (or their children) will vary in height.
Desired result - fiddle
Actual result - fiddle
Code:
<style type="text/css">
.outside
{
position:relative;
border:1px solid red;
}
.inside
{
position:absolute;
top:0;
left:0;
}
</style>
<div class="outside">
<div class="inside"><p>absolute 1</p></div>
</div>
<div class="outside">
<div class="inside"><p>absolute 2</p></div>
</div>
<div class="outside">
<div class="inside"><p>absolute 3</p></div>
</div>
When you position something absolute inside a relative element, this relative element won't take in consideration the width or height of the absolute element, so just add a height:30px; - DEMO -
If you do not wish to have a fixed height, then use at least a min-height. - DEMO -
The problem you are having is that your outside containers have no dimension because the inside divs are absolutely positioned.
Since you say these are variable height containers, I know of no way to fix this.
What's wrong with the 'desired result' fiddle? It seems that you are trying to recreate the default behavior of how boxes are rendered.

Text in floated div

The situation is:
HTML:
<div id="main">
<div id="a"></div>
<div id="b">Some Text</div>
</div>
CSS:
#a{
float:left;
width:800px;
height:150px;
background-color:#CCC;
}
#b{
width:1000px;
height:100px;
background-color:#9CC;
}
The result:
Why doesn't the text go behind div#a ? Why does "Some Text" behave as if div#a is still in the normal flow? How to force the text to act as expected (to go under div#a) ?
UPDATE:
When I mean under, I mean beneath on the Z axis, not on the Y. The div's should stay in this position, the only part that needs moving is the text.
http://www.w3.org/wiki/CSS/Properties/float
• leftThe element generates a block box that is floated to the left.
Content flows on the right side of the box, starting at the top.
The content of #b is acting as it should. It floats to the right side of the floated element preceding it.
Thus, if you want a 'layered' effect, use a CSS declaration that will provide it properly: position
Note: to keep #a positioned to it's parent, rather than <body>:
#main { position:relative }
#a { position:absolute }
If you float one element, the next element will "touch" it if there is place for it and it is a block level element (native or set by CSS).
If you want the elements "not" next to each other, than don't use float! Keep in mind that they have to be block level to go underneath each other.
Float does not "lift" element up, like for example position: absolute would do.
check out this:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I think z-index statement may also be useful
ADDENDUM
<style type="text/css">
<!--
#id {
position:relative;
}
#a{
/* float:left; */
position: absolute;
top:0%;
left0%;
width:800px;
height:150px;
background-color:#CCC;
z-indez:1;
}
#b{
position: absolute;
top:0%;
left0%;
width:1000px;
height:100px;
background-color:#9CC;
z-index:-1;
}
does the trick (in chrome, ff, IE6 ) I couldn't get it to work until I gave id=b a negative z index trust thats helpful
The floated element floats to the left of non-floated elements like the blue element. To force the blue element below the floated element, you could apply clear: left; to it.
If both of your div ID's have float:left assigned then the second div #b will follow suit and go beneath #a
Add this code:
float:left;
to #b style
Give display block to both #a, #b

Unwanted margin on float

How can i fix the unwanted margin of the "right" div.
The right floated div is margined like you can see here:
JSFIDDLE: http://jsfiddle.net/s9Ssh/1/
The effect i wanted to achieve is to keep .mid layer always centered no matter the lenght of side div's text.
HTML:
<div class="main">
<div class="left">left</div>
<div class="mid">
Vpis podjetja
|
Iskanje
</div>
<div class="right">right</div>
CSS:
.main {
text-align:center;
width:100%;
}
.left {
float:left;
}
.mid {
}
.right {
float:right;
}
Maybe this will help: http://jsfiddle.net/sbhomra/s9Ssh/4/
I have basically absolutely positioned the left and right div's and set the middle div to stay in the center by using margin:0 auto.
Edit
Fixed padding on left and right div's, so they are not too close the side of the page.
http://jsfiddle.net/s9Ssh/3/
Move the right floated element before the middle element in the markup. It appears on a new row because the middle element isn't floated (and is a block level element).
Alternatively you can also float the middle element or set it to inline/inline-block.
EDIT: Although to clarify, if you float the mid element then you have to fiddle around with css a little since it will break your text-align. :P
try to add display: inline-block; to .mid element
example fiddle : http://jsfiddle.net/XSdJA/

2 Relative Positioned Divs?

I have a container div that has relative positioning, then another div inside that also has relative positioning:
<div class="first">
<div class="second">
<img src="img.jpg" />
</div>
</div>
I would like an image with absolute positioning to be relative to the "second" div not the "first". But I need them both to have relative positioning, how do I specify so the image is relative to the "second" div?
In the page hierarchy the image would be relative to .second; however, you must define the parent to be relatively positioned for the child to care.
see: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
.second { position:relative; }
.second img { position:absolute; top:0; left: 0 }
It is relative to the second <div> automatically according to the CSS standards, since it is nested in the second <div> and that div is positioned. Here is a quote from the CSS2 standard:
The containing block for a positioned box is established by the nearest positioned ancestor
So you count upwards in the DOM tree, i.e. from the nearest ancestor towards the document root, and stop at the first positioned ancestor (and if there isn't one, then it's the closest container, but that doesn't apply here). In this case, that will be div.second like you want.
.second img{ position:absolute; top:0; left:0; }
The positioning is just an example; you can change it to suit your needs.

Resources