On a project I have four absolutely positioned elements on a page that sit inside an absolutely positioned container (the latter in order to align them relative to the viewport’s bottom, while more content will follow below the viewport). The four elements are next to each other and do not overlap.
Is there a way to (dynamically) center the four elements inside their absolutely positioned parent? I know it sounds weird, since absolute positioning means exactly no automatic placement.
Dynamically would mean that responsively the elements change both size and position at a certain breakpoint, but should still be centered horizontally in the viewport at all times.
I could think of a solution like this with an additional inner div, but didn’t get my head around to actually solving the puzzle, since I don’t know a good way for the inner div to grab the total width of its four absolutely positioned child elements:
<div class="myAbsoluteContainer">
<div class"myInnerDivForCentering">
<div class="myAbsoluteChildElement" id="child1"></div>
<div class="myAbsoluteChildElement" id="child2"></div>
<div class="myAbsoluteChildElement" id="child3"></div>
<div class="myAbsoluteChildElement" id="child4"></div>
</div>
</div>
I am not sure why you need to absolutely position the children. Is this what you are trying to achieve: http://jsfiddle.net/k65pxydx ?
.myAbsoluteContainer {
text-align: center; /* Centers the elements horizontally */
}
.myAbsoluteChildElement {
display: inline-block;
vertical-align: middle; /* Centers the elements vertically */
}
Related
Setting two DIVs to width: 50% and the first one to float: right;, why does the left column get laid out higher in the viewport?
<body>
<div id="right" style="float: right; width: 50%;">
<h1>Right H1 margin to div</h1>
</div>
<div id="left" style="width: 50%;">
<h1>Left H1 margin to html/initial containing block</h1>
</div>
</body>
Documentation
https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block describes how to identify the containing block. The default value of position is position: static;, so do they both have their parent DIV as the containing block? The left column extends its margin to the viewport instead of the DIV or BODY.
I see various questions asking about two-column layouts, e.g.
What's the containing block of floated elements? .
I can top-justify the left and right side by float:left on the second div, but I don't understand the margins. Using the Chrome developer tools to look at the margins, I combined screenshots to produce the following two figures. First, the CSS box model for the two H1 elements.
Then here is the top margin of five elements (the H1s and the DIVs and BODY as well) shown against the gray line as the top of the viewport for all five elements.
So I can see that the right H1 element (first in HTML) has a margin to the top of the BODY's content box, while the left H1 element (second in HTML) has the margin extending to the top of the viewport, collapsed with the BODY's margin maybe but also extending beyond it. Please help me understand how the specs in the docs correspond to this behavior.
I have 2 elements beside each other by floating right and left.
the right element width is dynamic by padding of children elements which increase or decrease dynamically! but the left element is a simple DIV. I want it's width to change according to the right element width. how can it be done by CSS ?
example :
<div style="float:left"></div>
<div style="float:right;padding:5px 10px;">
<a>child1</a>
<a>child2</a>
<a>child3</a>
</div>
I am not 100% sure what you are trying to achieve, but if I understand right:
you have an area A in wich you are floating the right element with the 3 children
the rest of area A you want to fill with the left element
Is this correct?
Well the easiest way would be to wrap an inline-block element around the right element, that represents the whole A area and the right element floats on the right side of this parent element. Then all properties you assign to parent are going to represent the area A that is not covered by the right element. For example background color:
<div style="display:inline-block; width:100%; background-color:blue;">
<div style="float:right; right:0; padding:5px 10px; background-color:yellow;">
<a>child1</a>
<a>child2</a>
<a>child3</a>
</div>
</div>
Here you can see the result on jsfiddle: http://jsfiddle.net/rKQXJ/
I'm having a little issue with couple of DIVs.
I need two DIVs to be positioned in exactly same place, and toggle them. As one div disappear, another should appear. This I will do using jQuery toggle().
The issue is that both DIVs should be part of the page flow and positioned exactly the same way. How I would achieve that?
So, there is some previous div, that occupies some place, has relative positioning and non-fixed sizes (dependent on window measures)
<div class="header">
... </div>
Then my div
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; ">
... </div>
and other my DIV
<div id="aboutDiv" >
This is ABOUT
</div>
Two later divs should occupy the same place. What positioning tags I could use?
The design adjusts to the window size due to flexible element -- very first DIV "header", so no absolute positioning is possible.
just put them one after another
<div id="galleria" style="height:700px;width:920px; margin:0 auto; border:1px solid green; "> ... </div>
<div id="aboutDiv" >
This is ABOUT
</div>
both should be positioned relative , when one is hidden then other will move up and they will be in the same place - as long as you are using toggle to always have one hidden and one shown
You either need a relatively positioned parent container with absolutely positioned children, or hide one and show the other when its faded out completely
I have two <div> elements inside a container <div> and I need to align one of them on the left of the container, and the other in the center of the container while keeping them inline.
If I just float the first one left, the second one gets pushed off-center to the right.
Right now my best solution is to make the container position: relative with text-align: center and align the first element to left with position: absolute.
Perhaps there is an alternative, better way to do this, without going for absolute positions?
This is a really long shot, but i've found that applying a big negative margin-right on the left floated element will compensate on the center-offset...
try giving the floated div a margin-right: -1000px;
Is there a restriction for two div in a div? You could make 4 divs:
<div id="one">
<div id="first"></div>
<div id="two">
<div id="second"></div>
</div>
</div>
And apply float: left to #first and #two and then margin: auto the #second
Im having trouble vertical aligning 2 divs inside a 100% height div. I googled but failed solving.
pseudocode:
<div container, fixed height>
<img, dynamic height/>
<div inner, 100% height>
<div><img/></div>
<div><img/></div>
</div>
</div>
The two divs in the inner div, i want them to be in the vertical center of the inner div, but i cant find a way. its not possible to know the height of the inner div, its just set to 100% because of the random height of the image above it. The divs inside the inner div will also have dynamic heights.
2 hours of fiddling around gave no results, so im coming here.
The page where you can see it in action: http://pyntmeg.no/?iframe
You can give the parent DIV.container a position :relative property since it has a fixed height.
The inner div can then have a position:absolute and you set its height to 100% or maybe a little lower. you can use the top property to move it around.
Try:
.item {
position: relative;
top: 10%;
}
You may need to adjust top: 10%;
As long as the parent/grandparent divs have the width to work with it you can apply 'float: left' to the grandchild divs style.
vertical-align is meant for table elements, not regular divs, etc. In order to get vertical-align middle to work, the element needs to be set to display:table-cell and it's parent needs to be set to display:table-row
Be careful with that, though, because it really does change the way the element interacts with it's sibling elements, and it could definitely change how your page is laid out.
The best use of this would be something like this:
<div class="table-row">
<div class="td">lorem ipsum</div>
<div class="td">dolor sit amat</div>
</div>
Css:
.table-row {display: table-row}
.td {display: table-cell; vertical-align: middle;}
NOTE
This will not work with elements that are floated left/right, and it will change how the border width effects the overall width of the element.
I would only use this with tabular data, much like I would suggest only using a table.