Given the following HTML:
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
I would like #copyright to stick to the bottom of #container. Can I achieve this without using absolute positioning?
Likely not.
Assign position:relative to #container, and then position:absolute; bottom:0; to #copyright.
#container {
position: relative;
}
#copyright {
position: absolute;
bottom: 0;
}
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
Actually, the accepted answer by #User will only work if the window is tall and the content is short. But if the content is tall and the window is short, it will put the copyright info over the page content, and then scrolling down to see the content will leave you with a floating copyright notice. That makes this solution useless for most pages (like this page, actually).
The most common way of doing this is the "CSS sticky footer" approach demonstrated, or a slightly slimmer variation. This approach works great -- IF you have a fixed height footer.
If you need a variable height footer that will appear at the bottom of the window if the content is too short, and at the bottom of the content if the window is too short, what do you do?
Swallow your pride and use a table.
For example:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#container {
height: 100%;
border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
<table id="container">
<tr>
<td valign="top">
<div id="main">Lorem ipsum, etc.</div>
</td>
</tr>
<tr>
<td valign="bottom">
<div id="footer">Copyright some evil company...</div>
</td>
</tr>
</table>
</body>
</html>
Try it out. This will work for any window size, for any amount of content, for any size footer, on every browser... even IE6.
If you're cringing at the thought of using a table for layout, take a second to ask yourself why. CSS was supposed to make our lives easier -- and it has, overall -- but the fact is that even after all these years, it's still a broken, counter-intuitive mess. It can't solve every problem. It's incomplete.
Tables aren't cool, but at least for now, they are sometimes the best way to solve a design problem.
The flexbox approach!
In supported browsers, you can use the following:
Example Here
.parent {
display: flex;
flex-direction: column;
}
.child {
margin-top: auto;
}
.parent {
height: 100px;
border: 5px solid #000;
display: flex;
flex-direction: column;
}
.child {
height: 40px;
width: 100%;
background: #f00;
margin-top: auto;
}
<div class="parent">
<div class="child">Align to the bottom</div>
</div>
The solution above is probably more flexible, however, here is an alternative solution:
Example Here
.parent {
display: flex;
}
.child {
align-self: flex-end;
}
.parent {
height: 100px;
border: 5px solid #000;
display: flex;
}
.child {
height: 40px;
width: 100%;
background: #f00;
align-self: flex-end;
}
<div class="parent">
<div class="child">Align to the bottom</div>
</div>
As a side note, you may want to add vendor prefixes for additional support.
Yes you can do this without absolute positioning and without using tables (which screw with markup and such).
DEMO
This is tested to work on IE>7, chrome, FF & is a really easy thing to add to your existing layout.
<div id="container">
Some content you don't want affected by the "bottom floating" div
<div>supports not just text</div>
<div class="foot">
Some other content you want kept to the bottom
<div>this is in a div</div>
</div>
</div>
#container {
height:100%;
border-collapse:collapse;
display : table;
}
.foot {
display : table-row;
vertical-align : bottom;
height : 1px;
}
It effectively does what float:bottom would, even accounting for the issue pointed out in #Rick Reilly's answer!
Pure CSS, without absolute positioning, without fixing any height, cross-browser (IE9+)
check out that Working Fiddle
Because normal flow is 'top-to-bottom' we can't simply ask the #copyright div to stick to the bottom of his parent without absolutely positioning of some sort, But if we wanted the #copyright div to stick to the top of his parent, it will be very simple - because this is the normal flow way.
So we will use this in our advantage.
we will change the order of the divs in the HTML, now the #copyright div is at the top, and the content follow it right away.
we also make the content div stretch all the way (using pseudo elements and clearing techniques)
now it's just a matter of inverting that order back in the view. that can be easily done with CSS transform.
We rotate the container by 180deg, and now: up-is-down. (and we inverse back the content to look normal again)
If we want to have a scroolbar within the content area, we need to apply a little bit more of CSS magic. as can be showed Here [in that example, the content is below a header - but its the same idea]
* {
margin: 0;
padding: 0;
}
html,
body,
#Container {
height: 100%;
color: white;
}
#Container:before {
content: '';
height: 100%;
float: left;
}
#Copyright {
background-color: green;
}
#Stretch {
background-color: blue;
}
#Stretch:after {
content: '';
display: block;
clear: both;
}
#Container,
#Container>div {
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
<div id="Container">
<div id="Copyright">
Copyright Foo web designs
</div>
<div id="Stretch">
<!-- Other elements here -->
<div>Element 1</div>
<div>Element 2</div>
</div>
</div>
CSS Grid
Since the usage of CSS Grid is increasing, I would like to suggest align-self to the element that is inside a grid container.
align-self can contain any of the values: end, self-end, flex-end for the following example.
#parent {
display: grid;
}
#child1 {
align-self: end;
}
/* Extra Styling for Snippet */
#parent {
height: 150px;
background: #5548B0;
color: #fff;
padding: 10px;
font-family: sans-serif;
}
#child1 {
height: 50px;
width: 50px;
background: #6A67CE;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
<div id="parent">
<!-- Other elements here -->
<div id="child1">
1
</div>
</div>
Create another container div for the elements above #copyright. Just above copyright add a new div:
<div style="clear:both;"></div>
It will force the footer to be under everything else, just like in the case of using relative positioning (bottom:0px;).
Try this;
<div id="container">
<div style="height: 100%; border:1px solid #ff0000;">
<!-- Other elements here -->
</div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
Copyright Foo web designs
</div>
While none of the answers provided here seemed to apply or work in my particular case, I came across this article which provides this neat solution :
#container {
display: table;
}
#copyright {
display: table-footer-group;
}
I find it very useful for applying responsive design for mobile display without having to reorder all the html code of a website, setting body itself as a table.
Note that only the first table-footer-group or table-header-group will be rendered as such : if there are more than one, the others will be rendered as table-row-group.
You can indeed align the box to the bottom without using position:absolute if you know the height of the #container using the text alignment feature of inline-block elements.
Here you can see it in action.
This is the code:
#container {
/* So the #container most have a fixed height */
height: 300px;
line-height: 300px;
background:Red;
}
#container > * {
/* Restore Line height to Normal */
line-height: 1.2em;
}
#copyright {
display:inline-block;
vertical-align:bottom;
width:100%; /* Let it be a block */
background:green;
}
Using the translateY and top property
Just set element child to position: relative and than move it top: 100% (that's the 100% height of the parent) and stick to bottom of parent by transform: translateY(-100%) (that's -100% of the height of the child).
BenefitS
you do not take the element from the page flow
it is dynamic
But still just workaround :(
.copyright{
position: relative;
top: 100%;
transform: translateY(-100%);
}
Don't forget prefixes for the older browser.
CodePen link here.
html, body {
width: 100%;
height: 100%;
}
.overlay {
min-height: 100%;
position: relative;
}
.container {
width: 900px;
position: relative;
padding-bottom: 50px;
}
.height {
width: 900px;
height: 50px;
}
.footer {
width: 900px;
height: 50px;
position: absolute;
bottom: 0;
}
<div class="overlay">
<div class="container">
<div class="height">
content
</div>
</div>
<div class="footer">
footer
</div>
</div>
If you want it to "stick" to the bottom, regardless of the height of container, then absolute positioning is the way to go. Of course, if the copyright element is the last in the container it'll always be at the bottom anyway.
Can you expand on your question? Explain exactly what you're trying to do (and why you don't want to use absolute positioning)?
If you do not know the height of child block:
#parent {
background:green;
width:200px;
height:200px;
display:table-cell;
vertical-align:bottom;
}
.child {
background:red;
vertical-align:bottom;
}
<div id="parent">
<div class="child">child
</div>
</div>
http://jsbin.com/ULUXIFon/3/edit
If you know the height of the child block add the child block then add padding-top/margin-top:
#parent {
background:green;
width:200px;
height:130px;
padding-top:70px;
}
.child {
background:red;
vertical-align:
bottom;
height:130px;
}
<div id="parent">
<div class="child">child
</div>
</div>
You can use grid by assigning the available space to the content at the top:
#container {
display: grid;
grid-template-rows: 1fr auto;
height: 10rem; /* or 100% or anything */
}
<div id="container">
This is random content.
<div id="copyright">
Copyright Foo web designs
</div>
</div>
Also, if there's stipulations with using position:absolute; or position:relative;, you can always try padding parent div or putting a margin-top:x;. Not a very good method in most cases, but it may come in handy in some cases.
Solution for this specific scenario:
Place inner at the bottom of parent . The height of the parent is set by the height of its "tallest" sibling
The set up:
I have a row with multiple <div class="container">
These <div class="container"> are next to each other inside another <div class="supercontainer">
Each <div class="container"> has 3 inner divs on top of each other: <div class="title">, <div class="content">, <div class="footer">
The desired result:
All <div class="container"> have the same height. The height is not defined in px, it will be the height of the "tallest" among them.
<div class="title"> should be at the top of <div class="container">
<div class="content"> should be placed below <div class="title">
<div class="footer"> should be placed at the bottom of <div class="container"> without overlapping with the previous content
This is the current state: https://codepen.io/xavier-atero/pen/ExvWQww
.supercontainer {
border: solid 1px black;
display: flex;
}
.container, .other-container {
position: relative;
border: solid 1px red;
width: 200px;
margin: 10px;
}
.title {
margin: 10px;
border: solid 1px blue;
}
.content {
margin: 10px;
border: solid 1px cyan;
}
.footer {
margin: 10px;
background: lime;
}
<body>
<div class="supercontainer">
<div class="container">
<div class="title">
This part represents the title and it is placed on top
</div>
<div class="content">
This one represents the body and it is placed below the title
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
<div class="other-container">
<div class="title">
This part represents the title and it is placed on top.
</div>
<div class="content">
This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
</div>
</body>
__________ Solution with FLEXBOX __________
This is the outcome: https://codepen.io/xavier-atero/pen/MWvpBMz
.supercontainer {
border: solid 1px black;
display: flex;
}
.container, .other-container {
position: relative;
border: solid 1px red;
width: 200px;
margin: 10px;
display: flex;
flex-direction: column;
}
.title {
margin: 10px;
border: solid 1px blue;
}
.content {
margin: 10px;
border: solid 1px cyan;
}
.footer {
margin: 10px;
background: lime;
margin-top: auto;
border: solid 1px fuchsia;
}
<body>
<div class="supercontainer">
<div class="container">
<div class="title">
This part represents the title and it is placed on top
</div>
<div class="content">
This one represents the body and it is placed below the title
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
<div class="other-container">
<div class="title">
This part represents the title and it is placed on top.
</div>
<div class="content">
This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
</div>
</body>
__________ Solution with TABLE-ROW __________
This is the outcome: https://codepen.io/xavier-atero/pen/rNzyKJm
.supercontainer {
border: solid 1px black;
display: flex;
}
.container, .other-container {
position: relative;
border: solid 1px red;
width: 200px;
margin: 10px;
border-collapse:collapse;
display : table;
}
.title {
margin: 10px;
border: solid 1px blue;
}
.content {
margin: 10px;
border: solid 1px cyan;
}
.footer {
margin: 10px;
background: lime;
border: solid 1px fuchsia;
display: table-row;
vertical-align: bottom;
height: 1px;
}
<body>
<div class="supercontainer">
<div class="container">
<div class="title">
This part represents the title and it is placed on top
</div>
<div class="content">
This one represents the body and it is placed below the title
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
<div class="other-container">
<div class="title">
This part represents the title and it is placed on top.
</div>
<div class="content">
This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
</div>
<div class="footer">
And this one is the footer. It should always be at the bottom of the container
</div>
</div>
</div>
</body>
#container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>
Don't wanna use "position:absolute" for sticky footer at bottom. Then you can do this way:
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer{
background: #000;
text-align: center;
color: #fff;
}
.footer,
.push {
height: 50px;
}
<html>
<body>
<!--HTML Code-->
<div class="wrapper">
<div class="content">content</div>
<div class="push"></div>
</div>
<footer class="footer">test</footer>
</body>
</html>
Here is an approach targeted at making an element with a known height and width (at least approximately) float to the right and stay at the bottom, while behaving as an inline element to the other elements. It is focused at the bottom-right because you can place it easily in any other corner through other methods.
I needed to make a navigation bar which would have the actual links at the bottom right, and random sibling elements, while ensuring that the bar itself stretched properly, without disrupting the layout. I used a "shadow" element to occupy the navigation bar's links' space and added it at the end of the container's child nodes.
<!DOCTYPE html>
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
<span id="copyright-s">filler</span>
</div>
<style>
#copyright {
display:inline-block;
position:absolute;
bottom:0;
right:0;
}
#copyright-s {
float:right;
visibility:hidden;
width:20em; /* ~ #copyright.style.width */
height:3em; /* ~ #copyright.style.height */
}
</style>
Maybe this helps someone: You can always place the div outside the other div and then push it upwards using negative margin:
<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
Copyright Foo web designs
</div>
Just because this hasn't been mentioned at all, what usually works well in situations like yours:
Placing the copyright-div after the container-div
You would only have to format the copyright-div in a similar way to the other container (same overall width, centering, etc.), and all is fine.
CSS:
#container, #copyright {
width: 1000px;
margin:0 auto;
}
HTML:
<div id="container">
<!-- Other elements here -->
</div>
<div id="copyright">
Copyright Foo web designs
</div>
The only time this might not be ideal is when your container-div is declared with height:100%, and the user would need to scroll down to see the copyright. But even still you could work around (e.g. margin-top:-20px - when the height of your copyright element is 20px).
No absolute positioning
No table layout
No crazy css, that looks different in every other browser (well IE at least, you know)
Simple and clear formatting
Aside: I know the OP asked for a solution that "... sticks to the bottom of the 'container' div ...", and not something under it, but come on, people are looking for good solutions here, and this is one!
There is nothing called float:bottom in CSS. The best way is using positioning in such cases:
position:absolute;
bottom:0;
For those only have one child in the container, you can use the table-cell and vertical-align approach which worked reliably for positioning a single div at the bottom of its parent.
Note that using table-footer-group as other answers mentioned will break the height calculation of parent table.
#container {
display: table;
width: 100%;
height: 200px;
}
#item {
display: table-cell;
vertical-align: bottom;
}
<div id="container">
<div id="item">Single bottom item</div>
</div>
According: w3schools.com
An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed).
So you need to position the parent element with something either relative or absolute, etc and position the desired element to absolute and latter set bottom to 0.
I want the third div down, "contents", to fill its container but leave exactly 200px of space on the right side to fit the fixedWidthButtons.
So far, no matter what I set right to, it doesn't affect the width of the div.
If I set its display:block; it fills the container completely and the buttons get pushed out of the container.
If I set the display:inline-block;, the container becomes 181.344 px wide and won't resize no matter what I set right to.
<div class="container" style="left:0; right:0; margin-bottom: 10px; height: 65px; display: block;">
<div class="panel" style="width:100%; display: block;">
<div class="contents" style="display:inline-block; position:relative; left: 0px; right: 200px;">
<div class="buttonTextAndCounterContainer" style="width:100%; display:block">
<div class="button" style="float:left; display:none;"></div>
<div class="textAndCounterContainer" style="display:block;">
<div class="counter" style="float:right; display:block;"></div>
<div class="text" style="width:100%; position:relative; left:0px; vertical-align:top; display:inline-block;"></div>
</div>
</div>
</div>
<div class="fixedWidthButtons" style="display:inline-block; float:right;"></div>
</div>
</div>
You need to read up on some of properties you're dealing with. Position is for a point of origin not width.
You also express some issues with block versus inline-block these are easily googled. That said a solution to your problem is to change the css:
.content {
display: inline-block;
width: calc(100% - 200px);
}
Few suggestions:
position: absolute works relative to where its relative is (parent who is positioned relative is).
position: relative informs that the element is not positioned (without changing the layout at all) and make it's children if set to absolute position behave relative to it's parent
Setting inline-block also give us the provision of setting width and height which it would adjust to; if that is not needed, better off to go with inline.
It is good to remove the inline-styles - sample snippet below
.container {
margin-bottom: 10px;
height: 65px;
border: 1px solid black;
position: relative;
}
.contents {
border: 1px solid grey;
position: absolute;
display: inline-block;
width: 300px;
left: 0;
}
.fixedWidthButtons {
display: inline-block;
width: 200px;
position: absolute;
right: 0;
border: 1px solid red;
}
<div class="container">
<div class="panel">
<div class="contents">
<div class="buttonTextAndCounterContainer">
<div class="button">button</div>
<div class="textAndCounterContainer">
<div class="counter">counter</div>
<div class="text">text</div>
</div>
</div>
</div>
<div class="fixedWidthButtons">For my buttons</div>
</div>
</div>
Solution:
To set a div's width by using only left and right, you must set the div's position: absolute;
Source: http://alistapart.com/article/conflictingabsolutepositions
I have two DIVs that may (both) vary in their size. They need to start at the same (upper-left) position of a parental box element, but the height of this (outer) box should be the same as the larger of the inner elements.
When using absolute positioning (the common way to make elements overlap), the element that is positioned absolute, is taken out of the flow - and cannot influence the height of the outer box:
HTML sample:
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="other">
Subsequent content
</div>
CSS:
div.outer { position: relative }
div.outer div.inner1 { width: 200px; height: 150px; border: 1px solid green; position: absolute }
div.outer div.inner2 { width: 200px; height: 120px; background-color: yellow }
div.other { background-color: red }
Fiddle: http://jsfiddle.net/L5qLrv4x/ - (I'd like to have the red DIV "other" below the larger of the two inner DIVs)
I'd like not to use JavaScript. Is there a CSS-only solution to have two elements (of variable height) at the same position and keep them in the flow to influence the surrounding content?
Thanks !
Use Case
Why shall someone need this? The respondent may paste a screenshot in my web application. Unless this has been pasted, a dummy DIV symbolizes where the screenshot may be pasted. This dummy is also contenteditable="true" to take the pasted content.
When the screenshot is pasted (which may have a different aspect ration than the dummy), it will be displayed in a DIV behind the (transparent) dummy. The dummy must stay on top to catch further paste events - new screenshots that may replace the one pasted first.
An additional form input is placed below this dummy+preview box. And of course, neither the dummy nor the screenshot shall overlap this input.
As my use case shows, JavaScript would be an option. My question for a CSS-only solution has two reasons: (a) Pure interest - I have learned that finding new solutions is often helpful in other situations, as well. (b) Less JS code that requires (additional) maintenance.
You can do a trick, but this solution is just for your question. It's not generic at all.
The trick is to move the second div "back" to the first div location.
div.outer {
position: relative;
}
div.outer div.inner1 {
width: 200px;
height: 150px;
border: 1px solid green;
float:left;
}
div.outer div.inner2 {
width: 200px;
height: 120px;
background-color: yellow;
transform:translateX(-100%);
float:left;
}
div.outer div.inner2.higher {
height:200px;
}
div.other {
background-color: red;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
<h1>Div 1 is higher</h1>
<div class="outer cf">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="other">
Subsequent content
</div>
<hr />
<h1>Div 2 is higher</h1>
<div class="outer cf">
<div class="inner1"></div>
<div class="inner2 higher"></div>
</div>
<div class="other">
Subsequent content
</div>
Is that what you want to achieve?
Here are the code:
CSS:
div.outer { position: relative }
div.outer div.inner1 { width: 200px; height: 150px; border: 1px solid green; position: absolute; display:block }
div.outer div.inner2 { width: 201px;height: 151px; background-color: yellow; display:block }
div.other { background-color: red; position:flex }
HTML:
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
<div class="other">
Subsequent content
</div>
Jsfiddle:
http://jsfiddle.net/L5qLrv4x/6/
Here's my html
<div class="container">
<div class="box">
<div class="float">
<img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
</div>
<div class="float float_txt">
text here!
<p class"a_p">a</p>
<p class"b_p">b</p>
<p class"c_p">c</p>
</div>
</div>
</div>
and css
.container{width:400px}
.box{display:inline-block}
.float{width:50%; float:left}
.float img{width: 100%; height:auto;}
.float_txt{background:red}
http://jsfiddle.net/MdtR8/1/
.container has a dynamic width (responsive design) and image will auto-resize itself.
I need to have .float_txt at same height as image, but I need a REAL height because I must divide a b c in percentage. Example:
.a_p, .b_p{height: 20%}
.c_p{height:60%}
How I can to this? only css no js :S
Why don't you solve it with JQuery. Here is the example of JQuery to calculate the height of .float img and add it to float_txt height.
$(".float_txt").css({
'height': $('.float img').height()
});
It's just one solution using JQuery. It's absolutely easier than using only css.
Jsfiddle
Here's one of the approaches.
I don't consider it to be the answer neither an elegant solution but this is one of the workarounds which actually meets the most important condition - it works (with some restrictions).
Here's the fiddle
First, we must assume that everything inside the .float_txt will be wrapped within those three paragraphs - they're meant to be 20%, 20% and 60% which is 100% all together so there's no more space for any other elements. Next, we wrap all three paragraphs with a div and put a copy of the image next to this div. We'll add the id="speculate" to the image.
The whole HTML will look like that:
<div class="container">
<div class="box">
<div class="float">
<img src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
</div><div class="float float_txt">
<img id='speculate' src='http://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/db/miami-beach.jpg' />
<div class='content'>
<p class="a-p">a</p>
<p class="b-p">b</p>
<p class="c-p">c</p>
</div>
</div>
</div>
</div>
We'll use the #speculate image to set the height of the .float_txt div. The image will have visibility: hidden which makes it invisible but still occupying_ the space in its container. The .content div will be positioned absolutely and spread to the whole space of the .float_txt with top:0; right:0; bottom:0; left:0.
The paragraphs will be also positoned absolutely and placed with the top property. The disadvantage here is the fact that we must know the percentage heights of the preceding paragraphs, e.g. to position the second paragraph we must set top: 20% because the first paragraph has height: 20%. I hope it's clear.
The whole CSS will look like this:
.box {
display: inline-block;
}
.float {
display: inline-block;
width:50%;
}
.float img {
width: 100%;
height: auto;
}
.float_txt {
background: red;
position: relative;
}
#speculate {
width: 100%;
visibility: hidden;
display: block;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.content p {
margin: 0;
position: absolute;
}
.content .static {
position: static;
}
.a-p {
height: calc(20% + 20px);
top: 20px;
}
.b-p {
height: 20%;
top: calc(20% + 20px);
}
.c-p {
height: 60%;
top: calc(40% + 20px);
}
<div id="parent" style="overflow:hidden; position:relative;">
<div id="child" style="position:absolute;">
</div>
</div>
I need to show child element which is bigger than it's parent element, but without removing overflow:hidden; is this possible?
parent element has position:relative;
child element gets stripped as soon as it's out of it's parents borders.
(elements have additional css defined I just put style attributes for clearness)
It's completely impossible to do what you want with both overflow: hidden and position: relative on the parent div.. instead you can introduce an extra child div and move overflow: hidden to that.
See: http://jsfiddle.net/thirtydot/TFTnU/
HTML:
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>
CSS:
#parent {
position:relative;
background:red;
width:100px;
height:100px
}
#child {
position:absolute;
background:#f0f;
width:300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}
#parent {
position: relative;
background: red;
width: 100px;
height: 100px
}
#child {
position: absolute;
background: #f0f;
width: 300px;
bottom: 0;
left: 0
}
#hideOverflow {
overflow: hidden
}
<div id="parent">
<div id="hideOverflow">
<div style="width:1000px;background:#ccc">sdfsd</div>
</div>
<div id="child">overflow "visible"</div>
</div>
The code below works like a charm.
<div id="grandparent" style="position:relative;">
<div id="parent" style="overflow:hidden;">
<div id="child" style="position:absolute;">
</div>
</div>
</div>
The Problem has a Name: "offsetParent". As soon as an element gets the position abolute|relative or has its position/size altered by a transformation, it becomes the offsetParent of its children. The original offsetParent for all elements (and therefore the area in which overflowing content will be shown or relative to which absolute positions are given) is the viewport of the browser or the iFrame. But after an absolute or relative position had been applied to an element, ist bounding box is the new origin for positioning and clipping of all of ist children.
In a Project, I had a 'popup' window containing a pulldown menu. The pulldown could easily extend over the limits of the window. But as soon as the window was moved (by using a transformation or relative positioning), the pulldown appeared at a wrong place (having the top-left Position of the window as additional Offset) and was clipped at the window's borders. The quick hack I used was to append the pulldown as child of Body (instead fo the window) and position it absolute, using the coordinates of the button that opens the menu (from the clientBoundingBox of the button) and the offset from the button's offsetParent) as absolute position of the pulldown. Then the Body again was the limiting area. This is, however, a bit tricky if it comes to multiple Levels of z-axis ordering (as the pulldown's z-axis is relative to Body, which might be different from the one the window has). But since the window has to be visible (therefore on top) to open the menu, this was negligible.
Of course, this solution requires the use of JavaScript and cannot be done by simple CSS.
You can't eat the cake and keep it. If you take something out of the layout context, it becomes ist own, indepenent (and limited) layout 'frame'
I usually use overflow:hidden as clearfix. In this case, I give up and just add an additional div.
<div id="parent" style="position:relative;">
<!-- floating divs here -->
<div id="child" style="position:absolute;"></div>
<div style="clear:both"></div>
</div>
Use css...
* {margin: 0; padding: 0;}
#parent {width: auto; overflow: hidden;}
#child {position: absolute; width: auto;}
With width auto it will always append to the smallest possible size; and with the reset it will help maintain natural flow.
But if the child is bigger in any way than the parent, then it will not be possible. But with this CSS I think you will achieve what you want to the maximum of what is possible.
I did this in a very simple way
<div class="rootparent">
<div class="parent">
<div class="child"></div>
</div>
</div>
.rootparent {
position:relative;
border:1px solid #ccc;
width:150px;
height:150px;
}
.parent {
overflow:hidden;
}
.child {
position: absolute;
top: -10px;
right: -15px;
width: 30px;
height: 30px;
border: 1px solid red;
}
Here is jsfiddle link
thirtydot's solution is actually a good idea.
Here's a clearer example: http://jsfiddle.net/y9dtL68d/
HTML
<div id="grandparent">
<div id="parent">
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
<p>this has a lot of content which ...</p>
</div>
<div id="child">
dudes
</div>
</div>
CSS
#grandparent {
position: relative;
width: 150px;
height: 150px;
margin: 20px;
background: #d0d0d0;
}
#parent {
width: 150px;
height: 150px;
overflow:hidden;
}
#child {
position: absolute;
background: red;
color: white;
left: 100%;
top: 0;
}
I believe, every front-end developer encountered this situation, at least once. Let's say you need to absolute position something… And then you try to move it in some direction, and boom it disappears… You forgot the parent was set to overflow:hidden and now your element is lost in the hidden infinite vacuum.There is a css trick to do this.Please find the below demo example for it...
<br><br><br>
<div class="grand-parent">
<div class="parent">P
<div class="child">child</div>
</div>
</div>
css code:
.grand-parent {
width:50px;
height:50px;
position:relative;
background-color: grey;
}
.parent {
width:10px;
height:30px;
overflow:hidden;
background-color: blue;
}
.child {
position:absolute;
width:50px;
height:20px;
background-color: red;
top:-10px;
left:5px;
}