Example HTML/CSS:
.wrapper {
width: 100%;
}
.container {
width: 400px;
margin: 0 auto;
border: 1px solid;
}
<div class="wrapper">
<div class="container">
<div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi libero veritatis dolores facere, eaque aspernatur, magnam repellendus eveniet, ullam magni accusamus accusantium itaque a illo totam vitae. In, earum quos.</div>
</div>
</div>
If there any chance to move left edge of .element to left edge of .wrapper, while its right edge stays snapped to right edge of .container. In other words, I want to override left margin of .container by adding some rules to .element. I've tried something like:
.element {
margin-left: -100%
}
But it moved the whole element, as I expected.
You could position the element absolutely relative to the .wrapper, and then use calc() to determine what 50% - 200px is:
Example Here - borders added for demonstration purposes..
.wrapper {
width: 100%;
position: relative;
}
.container {
width: 400px;
height: 60px;
margin: 0 auto;
border: 2px solid;
}
.element {
position: absolute;
left: 0;
right: calc(50% - 200px);
border: 2px solid #f00;
}
<div class="wrapper">
<div class="container">
<div class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi libero veritatis dolores facere, eaque aspernatur, magnam repellendus eveniet, ullam magni accusamus accusantium itaque a illo totam vitae. In, earum quos.</div>
</div>
</div>
You can set a position, but you will need javascript to calc the correct width.
.element {
position:absolute;
left:0;
}
JQuery
$( document ).ready(function() {
var w = ($(".container").outerWidth()/2) + $(".container").width();
$(".element").width(w);
});
Related
https://jsfiddle.net/d3yns9b6/ shows how max-width doesn't work when I want to set it to something larger than the containing element.
Since it's absolutely positioned it should be able to extend outside the containing element. If I set an exact value using width it works but then both pieces of text in the example are exactly that width.
I want them both to take up as little width as they need, up to a maximum of the amount I set (even if it exceeds the parent container).
.out {
position: relative;
width: 200px;
height: 400px;
background-color: blue;
}
.in {
position: absolute;
max-width: 600px;
background-color: yellow;
}
<div class="out">
<div class="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
</div>
<div class="in" style="margin-top:300px">
Lorem
</div>
</div>
Well, when no width is provided, it will fall back to auto, meaning it will use the width given by the parent element, regardless of absolute positioning or any max-width. So you need to specify any width, using percentage or relative units like vh or vw.
.out {
position: relative;
width: 200px;
height: 400px;
background-color: blue;
}
.in {
position: absolute;
width: 500%;
max-width: 600px;
}
.in > span {
background-color: yellow;
display: inline-block;
}
<div class="out">
<div class="in">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.</span>
</div>
<div class="in" style="margin-top:300px">
<span>Lorem</span>
</div>
</div>
You need to set the width with width and constrain it with max-width.
Something like this:
.in {
position: absolute;
width: 100vw;
max-width: 600px;
background-color: yellow;
}
This is the logical behavior of absolute element where their width obey to the shrink-to-fit algorithm thus they cannot exceed the available width of their containing block.
the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width). ref
One idea is to increase the available width by increasing the padding since absolute element consider the padding-box then you can apply negative margin to compensate the padding added.
.out {
position: relative;
width: 200px;
padding-right:400px; /*width + padding = 600px (equal to max-width)*/
margin-right:-400px;
height: 400px;
background-color: blue;
background-clip:content-box; /* We don't show the background on the padding*/
}
.in {
position: absolute;
max-width: 600px;
background-color: yellow;
}
<div class="out">
<div class="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
</div>
<div class="in" style="margin-top:300px">
Lorem
</div>
</div>
In this case the padding is not really needed since it's a block element but it can be useful when dealing with inline elements.
Example:
.out {
position: relative;
display:inline-block;
width: 200px;
padding-right:400px; /*width + padding = 600px (equal to max-width)*/
margin-right:-400px;
height: 300px;
background-color: blue;
background-clip:content-box; /* We don't show the background on the padding*/
}
.in {
position: absolute;
max-width: 600px;
background-color: yellow;
}
.extra {
display:inline-block;
background:red;
vertical-align:top;
margin-top:100px;
}
<div class="out">
<div class="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
</div>
<div class="in" style="margin-top:200px">
Lorem
</div>
</div>
<div class="extra">
some content here
</div>
I can't get max-width to work when using absolute positioning. In https://jsfiddle.net/jn2bs6ax/ the item should take as little width as possible, up to the max-width of 1000px. But it's taking a width of about 50% and wrapping the text. How to make it work? If I set the max-width to something small like 300px it works, but anything larger than what it's width currently is doesn't cause it to expand.
This example just shows an item that's been absolutely positioned to the center below an item, but I use transform, top, bottom, left and right to position things in all 4 directions relative to an item. The solution should work with all 4 cases.
There's a similar question CSS (position:absolute + left:50% = max-width:50%)? but the answer only works with centering below but not for all cases like positioning to right of an item vertically centered.
<div class="relative">
text
<div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
text
</div>
css
.relative {
position: relative;
}
.absolute {
position: absolute;
background-color: grey;
max-width: 100%;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
Try setting display: inline-table; or display: table;
.relative {
position: relative;
}
.absolute {
position: absolute;
background-color: grey;
max-width: 1000px;
top: 100%;
left: 50%;
transform: translateX(-50%);
display: inline-table;
}
<div class="relative">
text
<div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
text
</div>
Try add width: 100%; for your class along max-width in any place.
.relative {
position: relative;
}
.absolute {
position: absolute;
background-color: grey;
max-width: 1000px;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
<div class="relative">
text
<div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
text
</div>
As you already noticed, the issue is related to left:50% that will restrict the width of the element to 50% of the parent element.
One hacky way to overcome this is to increase the width of the parent element by adding more padding since absolute element will consider the padding-box. Then you add negative margin to rectify the added padding. You should simply pay attention to overflow:
.relative {
position: relative;
padding:0 50%;
margin:0 -50%;
}
.absolute {
position: absolute;
background-color: grey;
max-width: 800px;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
.hide {
overflow:hidden;
height:500px;
}
<div class="hide">
<div class="relative">
text
<div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
text
<div class="absolute" style="top:200px;">Lorem ipsum dolor sit amet</div>
</div>
</div>
I just stuck in position, I used position:relative for parent and position:absolute for child now parent div did't get height and i don't want to use min-height or height. You can see the red border on top which is the parent div border.
fiddle code
.box {
text-align: center;
border: 1px solid red;
width: 500px;
margin: 0 auto;
position: relative;
}
.content {
width: 50%;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
<div class="box">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
</div>
</div>
Help me please ?
Thanks
You could just make the outer box absolute, if your textbos has to be positioned absolute.
EDIT: Without being able to edit the HTML structure, you need specific heights or some JavaScript. More Information about position
.box {
text-align: center;
border: 1px solid red;
width: 500px;
margin: 0 auto;
position: absolute;
}
.content {
width: 50%;
left: 0;
right: 0;
margin: 0 auto;
}
<div class="box">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
</div>
</div>
Its not possible without javascript but you can get this if add a child element inside the '.content'...
.box {
text-align: center;
width: 500px;
margin: 0 auto;
position:relative;
}
.content {
border: 1px solid red;
width: 100%;
position:absolute;
left:0;
right:0;
}
.inner{
margin: 0 auto;
width: 50%;
}
<div class="box">
<div class="content">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae.
</div>
</div>
</div>
Absolute positioning takes an element out of normal flow, so it can not change the measures of its parent any more. Try this, it works fine:
.box {
text-align: center;
border: 1px solid red;
width: 500px;
height:100%;
margin: 0 auto;
}
.content {
width: 50%;
margin: 0 auto;
}
I've been trying different ways but couldn't achieve what I want.
<div id="parent">
<div id="child-1"></div>
<div id="child-2"></div>
<div id="child-3"></div>
</div>
So I have the #parent at height: 100vh.
#child-1 should have height: 100% of parent.
#child-2 and #child-3 should have width: 100% and height: auto and they should be stacked on top of each other at position bottom: 0.
I've been trying to set parent relative and two childs absolute but the first child's height gets ignored.. I tried with display flex but first child's height is not 100% of parent.. I'm very confused how to do this.
Can someone help?
Here is what I'm trying to achieve: jsfiddle.net
You have to first get the bottom value of #child-2 dynamically as you said it should be on the top of #child-3.
You need to apply jQuery to get the height of #child-3 dynamically and then applying the height value of #child-3 to the bottom value of child-2, just like
#child-2 {
bottom: height-of-child-3;
}
Look at this Codepen
Or look at the snippet below:
height_child_three = $('#child-3').height();
$('#child-2').css({
position: 'absolute',
bottom: height_child_three
});
#parent {
width: 100vw;
height: 100vh;
background: #000;
position: relative;
}
#child-1 {
width: 100%;
height: 100%;
background: #eee;
}
#child-2 {
width: 100%;
background: #a0ea0e;
}
#child-3 {
position: absolute;
bottom: 0;
width: 100%;
background: #30e30e;
}
body { margin: 0; } /* A small reset */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child-1">
<strong>I'm child 1</strong>
</div>
<div id="child-2">
<strong>I'm child 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione deleniti voluptate commodi distinctio, repellendus qui, placeat laboriosam eligendi! Ducimus reiciendis officiis debitis placeat adipisci quae hic tempore vitae suscipit nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed aliquid, laborum nisi quos excepturi hic! Molestias hic consectetur dolor! Perferendis iste, quisquam quaerat ab, odio ducimus! Odio, minima error?</p>
</div>
<div id="child-3">
<strong>I'm child 3</strong>
</div>
</div>
Hope this helps!
Is this what you need?
HTML:
<div id="parent">
<div class="child-1"></div>
<div class="child-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum necessitatibus dolorem soluta laudantium cupiditate maiores neque, aliquid accusamus autem saepe tempora, itaque possimus, eaque deleniti odio atque enim omnis.</div>
<div class="child-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, illo est dolor dolores placeat deleniti quae consequuntur eum ipsum blanditiis laboriosam quod repellendus fugit! Odio quis rem vel a dolores.</div>
</div>
CSS:
html,
body,
div {
margin: 0;
padding: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
#parent {
position: relative;
width: 100vw;
height: 100vh;
background: #ccc;
}
.child-1 {
width: 100%;
height: 100%;
background: red;
}
.child-2 {
width: 100%;
height: auto;
padding: 30px;
background: blue;
}
.child-3 {
width: 100%;
height: auto;
padding: 30px;
background: green;
}
Here you can see a solution just using plain CSS. CODEPEN
I need to position several div rows to the bottom of a container, similar to the image here:
My problem lies in that almost every solution on SO requires either absolute positioning or some method which requires modification every time a new element is added. I tried using a display:table-cell and vertical-align:middle, but this broke my row layout (all rows had display:block;). Is there a way to get this done in a way I can keep adding html rows to the layout and it will grow from the bottom to the top without modifying the CSS?
Edit: The answer NEEDS to still work after adding a new row without modifying any CSS. IE9+ support is highly preferable. CSS ONLY solution is also highly preferred. If no answers with such criteria appear by tomorrow I'll tag the next most useful one as right.
(I'm using foundation in case that helps)
JSFiddle to play with:
https://jsfiddle.net/o47xeze7/
<div class="parent">
<div class="child">abcdfg</div>
<div class="child">abcdfg</div>
</div>
.parent {
width: 100%;
height: 20rem;
border: 1px solid black;
display: table;
}
.child {
border: 1px solid red;
display: block;
vertical-align: bottom;
}
UPDATE: I'm an idiot... All I had to do was create a container with absolute bottom positioning and let it grow updwards. When I said no absolute positioned elements I said it because I don't want anything with the likes margin-top: x-pixels, because it requires updating that value every time I add a new row, but doing an absolute bottom placed container doesn't. Sorry guys. Here is the working solution in case anyone wants it.
https://jsfiddle.net/b6akcdso/
<div class="parent">
<div class="bottom-aligned-contanier">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus expedita praesentium aperiam, eveniet in, dolore iusto excepturi quibusdam accusantium delectus aut atque assumenda quaerat recusandae perferendis repellat labore, explicabo maiores.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti minima nostrum, tenetur autem, debitis magni vel facere laudantium incidunt asperiores aliquam cupiditate cum perferendis cumque inventore, dignissimos ad in.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum impedit deleniti, id voluptatum est! Quibusdam ea fugit obcaecati minima soluta, quis voluptate aspernatur corrupti, minus tempore ipsa adipisci porro. Ab.</div>
</div>
</div>
.parent {
width: 100%;
height: 20rem;
background-color: lightgray;
position: relative;
}
.bottom-aligned-contanier {
position: absolute;
bottom: 0;
}
.child {
display: block;
width: 100%;
background-color: darkgray;
color: white;
}
.child:nth-child(2n) {
background-color: gray;
}
Awarding right answer to the guy that gave me the idea to do this.
If you can use jQuery, then this solution works. Here is a fiddle: https://jsfiddle.net/o47xeze7/3/
HTML
<div class="parent">
<div class="bottom">
<div class="child">abcdfg</div>
<div class="child">abcdfg</div>
</div>
</div>
CSS
.parent {
width: 100%;
height: 20rem;
border: 1px solid black;
display: block;
}
.child {
border: 1px solid red;
display: block;
}
.bottom {
display: block;
position: relative;
}
jQuery
$(function() {
var parentHeight = $(".parent").height();
var bottomHeight = $(".bottom").height();
var difference = parentHeight - bottomHeight;
$(".bottom").css("margin-top", difference);
});
flexbox can do that.
.parent {
width: 100%;
height: 10rem;
border: 1px solid black;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 1em;
}
.content {
align-self: flex-start;
margin-bottom: auto;
}
.child {
width: 100%;
border: 1px solid red;
margin: 0;
}
<div class="parent">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ipsam nihil vel doloribus maxime sed animi repellat consequatur, earum, eum sit. Repellendus fugit dolorem dolorum facere quo odit numquam autem, qui commodi accusantium hic. Omnis.</p>
</div>
<div class="child">top</div>
<div class="child">bottom</div>
</div>
<div class="parent">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ipsam nihil vel doloribus maxime sed animi repellat consequatur, earum, eum sit. Repellendus fugit dolorem dolorum facere quo odit numquam autem, qui commodi accusantium hic. Omnis.</p>
</div>
<div class="child">top</div>
<div class="middle">middle</div>
<div class="child">bottom</div>
</div>
JSfiddle Demo
If you're ready to ditch support for IE8 and IE9 then this might be the best solution for you since you don't want to use absolute/table-cell positioning.
You can achieve what you're trying to do using flexbox. Here's how it's done in your case:
.parent {
width: 100%;
height: 20rem;
border: 1px solid black;
display: flex;
flex-direction: column-reverse;
}
.child {
border: 1px solid red;
}
<div class="parent">
<div class="child">abcdfg</div>
<div class="child">abcdfg</div>
</div>