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/
Related
I want to create two divs, one under other without JS and with IE8 support.
Each has 100% width.
Each with relative or absolute positioning for nested layout.
Top div have height by content, not fixed (it is important) and bottom div on whole leftover space.
In my example bottom div is too short, how i can stretch it to bottom?
<html>
<head>
<style type="text/css"><!--
* {
padding: 1px;
margin: 0px;
border: solid 1px;
width: 100%;
}
#super {
position: absolute;
height: 100%;
}
#top {
position: relative;
}
#bottom {
position: relative;
top: 0px;
bottom: 0px;
}
--></style>
</head>
<body>
<div id="super">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
You can use css table properties to create this layout.
HTML:
<div id="super">
<div id="top">
<div class="content">
top
</div>
</div>
<div id="bottom">
<div class="content">
bottom
</div>
</div>
</div>
Necessary CSS:
html,
body {
height: 100%;
}
#super {
height: 100%;
width: 100%;
display: table;
}
#super > div {
display: table-row;
}
#top {
background: green;
}
#bottom {
background: blue;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#super {
height: 100%;
width: 100%;
display: table;
}
#top {
background: green;
overflow: hidden;
height: 1%;
}
.content {
padding: 10px;
}
#bottom {
background: blue;
}
#super > div {
display: table-row;
}
<div id="super">
<div id="top">
<div class="content">
top
</div>
</div>
<div id="bottom">
<div class="content">
bottom</div>
</div>
</div>
Output Image:
You can use display: table for wrapping container and table-row for top and bottom divs:
* {
padding: 1px;
margin: 0px;
border: solid 1px;
width: 100%;
}
#super {
display: table;
position: absolute;
height: 100vh;
}
#top {
display: table-row;
height: 1px;
position: relative;
background: orange;
}
#bottom {
display: table-row;
position: relative;
top: 0px;
bottom: 0px;
background: teal;
}
<div id="super">
<div id="top">top<br>top text</div>
<div id="bottom">bottom</div>
</div>
Use flex-box
.parent{
display: flex;
flex-direction: column;
min-height: 100vh
}
.child2{
flex: 1;
background: blue;
}
<div class="parent">
<div class="child1"> first child</div>
<div class="child2"> second child</div>
</div>
Demo here
Try this :
#bottom {
position: relative;
top: 0px;
bottom: 0px;
HEIGHT: 800px;
}
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 have a div with a height en width of 33.33%. I want text in the middle of the div.
HTML
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
</div>
CSS
#blog1 {
width: 33.33%;
padding-bottom: 33.33%;
background: red;
float: left;
}
How can i make this?
I suggest this:
html
<div class="blogs" id="content">
<div id="blog1">text in the middle
<span>blog 1</span>
</div>
<div id="blog2"><span>blog 2</span></div>
<div id="blog3"><span>blog 3</span></div>
</div>
css
#blog1{
width: 33.33%;
/*padding-bottom: 33.33%;*/
background: red;
text-align: center;
display:table-cell;
vertical-align:middle;
position: relative;
}
.blogs > div > span{
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
}
#blog2{
width: 33.33%;
padding-bottom: 33.33%;
background: green;
text-align: center;
display:table-cell;
position: relative;
}
#blog3{
width: 33.33%;
padding-bottom: 33.33%;
background: blue;
text-align: center;
display:table-cell;
position: relative;
}
#content{
display:table;
}
fiddle
And another example with static width e.g. 500px fiddle
Have a look at this fiddle.
Just set height and line-height equal and add vertical-align:middle;
Your code will look like this:
#blog1{
width: 33.33%;
height:300px;
background: red;
float: left;
text-align:center;
vertical-align:middle;
line-height:300px; /* has to bee the same value as the height of the div */
}
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
<!-- You need to add this after the last <div> -->
<div style="clear:right;"></div>
</div>
#blog1, #blog2, #blog3 {
float:left;
padding: 3% 0;
background: red;
width: 100px;
height:100%;
text-align:center;
}
JS Fiddle
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.
Folks, please help me expand leftbar to footer, it should be dynamically expanded to footer if content is expanded by inner DIV(s), please see below the code and demo:
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>
<p>1</p>
<p>1</p>
</div>
</main>
</div>
<aside class="left-sidebar">Left bar</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-bottom:70px;
}
#child {
position:relative;
margin-top:100px;
left:160px;
min-height:500px;
width: 200px;
border: solid 1px white;
background:green;
}
.left-sidebar {
float: left;
width: 100px;
min-height: 500px;
height: 100%;
margin-left: -100%;
position: relative;
background: black;
}
DEMO: http://jsfiddle.net/ac6s7/23/
Your structure can be like this:
<div class="wrapper">
<header class="header"></header>
<div class="middle">
<div class="container">
<aside class="left-sidebar">Left bar</aside>
<main class="content">
<div id="child"></div>
</main>
</div>
</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%;
}
.content {
width: 800px;
min-height: 300px;
left: 280;
position: relative;
background:red;
padding:10px;
display:table-cell
}
#child {
position:relative;
margin-top:100px;
left:160px;
min-height:500px;
border: solid 1px white;
background:green;
width:200px;
}
.left-sidebar {
display:table-cell;
width: 100px;
min-height: 500px;
height:100%;
margin-left: -100%;
position: relative;
background: black;
}
Working Demo
Hope this helps you.
I believe that this is what you are looking for.
Fiddle Demo
I'm not sure what I've changed but this are the styles that I think that might have changed.
CSS
.container {
min-height: 300px;
width: 100%;
float: left;
height:100%;
}
.content {
width: 800;
min-height: 300px;
left: 280;
position: relative;
background:red;
padding:10px;
}
.left-sidebar {
left:0;
width: 100px;
min-height: 500px;
position: absolute;
background: black;
height:100%;
}