I have multiple divs that are stacked in a vertical fashion but when I resize the window the text from one div overflows into other divs and all text on the page becomes unreadable because they are all overlaying eachother. Is it possible to make it so that when the window is resized instead of divs overflowing into eachother they instead expand their height so they are stacked on top of eachother?
Here's my CSS
.middle {
height: 100%;
width: 65%;
position: relative;
top: 74px;
margin: auto;
}
.middle .portSection {
position: relative;
display: inline-block;
width: 100%;
height: 450px;
}
.middle .portSection .left {
position: absolute;
height: 100%;
width: 50%;
left: 0px;
}
.middle .portSection .right {
position: absolute;
height: 100%;
width: 50%;
right: 0px;
}
.middle .portSection .left .description {
position: relative;
height: auto;
width: 100%;
font-size: 30px;
}
".middle" is what holds all of the divs, ".middle .portSection .left .description" is the p element that is overflowing
Most of your css seems redundant here. By using position absolute you are removing the elements from the document flow.
I recommend you instead use flexbox as it's much better designed to handle this type of layout.
.middle .portSection {
display: flex;
height: 450px;
}
.middle .portSection .left {
background: #f88;
flex:1;
}
.middle .portSection .right {
background: #88f;
flex:1;
}
.middle .portSection .left .description {
font-size: 30px;
}
<div class="middle">
<div class="portSection">
<div class="left">
</div>
<div class="right">
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue nisi pellentesque, consectetur tellus sit amet, convallis sem. Pellentesque in ante mauris. Quisque sodales ex sagittis, eleifend tellus eget, iaculis risus. Aenean imperdiet risus
eu lacus varius, non auctor tortor vehicula. Phasellus sed augue in neque auctor tempor. Cras bibendum mauris velit, id rhoncus diam fermentum eget. Proin quis condimentum nisl. Fusce consequat augue ullamcorper, ornare felis quis, volutpat mauris.
</p>
</div>
</div>
</div>
try adding this to your styles
.left .description {
max-width: 100%;
}
Or,
.left .description p {
word-wrap: break-word;
}
Try
.middle .portSection .left .description {
position: relative;
height: 100%;
width: 100%;
font-size: 30px;
}
It should work :)
.middle {
height: fit-content;
width: 65%;
position: absolute;
top: 74px;
margin: auto;
}
.middle .portSection {
position: relative;
display: inline-block;
width: 100%;
height: 450px;
}
.middle .portSection .left {
position: absolute;
height: 100%;
width: 50%;
left: 0px;
}
.middle .portSection .right {
position: absolute;
height: 100%;
width: 50%;
right: 0px;
}
.middle .portSection .left .description {
position: absolute;
margin: 10px 0;
padding: 2px 0;
height: max-content;
width: 100%;
font-size: 30px;
}
if this does not work, then please share your HTML also.
I can't understand what you want to explain but I some what figure out that you want to show two paragraphs side by side in middle. Right?
the problem caused because you user position absolute and relative as the div scale full display after adding position absolute and it is very difficult to figure out relative position for all child div if you are not well familiar with position properties. In this case I will suggest you to use flex-box. It will make your work easy as below :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
*
{
padding: 0px;
}
.middle {
display: flex;
width: 65%;
margin: auto;
align-items: center;
height: 90vh;
}
.middle .portSection {
display: flex;
width: 100%;
height: 450px;
}
.middle .portSection .left {
background: grey;
display: flex;
width: 100%;
height: 100%;
padding: 5px;
}
.middle .portSection .right {
background: grey;
display: flex;
width: 100%;
height: 100%;
padding: 5px;
}
.middle .portSection .left .description {
background: skyblue;
height: auto;
width: 100%;
font-size: 30px;
}
.middle .portSection .right .description {
background: skyblue;
height: auto;
width: 100%;
font-size: 30px;
}
</style>
</head>
<body>
<div class="middle">
<div class="portSection">
<div class="left">
<p class="description">Here is a div1 sddfsdafdsfdsf ds dsfds s fdsaf sdf dsf sdfds fdsf d fdf dsf ds fdsfds fdsf dsa f dsa fda</p>
</div>
</div>
<div class="portSection">
<div class="right">
<p class="description">Here is a div2 sddfsdafdsfdsf ds dsfds s fdsaf sdf dsf sdfds fdsf d fdf dsf ds fdsfds fdsf dsa f dsa fda</p>
</div>
</div>
</div>
</body>
</html>
Related
I'm writing a website for a restaurant (Not commercially) and need to know why there's so much whitespace to the right side of the page? Take a look
.top-container{
background-color: white;
background-image: url("images/charmlogoTrans.png");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size:contain;
position: relative;
max-width: 100%;
}
.menuBar{
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
z-index: 3;
}
.content{
padding:16px;
background-color:rgba(230,199,177,255);
margin-left: 2%;
margin-right: 50%;
margin-top: 2%;
border-radius:4px;
position: relative;
z-index: 1;
}
.imgContent{
position: absolute;
z-index: 2;
left: 50%;
width: 100%;
height:auto;
}
.exampleImg{
width: 32%;
height:auto;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
<body>
<div class="top-container"></div>
<div class="menuBar" id="menuBar"> The sticky bar</div>
<div class="mainContent">
<div class="imgContent">
<img class="exampleImg" src="Images/example.png" width="300" height="200">
</div>
<div class="content">
<h3>Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed
fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit eu erat eget
hendrerit.
</h3>
</div>
<img src="Images/example.png" width="300" height="200">
<img src="Images/example.png" width="300" height="200">
</div>
</body>
Please excuse me for such messy code, I'm still learning how to do some things. The measurements I'm still working on a bit, but any help is appreciated! If there's anything I've missed, or need to include, please let me know.
That's because imgContent is taking position: absolute, left: 50% so the element will overflow the page because you also set the width of imgContent to 100% there's 3 ways to fix this
set witdth to less than 100% something like 45% is enough
set Left to 0;
use flex box instead that's will be better in fact
Welcome to SO,
Try this!
It seems that the 50% left was adding the whitespace!
body {
margin: 0;
overflow-x: hidden;
width: 100vw
}
.top-container {
background-color: white;
background-image: url("images/charmlogoTrans.png");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 100vw;
}
.menuBar {
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
z-index: 3;
}
.content {
padding: 16px;
background-color: rgba(230, 199, 177, 255);
margin-left: 2%;
margin-right: 50%;
margin-top: 2%;
border-radius: 4px;
position: relative;
z-index: 1;
}
.imgContent {
position: relative;
z-index: 2;
width: 100vw;
height: auto;
}
.exampleImg {
width: 32vw;
height: auto;
}
.sticky {
position: fixed;
top: 0;
width: 100vw;
}
.sticky+.content {
padding-top: 102px;
}
<body>
<div class="top-container"></div>
<div class="menuBar" id="menuBar"> The sticky bar</div>
<div class="mainContent">
<<div class="imgContent">
<img class="exampleImg" src="Images/example.png" width="300" height="200">
</div>
<div class="content">
<h3>Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit eu erat eget hendrerit.
</h3>
</div>
<img src="Images/example.png" width="300" height="200">
<img src="Images/example.png" width="300" height="200">
</div>
</body>
I'm working on the sidebar where we have a logo at the top and some bottom div. The middle div "content" has overflow: scroll and contains paragraph(s). So what I need... If I have only one paragraph (or two p) the button div should be positioned absolutely at the bottom of the content and if I have more paragraphs which have a bigger height than "content" div so then the button div will have position static (so will be scrollable).
And I need it only by CSS. Is it possible?
We need IE11+ support.
<div class="sidebar">
<div class="logo">logo</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor egestas ornare. Suspendisse potenti. Integer non euismod nulla. Quisque pretium est sit amet congue rhoncus.</p>
<div class="button">
Button
</div>
</div>
<div class="bottom"></div>
</div>
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 300px;
background-color: grey;
}
.logo {
position: absolute;
width: 100%;
height: 55px;
background-color: red;
}
.bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: green;
}
.content {
position: absolute;
top: 55px;
bottom: 100px;
overflow-y: scroll;
}
.button {
display: inline-block;
padding: 1em 0 1em;
text-align: center;
width: 100%;
border-radius: 50px;
background-color: white;
}
You can use flexbox. Add this to your CSS:
.content {
display:flex;
flex-wrap: wrap;
}
.button {
align-self: flex-end;
}
That will render the button always at the end of the content div.
This question already has answers here:
How to align 3 divs (left/center/right) inside another div?
(21 answers)
Closed 6 years ago.
How can i make 3 divs side by side. where div1 would be extreme left ,div3 would be extreme right and div2 in the middle.
I know this can be done by display:flex and justify-content:space-between ,but i am looking for an approach without flex.
Here is my approach ,but could not achieve it successfully.
I tried to make all div's display:inline-block and float:left and float:right to the two extreme divs and for the middle one i tried margin:auto,but looks like it is not respecting it
Please help
.container {
border: 1px solid;
}
.container div {
height: 50px;
width: 50px;
background: red;
display: inline-block;
}
#div1 {
float: left;
}
#div3 {
float: right;
}
#div2 {
margin: auto;
}
<div class="container">
<div id="div1"></div>
<div id="div2">he</div>
<div id="div3"></div>
</div>
try this one. position: absolute;
.container {
border: 1px solid;
position: relative;
overflow: hidden;
}
.container div {
height: 50px;
width: 50px;
background: red;
display: inline-block;
}
#div1 {
float: left;
}
#div3 {
float: right;
}
#div2 {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
<div class="container">
<div id="div1"></div>
<div id="div2">he</div>
<div id="div3"></div>
</div>
this is what your code will be
.container {
border: 1px solid;
}
.container div {
height: 50px;
width: 50px;
background: red;
display: inline-block;
}
#div1 {
float: left;
background-color:red;
}
#div3 {
float: left;
background-color:green;
}
#div2 {
float: left;
background-color:yellow;
}
and
<div class="container">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
</div>
Kindly check below CSS see if this is what you want:
.container {
float: left;
width: 300px;
border: 1px solid;
}
#div1 {
float: left;
width: 100px;
background-color: red;
}
#div2 {
float: left;
width: 100px;
background-color: green;
}
#div3 {
float: left;
width: 100px;
background-color: blue;
}
<div class="container">
<div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</div>
<div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat.</div>
</div>
.container {
border: 1px solid;
position: relative;
}
.container div {
height: 50px;
width: 50px;
background: red;
display: block;
}
#div1 {
float: left;
}
#div3 {
position: absolute;
right: 0;
top: 0;
}
#div2 {
margin: auto;
}
<div class="container">
<div id="div1"></div>
<div id="div2">he</div>
<div id="div3"></div>
</div>
Don't use float and inline-block together. This will work:
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
.container {
width:100%;
}
#div1, #div2, #div3 {
height: 50px;
background: red;
display: inline-block;
width:33.33%;
margin-right:-4px;
}
If you want to style the divs individually then target them individually
I am struggling with a layout problem and I hope to find some help to solve it.
I am designing a page with row/lane based content.
Each row has multiple div elements with some content.
So it has to be possible to scroll through the rows vertically as well as horizontally.
Now the problem is, that the first div element inside every row is kind of like the row header, which provides some description about the content of that row.
I want this div element to always stay visible during horizontal scrolling.
Position: fixed is not a option since it would prevent the "row-header" to scroll with its content during a vertical scroll.
What it should look like during a horizontal scroll
Here's the fiddle with my code: https://jsfiddle.net/rco56cbp/
html,
body {
font-family: 'Arial', sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
header {
background: #F7F7F7;
box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.50);
/**/
width: 100%;
height: 90px;
/**/
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 55;
top: 0;
}
/* Left Sidebar */
.side-bar-bg {
width: 130px;
height: 100vh;
z-index: -1;
position: fixed;
background: #F7F7F7;
border: 1px solid #E0E0E0;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
}
/* Wrapper around main content */
.content-container {
margin-top: 110px;
height:100%;
position:absolute;
width:100%;
}
/* Content elements*/
.lane,
.lane-head,
.phase,
.lane-content {
display: flex;
}
.lane {
margin-bottom: 1.25em;
//flex-direction: row;
align-items: center;
}
.lane-head {
min-width: 130px;
background-color: #ffffff;
box-shadow:0px 0px 0px 1px #BFC0C2 inset;
/* Flex & Layout */
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-self: stretch;
/**/
margin-right: 1em;
}
.lane-label {
font-weight: 500;
font-size: 13px;
color: rgba(82,94,106,0.65);
line-height: 22px;
margin-left: 1em;
margin-right: 1em;
text-align: center;
}
.lane-content {
z-index: -3;
}
/* Grid System */
.col-1 { min-width: 200px; max-width: 200px; }
.col-2 { min-width: 420px; max-width: 420px; }
.col-3 { min-width: 640px; max-width: 640px; }
.col-1, .col-2, .col-3 { margin-right: 20px; }
.textbox {
padding: 0.7em 1em 1.5em 1em;
color: #FFFFFF;
min-width: 200px;
max-width: 200px;
background-color: #78BE20;
}
.phase {
background: #005691;
align-self: stretch;
align-items: center;
padding: 0.6em 1em;
}
/* Typo */
.phase {
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
}
.textbox h3 {
font-weight: bold;
font-size: 16px;
margin: 0 0 0.3em 0;
}
.textbox p {
font-weight: normal;
font-size: 13px;
margin: 0 0;
}
<header>
<h1>Header</h1>
</header>
<div class="side-bar-bg"></div>
<!------ CONTENT ------>
<div class="content-container">
<div class="lane">
<div class="lane-head"><span class="lane-label">Small Boxes</span></div>
<div class="lane-content">
<div class="phase col-2">Lorem Ipsum</div>
<div class="phase col-3">Bacon Ipsum</div>
<div class="phase col-2">Egg Ipsum</div>
</div>
</div>
<div class="lane">
<div class="lane-head"><span class="lane-label">Bigger Boxes</span></div>
<div class="lane-content">
<div class="textbox col-1">
<h3>Aenean commodo</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
<div class="textbox col-1">
<h3>Consequat</h3>
<p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
</div>
</div>
</div>
</div>
The fixed left sidebar shall serve as a background to the "lane-headers".
The reason I want the lane-headers and the lane-content to be inside one div container is that later the whole canvas becomes dynamic and interactive. The content will be generated dynamically and the user will be able to interact with the canvas with drag-drop and so on.
I would appreciate your help very much, thanks in advance!
Hi you need to use javascript as well, once you scroll down or up add a class say posi_stat which will be position:static.and when you do horizontal scrolling just remove the class. In default case it will be position :fixed .
Something like this , you need to remove the class , and add on scrolldown too
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
//your code , what should be done//
}
});
});
Similarly to it for .scrollBottom(); .scrollRight(); .scrollLeft();
Okay I kind of found a solution to it thanks to this: Fixed position in only one direction in future releases of CSS?
Although the javascript solution did not work for me (I still can't figure out why), the CSS solution works pretty good.
By adding the following lines to the .lane-head class the problem was solved:
left: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
Using the new "position: sticky" property you can perfectly stick any element basically anywhere you want.
Unfortunately Chrome still does not support this yet, but Safari and Firefox do.
I have a webpage where I would like all the elements fixed in place so that there are no scrollbars for the page as a whole. I have a header, a menu on the left side, and an area where a plot will appear and then directly below the plot should be a list.
There is a gap between the header and the plot area that I can't get rid of. I have the margins and padding already set to 0. Also, the plot should be taking up 60% of the room below the header and the list 40%, but neither are correct and both elements end well above the bottom of the page in the vertical.
html,
body {
margin: 0;
padding: 0;
}
.float {
width: 100%;
background-color: blue;
padding-top: 60px;
display: flex;
display: -webkit-flex;
}
.main_title {
width: 70%;
height: 60px;
display: flex;
display: -webkit-flex;
flex-wrap: nowrap;
flex-flow: column;
justify-content: center;
background-color: red;
}
.clock {
width: 30%;
height: 60px;
background-color: green;
}
.header {
display: -webkit-flex;
display: flex;
height: 60px;
position: fixed;
width: 100%;
background-color: red;
margin: 0;
}
.menu {
width: 130px;
flex: 0 0 130px;
background-color: yellow;
height: 100%;
position: fixed;
}
.column_main {
flex: 1;
background-color: purple;
padding-left: 130px;
float: right;
}
.plot-wrapper {
width: 100%;
background-color: brown;
height: 60%;
}
#list {
background-color: lightblue;
width: 100%;
height: 40%;
position: fixed;
}
<body>
<div class="header">
<div class="header">
<div class="main_title">title</div>
<div class="clock">time</div>
</div>
</div>
<div class="float">
<nav class="menu">
<p>menu</p>
</nav>
<div class="column_main">
<div class="plot-wrapper">
<p>plot wrapper</p>
</div>
<div id="list">
<p>list</p>
</div>
</div>
</div>
</body>
If I understood your right, the following is one way of doing it that does not involve using flex.
In the header, I use floats to place the two elements side by side.
I then use absolute positioning to create the .float panel, adjusting the top offset to set the top edge right below the header, and stretching it full width and to the bottom by setting all other offsets to zero.
I then use absolute positioning to place the .menu to the left, taking up the left 130px width of the block, and then simarly to create a the .column_main block such that it takes up the remainder of the space.
Within .column_main, I keep .plot-wrapper and #list as regular in-flow elements and set the heights to 60% and 40% respectively. I add overflow: auto so as to prevent any margins (on p elements for example) from collapsing and creating unwanted whitespace.
html, body {
margin: 0;
padding: 0;
}
.header {
height: 60px;
background-color: red;
overflow: auto;
}
.main_title {
float: left;
width: 70%;
height: 60px;
background-color: red;
}
.clock {
float: left;
width: 30%;
height: 60px;
background-color: green;
}
.float {
position: absolute;
left: 0;
right: 0;
top: 60px;
bottom: 0;
}
.menu {
background-color: yellow;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 130px;
}
.column_main {
position: absolute;
left: 130px;
right: 0;
top: 0;
bottom: 0;
background-color: purple;
}
.plot-wrapper {
overflow: auto;
background-color: brown;
height: 60%;
}
#list {
overflow: auto;
background-color: lightblue;
height: 40%;
}
<div class="header">
<div class="main_title">title</div>
<div class="clock">time</div>
</div>
<div class="float">
<nav class="menu">
<p>menu</p>
</nav>
<div class="column_main">
<div class="plot-wrapper">
<p>plot wrapper</p>
</div>
<div id="list">
<p>list</p>
</div>
</div>
</div>
I changed your code a bit but I was confused in your explanation, so I did this, If I am incorrect I apologize but hey I tried. :D
HTML:
<div id="page">
<header class="main-hdr">
<div>
<h1>Title</h1>
</div>
<div>00:00:00</div>
</header>
<main class="main-content">
<nav>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<section>
<h2>Plot</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</p>
</section>
<aside>
<h3>Lists</h3>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</main>
</div>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', 'DejaVu Sans', sans-serif;
}
body {
text-align: center;
background-color: #fff;
color: #000;
font-size: 100%;
overflow: hidden; /*prevent scrollbars*/
}
header, main, section, aside, nav {
display: block;
}
#page,
.main-hdr {
width: 100%;
clear: both;
margin: 0 auto;
overflow: hidden;
}
.main-hdr {
display: flex;
}
.main-hdr div {
float: left;
}
.main-hdr div:first-child {
background-color: #aa0b6b;
width: 80%;
}
.main-hdr div:last-child {
width: 20%;
background-color: #20aa5c;
}
.main-content {
clear: both;
}
.main-content nav {
float: left;
width: 20%;
}
.main-content section {
width: 60%;
float: left;
}
.main-content aside {
width: 20%;
float: left;
}
RESULT:
EXAMPLE
Here's a plunker and a snippet below:
html,
body {
box-sizing: border-box;
font: 400 16px/1.5'Palatino Linotype';
width: 100vw;
height: 100vh;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
body {
color: #111;
background-color: lightblue;
font-variant: small-caps;
font-size: 1rem;
}
.shell {
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.core {
width: calc(100% - 130px);
height: calc(100% - 60px);
background-color: blue;
left: 130px;
top: 60px;
position: fixed;
}
.title {
width: 70%;
line-height: 1;
vertical-align: central;
background-color: red;
position: fixed;
top: 14px;
}
.clock {
width: 30%;
height: 60px;
background-color: lime;
position: fixed;
right: 0;
top: 0;
}
header {
height: 60px;
width: 100%;
background-color: red;
top: 0;
left: 0;
z-index: 11;
position: fixed;
}
.menu {
width: 130px;
background-color: yellow;
height: calc(100% - 60px);
top: 60px;
left: 0;
position: fixed;
}
.plot {
width: calc(100% - 130px);
background-color: brown;
height: calc(60% - 30px);
top: 60px;
left: 130px;
position: fixed;
}
#list {
background-color: lightblue;
width: calc(100% - 130px);
height: calc(40% - 30px);
bottom: 0;
left: 130px;
padding: 20px;
position: fixed;
}
#list dd {
text-indent: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<section class="shell">
<header class="header">
<h1 class="title">title</h1>
<h3 class="clock">time</h3>
</header>
<nav class="menu">
<h3>Menu</h3>
</nav>
<main class="core">
<section class="plot">
<h2>plot wrapper</h2>
</section>
<dl id="list">
<dt>List Section</dt>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
<dd>List Item</dd>
</dl>
</main>
</section>
</body>
</html>