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%;
}
Related
How to only make #content scrollable but keep #header and #sidebar fixed?
And is flexbox the best way to do it?
https://jsfiddle.net/3pnj1k5b/
html,
body {
margin: 0;
}
#page-app {
display: flex;
height: 100%;
background: red;
}
#sidebar {
width: 200px;
background: blue;
}
#header {
height: 60px;
background: pink;
}
#body {
flex: 1;
background: green;
}
#content {
overflow: auto;
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content">
content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>
It's position:fixed that fixes element to their position. It was basically what I've added.
html,
body {
margin: 0;
}
#page-app {
display: flex;
height: 100%;
background: red;
}
#sidebar {
position: fixed;
height: 100%;
width: 200px;
background: blue;
z-index: 2
}
#header {
height: 60px;
background: pink;
position: fixed;
padding-left: 200px;
width: 100%;
z-index: 1;
}
#body {
flex: 1;
background: green;
}
#content {
overflow: auto;
margin-left: 200px;
margin-top: 60px;
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content">
content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b content
<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>
Make the html,body height: 100%;. Then add a max-height to #page-app. Then make #sidebar and #header position: sticky;. Finally, just set the height of #content to be 100% minus the height of the header. In your case I used a calc to set that height. See below:
html,
body {
margin: 0;
height: 100%;
}
#page-app {
display: flex;
max-height: 100%;
background: red;
}
#sidebar {
width: 200px;
background: blue;
position: sticky;
}
#header {
height: 60px;
background: pink;
position: sticky;
}
#body {
flex: 1;
background: green;
}
#content {
overflow: auto;
height: calc(100% - 60px);
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content"> content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>
Make the #header position: sticky and the #body scrollable with overflow-y: scroll;
Codepen here
html,body{
margin:0;
height: 100%;
position: relative;
}
#page-app{
display:flex;
height:100%;
background:red;
overflow-y: hidden;
}
#sidebar{
width:200px;
height: 100%;
background:blue;
}
#header{
height:60px;
background:pink;
position: sticky;
top: 0;
}
#body{
flex:1;
background:green;
overflow-y: scroll;
}
<div id="page-app">
<section id="sidebar">
sidebar
</section>
<div id="body">
<header id="header">
header
</header>
<section id="content">
content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</section>
</div>
</div>
So I have 3 divs side by side inside the div element and another div after them. However, this div is overlapping the others. How can I make "footer" come after "main"?
.main {
height: 500px;
width: 100%;
position: absolute;
}
.filter {
background: red;
height: 100%;
float: left;
width: 20%;
}
.post-bar {
background: blue;
height: 100%;
float: left;
width: 60%;
}
.advertisment {
background: green;
height: 100%;
float: left;
width: 20%;
}
.footer {
height: 250px;
width: 100%;
background: black;
position: relative;
}
<div class="main">
<div class="filter">
</div>
<div class="post-bar">
</div>
<div class="advertisment">
</div>
</div>
<div class="footer"></div>
Just get rid off position:absolute in your main class:
.main {
height: 500px;
width: 100%;
}
.filter {
background: red;
height: 100%;
float: left;
width: 20%;
}
.post-bar {
background: blue;
height: 100%;
float: left;
width: 60%;
}
.advertisment {
background: green;
height: 100%;
float: left;
width: 20%;
}
.footer {
height: 250px;
width: 100%;
background: black;
position: relative;
}
<div class="main">
<div class="filter">
</div>
<div class="post-bar">
</div>
<div class="advertisment">
</div>
</div>
<div class="footer"></div>
Just remove the
position: absolute;
display: block;
from
.main
I think you will find your desired result. Please , inform if there are any other issues. Thank you.
Remove positions from main and footer.
.main {
height: 500px;
width: 100%;
float:left;
}
.footer {
height: 250px;
width: 100%;
background: black;
float:left;
}
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>
Ok, I'm setting up a mini-page and I want it to be 100% scalable so I'm trying to use only %.
But I don't get the "items" to take the 33% width and distribute is over the 80% of "content".
What am I doing wrong?
body, html{
width: 100%;
height: 100%;
}
.menu{
width: 20%;
height: 100%;
background: #fff;
float: left;
}
.content{
width: 80%;
height: 100%;
background: #eee;
float: left;
}
.bottom{
position: absolute;
bottom: 0;
}
.item{
width: 33%;
float: left;
}
.red{background: red;}
.blue{background: blue;}
.green{background: green;}
<div class="menu">menu</div>
<div class="content">content
<div class="bottom">
<div class="item red">left</div>
<div class="item blue">mid</div>
<div class="item green">right</div>
</div>
</div>
Try like this: Demo
.content{
position: relative;
}
.bottom{
width:100%;
}
.item{
box-sizing:border-box;
}
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/