I have a html markup like this
<div class="relative">
<div id="absolute">
<p>absolute content</p>
</div>
<p>Parent div</p>
</div>
<div>outer content</div>
and css is
.relative {
position: relative;
width: 600px;
height: 400px;
background: #ddd;
}
#absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
background: #eee;
}
Now for some reason I want to take out the child div (id=absolute) out of its parent (id=relative) while pushing down whatever content in below the parent div.
This is what I want to get,
any help is appreciated
Try this - http://jsfiddle.net/8eXEE/
HTML
<div class="relative">
<div id="absolute">
<p>absolute content</p>
</div>
<p>Parent div</p>
</div>
<div style="background-color:#ff0000; width:400px; height:100px; position: relative; top:200px;">outer content</div>
CSS
.relative {
position: relative;
width: 600px;
height: 400px;
background: #ddd;
}
#absolute {
position: absolute;
bottom: 0px;
left: 0px;
width: 300px;
height: 200px;
background: #eee;
margin-bottom: -200px;
}
If your #absolute divs height does not dynamically changes (i.e. remains 200px always)
The markup
<div class="relative">
<div id="absolute">
<p>absolute content</p>
</div>
<p>Parent div</p>
</div>
<div id="outer">outer content</div>
The CSS
.relative {
position: relative;
width: 600px;
height: 400px;
background: #ddd;
}
#absolute {
position: absolute;
top: 100%;
left: 0;
width: 300px;
height: 200px;
background: #eee;
}
#outer {
position:relative;
margin-top:200px;
background:blue;
}
Here is the plunker , you can play with it.
Related
Is it possible to resume normal HTML after an absolutely positioned div element? I'm trying to use particle.js background in header div on top of which is child element (with some text only). Then from the end of parent div (particle-js div), I'd like normal HTML flow.
#parent {
position: absolute;
height: 200px;
width: 200px;
background-color: red;
}
#child {
position: relative;
left: 50px;
top: 50px;
height: 50px;
width: 50px;
background-color: green;
}
#after-parent {
background-color: blue;
}
<div id="parent">
<p>Parent div</p>
</div>
<div id="child">
<p>child div</p>
</div>
<div id="after-parent">
<h1>Normal HTML flow after parent div</h1>
</div>
You can wrap #parent and child inside another relative div e give it the height https://jsfiddle.net/f6phun8a/2/
#parent {
position: absolute;
height: 200px;
width: 200px;
background-color: red;
}
#outer {
position: relative;
height: 200px;
}
#child {
position: relative;
left: 50px;
top: 50px;
height: 50px;
width: 50px;
background-color: green;
}
#after-parent {
background-color: blue;
}
<div id="outer">
<div id="parent">
<p>Parent div</p>
</div>
<div id="child">
<p>child div</p>
</div>
</div>
<div id="after-parent">
<h1>Normal HTML flow after parent div</h1>
</div>
#flexwrap {
display:flex;
flex-direction:column;
}
#parent {
flex:0 0 200px;
position: absolute;
height: 200px;
width: 200px;
background-color: red;
}
#child {
flex:1;
position: relative;
margin-top: 200px;
margin-left: 50px;
height: 50px;
width: 50px;
background-color: green;
}
#after-parent {
flex:1;
background-color: blue;
}
<div id="flexwrap">
<div id="parent">
<p>Parent div</p>
</div>
<div id="child">
<p>child div</p>
</div>
<div id="after-parent">
<h1>Normal HTML flow after parent div</h1>
</div>
</div>
I don't understand why the float: right doesn't work on the other box.
Anyone who can help me about this?
This is my code:
.main-box {
height: 400px;
width: 400px;
position: relative;
background: black;
}
.right-box {
float: right;
width: 100px;
height: 100px;
background: red;
}
.left-box {
width: 100px;
height: 100px;
background: red;
}
.bottom-boxes {
position: absolute;
bottom: 0;
}
<div class="main-box">
<div class="top-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
<div class="bottom-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
</div>
This is the resulting image of my code:
This is the resulting image I want to achieve:
Because of position: absolute on bottom-boxes so you need to add width: 100%
.main-box {
height: 400px;
width: 400px;
position: relative;
background: black;
}
.right-box {
float: right;
width: 100px;
height: 100px;
background: red;
}
.left-box {
width: 100px;
height: 100px;
background: red;
}
.bottom-boxes {
position: absolute;
bottom: 0;
width: 100%;
}
<div class="main-box">
<div class="top-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
<div class="bottom-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
</div>
But here is better solution using flexbox
.main-box {
height: 200px;
width: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: black;
}
.row {
display: flex;
justify-content: space-between;
}
.box {
width: 50px;
height: 50px;
background: red;
}
<div class="main-box">
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Here's a working fiddle
When you put absolute position on a container, you have to specify also top, right and left property with bottom property to set a width and a height of it.
.bottom-boxes{
position:absolute;
bottom: 0;
left: 0;
right: 0;
}
In this case, left: 0; and right: 0; are equivalent to width: 100%; and top: 0 and bottom: 0; are equivalent to height: 100%;
When you don't specify a value, by default it's "auto;"
float won't work on an absolutely positioned element - you need to give top or bottom and right or left parameters to it (the default setting is top: 0; and left: 0;, i.e. the upper left corner of the parent element).
I'm having troubles positioning my divs. I want to have my child div stick to the bottom of the parent div, with grandchild_1 and grandchild_2 staying correctly put. By that, I mean having grandchild_1 before grandchild_2, like on the picture.
This is what I've tried, but the "child" div sticks to the top :
#parent {
position: relative;
}
#child {
position: absolute; bottom: 0;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">
</div>
<div id="grandchild_2">
</div>
</div>
</div>
Anyone knows how I should proceed ? Thanks !
If you specify a height on the parent it will stick to the bottom.
Example: http://codepen.io/anon/pen/wGqzVd
HTML
<div id="parent">
Parent
<div id="child">
Child
<div id="grandchild_1">
Grandchild 1
</div>
<div id="grandchild_2">
Grandchild 2
</div>
</div>
</div>
CSS
div {
padding: 5px;
}
#parent {
position: relative;
background: lightgray;
height: 200px;
width: 150px;
}
#child {
position: absolute;
bottom: 5px;
background: yellow;
}
#grandchild_1 {
background: pink;
}
#grandchild_2 {
background: lightblue;
}
The provided code works as is...assuming that the parent has a height greater than that of the child.
#parent {
position: relative;
height: 200px;
background: pink;
}
#child {
position: absolute;
width: 100%;
bottom: 0;
background: green;
}
#grandchild_1,
#grandchild_2 {
height: 25px;
background: red;
margin: 10px;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">GC1
</div>
<div id="grandchild_2">GC2
</div>
</div>
</div>
As an alternative to positioning, flexbox can do the same...and the child will affect the height of the parent which an absolutely positioned child cannot.
#parent {
position: relative;
height: 200px;
background: pink;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#child {
width: 100%;
background: green;
}
#grandchild_1,
#grandchild_2 {
height: 25px;
background: red;
margin: 10px;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">GC1
</div>
<div id="grandchild_2">GC2
</div>
</div>
</div>
I want to create a page like this:
and here is my HTML:
<div class="container">
<div class="article">
<div class="main-content">
Main content goes here...
</div>
<div class="content-meta">
<div class="content-title">
the title of content goes here...
</div>
<div class="content-info">
some information about content....
</div>
</div>
</div>
</div>
and CSS:
.container {
overflow:hidden;
position:relative;
width: 100%;
height: 350px;
}
.container .article {
width:100%;
position:absolute;
left:0;
top:0;
background-color: red;
}
.container .article .main-content {
width:50%;
float: right;
}
.container .article .content-meta {
width:50%;
float: right;
position: relative;
height: 350px;
}
.container .content-title , .container .content-info {
width: 100%;
position: absolute;
left: 0;
height: 50%;
}
.container .content-title {
background-color: green;
top: 0;
}
.container .content-info {
background-color: blue;
top: 50%;
}
it's working but when I use % instead of px for height of green and blue area, it just doesn't work. Why?
I mean, I set for both green and blue area height:50% but it didn't work. How can I solve this problem?
Note: I have 6 div.article elements and I want all of them to be stacked on top of each other and that's why I'm using position property.
In order to have percentage height to work you need to set both the parent elements .container .article .content-meta and .container .article to height:100%.
.container {
overflow: hidden;
position: relative;
width: 100%;
height: 350px;
}
.container .article {
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: red;
height: 100%;
}
.container .article .main-content {
width: 50%;
float: right;
}
.container .article .content-meta {
width: 50%;
float: right;
position: relative;
height: 100%;
}
.container .content-title,
.container .content-info {
width: 100%;
position: absolute;
left: 0;
height: 50%;
}
.container .content-title {
background-color: green;
top: 0;
}
.container .content-info {
background-color: blue;
top: 50%;
}
<div class="container">
<div class="article">
<div class="main-content">
Main content goes here...
</div>
<div class="content-meta">
<div class="content-title">
the title of content goes here...
</div>
<div class="content-info">
some information about content....
</div>
</div>
</div>
</div>
In fact, when you use absolute position, float won't be necessary.
.article {
position: relative;
height: 350px;
}
.main-content {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
background: red;
}
.content-meta {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
}
.content-title,
.content-info {
position: absolute;
left: 0;
width: 100%;
height: 50%;
}
.content-title {
background: green;
top: 0;
}
.content-info {
background: blue;
top: 50%;
}
<div class="article">
<div class="main-content">
Main content goes here...
</div>
<div class="content-meta">
<div class="content-title">
the title of content goes here...
</div>
<div class="content-info">
some information about content....
</div>
</div>
</div>
Or, just use float without absolute position.
.article {
height: 350px;
}
.main-content {
float: right;
width: 50%;
height: 100%;
background: red;
}
.content-meta {
float: left;
width: 50%;
height: 100%;
}
.content-title,
.content-info {
float: left;
width: 100%;
height: 50%;
}
.content-title {
background: green;
}
.content-info {
background: blue;
}
<div class="article">
<div class="main-content">
Main content goes here...
</div>
<div class="content-meta">
<div class="content-title">
the title of content goes here...
</div>
<div class="content-info">
some information about content....
</div>
</div>
</div>
Alternatively, you can use flexbox if you don't need to support old browsers.
.article {
height: 350px;
display: flex;
flex-direction: row-reverse;
}
.main-content {
background: red;
flex: 1;
}
.content-meta {
flex: 1;
display: flex;
flex-direction: column;
}
.content-title,
.content-info {
flex: 1;
}
.content-title {
background: green;
}
.content-info {
background: blue;
}
<div class="article">
<div class="main-content">
Main content goes here...
</div>
<div class="content-meta">
<div class="content-title">
the title of content goes here...
</div>
<div class="content-info">
some information about content....
</div>
</div>
</div>
I need to expand parent div by child div, please look at this code:
HTML
<div class="wrapper">
<header class="header"> </header>
<div class="middle">
<div class="container">
<main class="content">
<div id="child">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</main>
</div>
<aside class="left-sidebar"></aside>
</div>
<footer class="footer"></footer>
</div>
CSS
.wrapper {
width: 500px;
margin: 0 auto;
min-height: 100%;
}
.header {
height: 100px;
background: blue;
}
.footer {
height: 60px;
width: 100%;
bottom: 0;
position: relative;
background:yellow;
clear:left;
}
.middle {
width: 100%;
min-height: 300px;
position: relative;
}
.container {
min-height: 300px;
width: 100%;
float: left;
}
.content {
width: 800;
min-height: 300px;
left: 280;
position: relative;
background:red;
padding:10px;
}
#child {
position:relative;
top:100px;
left:160px;
min-height:500px;
width: 200px;
border: solid 1px white;
background:green;
}
.left-sidebar {
float: left;
width: 100px;
min-height: 500px;
margin-left: -100%;
position: relative;
background: black;
}
DEMO: JSFIDDLE
the problem is that main.content is not fully expanded by #child vertically on the value of "top:200" that is in #child relative positioning properties, how can I fix it? because it currently overlaps the footer.
Actualy, when ou apply the "top" property with position: relative, it doesn't interfeer on the other elements of the page. so it will just overlap the parent div. Try using margin-top instead:
#child {
margin-top: 200px;
left:60;
min-height:500;
border: solid 1px white;
}
You need to clear:left; on the footer.
.footer {
clear:left;
}
http://jsfiddle.net/ac6s7/