I have this code with the reqirement to add another side menu to my existing page
https://jsfiddle.net/84j7wcqa/
<div class="wrapper">
<div class="header">
<div class="inner">header</div>
</div>
<div class="top">
<div class="inner">top</div>
</div>
<div class="content">
<div class="inner">
<div class="right">
<div style="height:1000px;">right</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner">footer</div>
</div>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
display: table;
}
.header, .content, .footer, .top {
display: table-row;
}
.header, .footer {
background: silver;
}
.inner {
display: table-cell;
}
.content .inner {
height: 100%;
position: relative;
background: pink;
}
.right {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.top {
background-color: gold;
}
which looks this way:
But I want a additional content which is scrollable to look it like this
Question: Can this be solved with the table / table-row / table-cell approach?
Check my answer in this link. Hope this helps.
https://jsfiddle.net/m2vpcs1u/3/
HTML:
<div class="wrapper">
<div class="header">
<div class="inner">header</div>
</div>
<div class="top">
<div class="inner">top</div>
</div>
<div class="content">
<div class="inner">
<div class="right">
<div style="height:1000px;">right</div>
</div>
<div class="left">
<div style="height:1000px;">left</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner">footer</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
display: table;
}
.header, .content, .footer, .top {
display: table-row;
}
.header, .footer {
background: silver;
}
.inner {
display: table-cell;
}
.content .inner {
height: 100%;
position: relative;
background: pink;
}
.right {
position: absolute;
left: 50%;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
width:50%;
}
.left {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
width:50%;
}
.top {
background-color: gold;
}
You can use this code
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
display: table;
}
.header, .content, .footer, .top {
display: table-row;
}
.header, .footer {
background: silver;
}
.inner {
display: inline-block;
float: left;
width: 100%;
}
.inner .left {
display: inline-block;
width: 50%;
float: left;
overflow: auto;
height: 900px;
}
.inner .right {
display: inline-block;
width: 50%;
float: left;
overflow: auto;
height: 900px;
}
.content .inner {
height: 100%;
position: relative;
background: pink;
}
.top {
background-color: gold;
}
<div class="wrapper">
<div class="header">
<div class="inner">header</div>
</div>
<div class="top">
<div class="inner">top</div>
</div>
<div class="content">
<div class="inner">
<div class="left">
<div style="height:1000px;">left</div>
</div>
<div class="right">
<div style="height:1000px;">right</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner">footer</div>
</div>
</div>
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>
Basically I'm trying to make a topbar with information on it, I was just about to change my stuff to a list till I noticed "The pink bar" going over the discord icon, how do I go about fixing this problem; the position is set to absolute.
* {
margin: 0;
}
body {
background: #a89ed2
}
.TopBar {
overflow: hidden;
position: relative;
background: #483467;
box-sizing: border-box;
}
#bottom {
position: absolute;
background: #ea5773;
width: 100%;
height: 10%;
left: 0;
top: 90%;
}
#media {
position: absolute;
display: inline-block;
left: 0%;
top: 0%;
}
#media img {
width: 15%;
height: 10%;
}
.wrapper1 {
padding: 2%
}
<body>
<div class=TopBar>
<div class=wrapper1>
<div id=bottom></div>
<div id=media>
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class=content></div>
</body>
Use id or class with double quotes(" classname | id ")
<!doctype HTML>
<html>
<body>
<div class="TopBar">
<div class="wrapper1">
<div id="bottom"></div>
<div id="media">
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class="content"></div>
</body>
</html>
Add a specific height to topbar and remove overflow:hidden
.TopBar {
height: 85px;
}
* {
margin: 0;
}
body {
background: #a89ed2
}
.TopBar {
overflow: hidden;
position: relative;
background: #483467;
box-sizing: border-box;
}
#media {
width: 100px;
height: 100px;
}
#media img {
max-width: 100%;
position: relative;
height: auto;
}
#media::before{
background: #ea5773;
width: 100%;
height: 10px;
position: absolute;
content: '';
bottom: 0;
left: 0;
right: 0;
}
.wrapper1 {
padding-bottom: 10px;
}
<body>
<div class="TopBar">
<div class="wrapper1">
<div id="media">
<img src="https://cdn1.iconfinder.com/data/icons/logos-and-brands-3/512/91_Discord_logo_logos-512.png">
</div>
</div>
</div>
<div class="content"></div>
</body>
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 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've been trying to figure how to achieve this without JavaScript and padding and so far it's been mission impossible. Does anyone know if there is any way with pure CSS and divs to achieve a simple layout:
http://jsfiddle.net/zLzg8v3s/1/
This is exactly what I'm trying to do but with divs and CSS:
http://jsfiddle.net/u0u7snh6/1/
HTML
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
<div class="tableCell">
<div>
This is the top banner
</div>
</div>
</div>
<div class="tableRow tableContent">
<div class="tableCell">
<div id="content">
This is the content
</div>
</div>
</div>
<div id="footer" class="tableRow" id="bottom">
<div class="tableCell">
<div>
This is the footer
</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.tableRow {
display: table-row;
text-align: center;
height: 1px;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.tableCell div {
max-width: 400px;
margin: auto;
background-color: brown;
}
.tableContent {
height: 100%;
background-color: yellow;
vertical-align: middle;
}
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
.contentDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#header {
background-color: pink;
}
#footer {
background-color: orange;
}
This is as close as I can get to the layout... what I cannot fix:
1) The content inside the Content div should be vertically aligned middle (very important that the BG of the content cell also is 100% height so it connects to the header and footer)
2) There should not be any overflow: this is a IE8 behavior only (as far as I could tell), so it will be hard to see in JsFiddle... the full code below can be tested locally with IE8's emulation mode:
<!doctype html>
<html lang="en-CA" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MOCKUP</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.tableRow {
display: table-row;
text-align: center;
height: 1px;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.tableCell div {
max-width: 1200px;
margin: auto;
background-color: brown;
}
.tableContent {
height: 100%;
background-color: yellow;
vertical-align: middle;
}
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
.contentDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#header {
background-color: pink;
}
#footer {
background-color: orange;
}
</style>
</head>
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
<div class="tableCell">
<div>
This is the top banner
</div>
</div>
</div>
<div class="tableRow tableContent">
<div class="tableCell">
<div id="content">
This is the content
</div>
</div>
</div>
<div id="footer" class="tableRow" id="bottom">
<div class="tableCell">
<div>
This is the footer
</div>
</div>
</div>
</body>
</html>
Okay found the problem in your code: http://jsfiddle.net/zLzg8v3s/9/
For IE8 testing : http://jsfiddle.net/zLzg8v3s/9/show/
CSS:
#content{
margin: 0 auto;
}
Remove this from your css:
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
Removing the asterisk fixed everything.
Solution: 2 JSFIDDLE: http://jsfiddle.net/p1bbyfqa/2/
HTML:
<div id="container">
<div class="header">
<h4>This is header</h4>
</div>
<div class="row">
<div class="content">
<div class="left">Left Col</div>
<div class="middle">Middle Col<br />
Middle Col<br />
Middle Col<br />
Middle Col<br />
Middle Col<br />
</div>
<div class="right">Right Col</div>
</div>
</div>
<div class="footer">
<h4>This is footer</h4>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.row {
display: table-row;
width:100%;
height: 100%;
}
.header, .footer{
background: pink;
display:table-row;
text-align: center;
vertical-align: middle;
}
.content {
display: table;
background: brown;
width:100%;
height: 100%;
overflow: auto;
}
.left, .right{
background: green;
display: table-cell;
width:10%;
vertical-align: middle;
}
.middle{
background: brown;
display: table-cell;
vertical-align: middle;
}