My problem is the following: I have a website with a header, left navigation and a footer (not in the code right now). The header and the left navigation have to be static and only the rest of the page should move, that's why I started with making my left navigation menu 100% width. But height: 100%, doesn't seem to be working.
Could someone give me a tip or maybe anybody knows why I have this problem?
edit: that space under the footer and the left navigation shouldn't be there. That was a fail from when I took the screenshot.
Code: (index.php)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="design.css">
<title>Hardvision</title>
<script src="https://kit.fontawesome.com/743ddd1f40.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<header>
<div class="container-fluid">
<div class="row">
<div class="col-2 logo">
<img src="logo2.png" height="90px" width="90px">
</div>
<nav class=" col-9 px-0">
<div class="mainnav">
<ul class="px-0">
<li>
<a class="li" href="#">Lorem ipsum</a>
</li>
<li>
<a class="li" href="#">Lorem ipsum</a>
</li>
<li>
<a class="act" href="#">Lorem ipsum</a>
</li>
<li>
<a class="li" href="#"><i class="fas fa-user fa-lg"></i></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<hr>
<main>
<div class="leftnav">
<nav>
<div class="leftnavtable">
<li>
<p>Lorem ipsum</p>
</li>
<li>
<p>Lorem ipsum</p>
</li>
<li>
<p>Lorem ipsum</p>
</li>
</div>
</nav>
</div>
<div class="fullheight">
<p>Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
</div>
</main>
<footer>
</footer>
</div>
</body>
</html>
Code: (design.scss)
//variables
$defaultfont: Arial, sans-serif;
$defaultfontsize: 16px;
$gray1: #A9A9A9;
$gray2: #DDDDDD;
$break_small: 900px;
$break_large: 1170px;
$headerheight: 110px;
//general
html {
font-size: $defaultfontsize;
font-family: $defaultfont;
}
//tags
header {
background-color: $gray1;
}
hr {
border: none;
height: 1px;
background-color: #333;
margin: 0px;
}
a {
color: black;
}
//logo positioning
.container-fluid {
.row {
height: $headerheight;
}
.logo {
padding: 10px 0px 0px 100px;
#media screen and (max-width: $break_large) {
padding: 10px 0px 0px 50px;
}
#media screen and (max-width: $break_small) {
padding: 10px 0px 0px 40px;
}
}
}
//Header navigation
.mainnav {
ul, li {
display: flex;
list-style: none;
justify-content: space-around;
align-items: flex-end;
height: 70px;
}
}
//whole page height exactly 100%
html, body, main, .leftnav, .leftnavtable, .fullheight {
height: 100%;
margin: 0;
overflow: auto;
}
//Left navigation container
.leftnav {
padding: 0;
background-color: $gray2;
display: flex;
flex-flow: column;
width: 250px;
float: left;
}
//Left navigation
.leftnavtable {
width: 250px;
ul, li {
list-style: none;
padding: 40px 0px 0px 35px;
}
}
//Text area
main .leftnav {
float: left;
}
You need to set height in "vh" instead of "%".
But you also need to calculate the height.. see example below
height: calc(100vh - height of header); If header height = 100px;
.leftnav {
height: calc(100vh - 100px);
}
Assuming height of navbar 70px and footer 100px and assuming width of sidebar 250px
.fullheight {
height: calc(100vh -170px);
width: calc(100vh - 250px);
overflow:auto
}
Also good to know, building layouts with flexbox CSS gives you some more freedom to play with elements shrinking and growing automatically instead of defining the height and width of the elements.
This can help you in the future to make better decision on to how to structure your HTML templates.
I coded you a quick example provided with your screenshot.
Learn more about flexbox here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
header {
height: 80px;
background-color: grey;
}
.content-wrapper {
display: flex;
background-color: blue;
}
nav {
background-color: aqua;
min-width: 180px;
}
footer {
background-color: red;
padding: 20px;
}
/* misc styling */
header {
padding: 20px;
}
header ul {
list-style: none;
}
header ul li {
display: inline;
padding: 5px;
}
nav ul li {
padding: 5px 0;
}
main section {
padding: 20px;
}
p {
margin: 0;
}
<header>
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</header>
<div class="content-wrapper">
<nav>
<ul>
<li>Hello world</li>
<li>Hello world</li>
<li>Hello world</li>
<li>Hello world</li>
</ul>
</nav>
<main>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tellus et leo lacinia facilisis nec nec ante. Maecenas sed purus dictum, dignissim ex sit amet, pretium augue. Sed sed diam felis. Aliquam facilisis non nunc ac mattis. In eget
magna ut mauris maximus tincidunt nec ac orci. Sed bibendum mauris erat, nec efficitur tortor aliquet non. Nulla facilisis velit nec nunc tincidunt aliquam. Phasellus et nisl sit amet lorem sodales volutpat. Vivamus mattis justo eu nulla tincidunt
porta. Pellentesque sed urna finibus, vehicula nunc a, vehicula dui. Ut finibus lectus sed odio faucibus dignissim. Nullam egestas posuere porta. Morbi ac tellus imperdiet, fringilla ex a, tincidunt lacus. Nulla facilisi. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque at eleifend elit, in dignissim arcu. Mauris bibendum semper sagittis. Nullam quis ex sed velit porttitor tincidunt. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Vestibulum a convallis dolor. Aliquam in pharetra sem. Phasellus lobortis, diam vel convallis suscipit, nulla turpis pretium risus, sed dignissim tellus nunc vel enim. Fusce dignissim ante sit amet pulvinar
gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In congue mattis fermentum. Duis blandit ornare egestas. Cras at fringilla sem, at aliquet metus. Integer ac lectus sit amet neque efficitur dictum
in eu urna. Maecenas vulputate nec est vitae blandit. Sed aliquet posuere felis, ut tincidunt magna pharetra non. Maecenas facilisis pretium odio, tincidunt porttitor mauris feugiat vitae. Duis blandit quam non magna maximus dignissim non in tellus.
Nam ligula leo, varius iaculis commodo sed, vestibulum sit amet orci. Etiam quis quam eros. In scelerisque vitae risus sed egestas. Proin fermentum venenatis ex et condimentum. Maecenas eu massa ut augue laoreet pharetra at ut mi. Nunc gravida
est sed nibh eleifend condimentum.</p>
</section>
<footer>
Here should be a Footer.
</footer>
</main>
</div>
Use vertical height
.leftnav {
padding: 0;
background-color: $gray2;
display: flex;
flex-flow: column;
width: 250px;
float: left;
height: 100vh;
}
Related
I'm currently making a (static) website from scratch (so code the HTML and CSS stuff myself), and I want to have a responsive "image gallery" that changes the width of the pictures according to your screen width, so I followed this tutorial: CSS Image Gallery - responsive
However, changing it to my own likings I encountered an issue I could not fix with my current HTML/CSS skillset (it is not that much, I'm quite new in this). My problem is when I have (in my example three) images of the same size in my gallery, but the captions of the image have different length, this negatively affects the text that is followed by the gallery (see example and image below). I tried to fix this with the tutorials available at W3 and stuff, but nothing worked yet.
Does any of you how to (easily) fix this? And if so, please explain what you changed, because I want to truly understand what is going on at my website (that is why I didn't want to use these static site generators).
Note: I have made 3 types of galleries, one for two, three and four images, which explains the ".responsivethree" etc classes
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p>
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
The float:left property you gave to the responsivethree class aligns the images to the left. Since you did not reset the left justification feature afterward, you are having a problem with the text scrolling. The clear:both command is used to reset the float:left property.
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p class="clear">
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
I'm trying to replicate the sections on the following page
I'm using flexbox in my version, however my version using flexbox seems to adjust to smaller screen sizes differently. For example the original that I'm trying to copy eats into the margin first as the screen gets smaller before adjusting the size of the text and images. When it does adjust the size of the the text and image it seems to do it a way that's a lot more asthetically pleasing. Once the screen size hits 960px wide I'm going to use media queries to set flexbox to block. However I'd like the text and images to adjust the same was the originally between 1440px and 960px. I've recorded a video to show what I mean - https://youtu.be/1pKq_UW-3Hk
And here's my code...
.section3-h1 {
font-size: 3.125rem;
font-family: "Roboto";
}
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
.section2-head {
margin: 150px;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-flow: row wrap-reverse;
}
.section2-text {
max-width: 537px;
margin-right: 74px;
}
.button {
margin-top: 60px;
}
.section3-head {
margin: 150px;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-flow: row wrap;
}
.section3-text {
max-width: 537px;
margin-left: 74px;
font-family: "Roboto";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<section id="section2">
<header class="section2-head">
<div class="section2-text">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
<img src="https://via.placeholder.com/528x396" alt="" class="section2-img">
</header>
</section>
<section id="section3">
<header class="section3-head">
<img src="https://via.placeholder.com/528x396" alt="" class="section3-img">
<div class="section3-text">
<h1 class="section3-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
</header>
</section>
</body>
</html>
Here is your code completely rewritten, removing all of the max-widths and unnecessary CSS. I added the media query for desktop styles as well.
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
section {
margin: 0 20px;
max-width: 1170px;
padding: 50px 0;
}
section header {
display: flex;
flex-direction: column;
}
section header .text {
margin: 30px 0 0 0;
}
section header img {
display: block;
width: 100%;
height: auto;
}
section.reverse header .text {
order: 2;
}
section.reverse header img {
order: 1;
}
#media (min-width: 992px) {
section {
margin: 40px auto;
}
section header {
flex-direction: row;
flex-wrap: nowrap;
}
section header .text {
flex: 0 0 calc(50% - 30px);
margin: 0 0 0 30px;
}
section header img {
flex: 0 0 calc(50% - 30px);
margin: 0 30px 0 0;
}
section.reverse header .text {
margin: 0 30px 0 0;
order: 1;
}
section.reverse header img {
order: 2;
margin: 0 0 0 30px;
}
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<div class="container">
<section id="section2" class="reverse">
<header class="section2-head">
<div class="section2-text text">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia
nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
<img src="https://via.placeholder.com/528x396" alt="" class="section2-img">
</header>
</section>
</div>
<div class="container">
<section id="section3">
<header class="section3-head">
<img src="https://via.placeholder.com/528x396" alt="" class="section3-img">
<div class="section3-text text">
<h1 class="section3-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia
nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
</header>
</section>
</div>
I've observed that you have written so much redundant code in here. I have reframed you code.
please refer the code below. I have changed all classes and structure to reduce stylesheet overhead.
* {
font-family: "Roboto";
}
.button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
margin-top: 60px;
}
.container {
width: 90%;
margin: 0 auto;
}
.flexbox {
display: flex;
flex-grow: 1;
flex-basis: 0;
}
.flexbox * {
width: 100%;
}
.marr74 {
margin-right: 74px;
}
.marl74 {
margin-left: 74px;
}
.flex-image img {
width: 100%;
}
.heading {
font-size: 3.125rem;
}
#media only screen and (max-width: 764px){
.flexbox {
flex-direction: column;
}
}
And here is HTML
<section>
<div class="container">
<div class="flexbox">
<div class="flex-content marr74">
<p class="heading">Lorem ipsum dolor sit ame. </p>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
READ MORE
</div>
<div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
</div>
<div class="flexbox">
<div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
<div class="flex-content marl74">
<p class="heading">Lorem ipsum dolor sit ame. </p>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
READ MORE
</div>
</div>
</div>
</section>
Also note that you should not use more than one h1 on one single page. This affects the SEO of your website. Instead use p or similar element with font-size to achieve large fonts.
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
So I am just starting to learn some basic CSS and now I have come across some behavior I don't understand. I have a <div> inside an <article> and the <div>s height is set to 100%. Now if all the parents parents of the <div> have their height specified then the height is equal to the parents height, however when it is not the case then <div>s height is smaller.
Here is a simple example when not all heights are specified:
html {
height: 100%;
}
article {
background-color: red;
height: 100%;
}
#side-nav {
background-color: blue;
float: left;
min-width: 10%;
height: 100%;
padding: auto;
margin: 0;
}
#main-content {
margin-left: 10%;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="top-nav">
<div id="main-nav-bar">
<a class="nav-bar-opt">opt1</a>
<a class="nav-bar-opt">opt2</a>
<a class="nav-bar-opt">opt3</a>
</div>
</nav>
<article id="article">
<div id="side-nav">
<ul>
<li><a class="art-link">bullet</a></li>
<li><a class="art-link">point</a></li>
<li><a class="art-link">list</a></li>
</ul>
</div>
<div id="main-content">
<h1>
title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<h3>
title
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<ul>
<li>another</li>
<li>bullet</li>
<li>point</li>
<li>list</li>
</ul>
</div>
</article>
</body>
</html>
note that the <div>(colored in blue) is smaller than the direct parent <article>(colored in red).
So now my question is if there is a reason for this behavior and if there is some workaround to avoid specifying all heights?
You don't specify a height for your <body>, as such the rest of the height is stuck trying to figure out what it's 100% of.
Please set body{height: 100%}, will set the height of both blue and red to 100%, as shown in the below working snippet, hope it helps :)
html, body {
height: 100%;
}
article {
background-color: red;
height: 100%;
}
#side-nav {
background-color: blue;
float: left;
min-width: 10%;
height: 100%;
padding: auto;
margin: 0;
}
#main-content {
margin-left: 10%;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="top-nav">
<div id="main-nav-bar">
<a class="nav-bar-opt">opt1</a>
<a class="nav-bar-opt">opt2</a>
<a class="nav-bar-opt">opt3</a>
</div>
</nav>
<article id="article">
<div id="side-nav">
<ul>
<li><a class="art-link">bullet</a></li>
<li><a class="art-link">point</a></li>
<li><a class="art-link">list</a></li>
</ul>
</div>
<div id="main-content">
<h1>
title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<ul>
<li>another</li>
<li>bullet</li>
<li>point</li>
<li>list</li>
</ul>
</div>
</article>
</body>
</html>
Instead of floating the side-nav element to the left, you need to use flex.
Then you don't need to specify height on every element, as requested.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
main {
height: 98%;
display: flex;
flex-direction: row;
flex: 1 1 auto; /* grow shrink amount */
}
article {
background-color: #ffeeee;
flex-direction: column;
flex: 1 1 auto;
padding: 0.5em;
}
#side-nav {
background-color: #eeeeff;
flex-direction: column;
flex: 1 1 auto;
min-width: 11%;
padding: auto;
margin: 0;
}
#side-nav ul {
list-style-type: none;
margin-left: -2.5em;
}
#side-nav li a {
display: block;
white-space: nowrap;
padding: 0.25em;
}
#side-nav li a:hover {
display: block;
background-color: #0000ff;
color: #fff;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="top-nav">
<div id="main-nav-bar">
<a class="nav-bar-opt">opt1</a>
<a class="nav-bar-opt">opt2</a>
<a class="nav-bar-opt">opt3</a>
</div>
</nav>
<main>
<div id="side-nav">
<ul>
<li><a class="art-link">nav</a></li>
<li><a class="art-link">list</a></li>
<li><a class="art-link">and</a></li>
<li><a class="art-link">some</a></li>
<li><a class="art-link">more</a></li>
<li><a class="art-link">items</a></li>
</ul>
</div>
<article id="article">
<h1>
title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<h3>
title
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<ul>
<li>another</li>
<li>bullet</li>
<li>point</li>
<li>list</li>
</ul>
</article>
</main>
</body>
</html>
I am working on my portfolio for school (I am a developer on Mediacollege Amsterdam) and I need help with my css. I have searched for answers, but I cannot get my page as desired. I have 3 divs, i want 2 of them to be next to each other and the third one below the first one, how would I do that?
I want the picture where it's at and I want the block that starts with "my tasks" where it is, but I want the block that starts with "About the game" positioned directly underneath the image
This is how I have the divs sorted, the div gameplay is the video, the div info is the "my tasks" block and the about div is the "about the game" block.
<div class="item">
<div class="legend">Fear The Blue</div>
<div class="content">
<div class="gameplay">
<video autoplay loop muted>
<source src="resources/video/portfolioVideos/FTB.webm" type="video/webm" />
<source src="resources/video/portfolioVideos/FTB.mp4" type="video/mp4" />
Video not available :(
</video>
</div>
<div class="info">
<span class="tit">My tasks:</span>
<ul>
<li>Puzzle logic</li>
<li>First puzzle</li>
<li>Second puzzle</li>
<li>Audio Manager</li>
<li>Controller support</li>
<li>Inventory</li>
<li>Outline Shader</li>
<li>Movement</li>
<li>Start menu</li>
<li>VR support</li>
<li>Keypad logic</li>
<li>Performance improvements</li>
<li>Door/teleport logic</li>
</ul>
<span class="tit">Engine:</span> Unity3D
<br />
<span class="tit">Language:</span> C#
<br />
<span class="tit">team:</span>
<ul>
<li>2 programmers</li>
<li>3 artists</li>
<li>2 mediamanagers</li>
</ul>
</div>
<div class="about">
<span class="tit">About the game:</span>
<ul>
<li>Single player puzzle game</li>
<li>Oculus support</li>
<li>Best played with controller</li>
</ul>
I've chosen to put this game on my portfolio, because this is my first oculus game. I am also proud of my audiomanager class, inventory class and the endproduct.
</div>
</div>
<div class="foot">
<img class="git" src="resources/images/resources/GithubIcon.png" />
<!--<img class="trailer" src="Images/resources/filmklapper.png"/>-->
<a><img class="game" src="resources/images/resources/controller.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac.zip" web="SchoolFiles/IDP/FearTheBlue/web-build/FearTheBlue.html" /></a>
<a><img class="game" src="resources/images/resources/oculus.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win_Oculus.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac_Oculus.zip" /></a>
</div>
</div>
My full css:
.item
{
font-family: normalFont, sans-serif;
margin: 0.9em auto 0.5em auto;
background-color: #222222;
border-radius: 1em;
display: block;
color: white;
width: 95%;
}
.item .legend
{
font-family: headerFont, sans-serif;
border-top-right-radius: .5em;
border-top-left-radius: .5em;
padding: 0.2em 0 0.2em 0.4em;
background-color: #4CAF50;
font-size: 1.2em;
}
.item .content{padding: .5em;}
.item .gameplay
{
max-width: 100%;
display: block;
margin: 0 auto;
}
.item .gameplay video{width: 100%;}
.item .gameplay img{width: 100%;}
.item .info
{
text-align: left;
display: block;
height: auto;
}
.item .info :visited,
.item .info a:link
{
text-decoration: none;
color: darkorange;
}
.item .info a:hover
{
text-decoration: underline;
color: lightblue;
}
.tit{color: #4CAF50;}
.item ul
{
padding: 0 0 0 1em;
margin: 0;
}
.item li{list-style-type: "- ";}
.item .foot
{
border-radius: 0;
border-bottom-right-radius: .5em;
border-bottom-left-radius: .5em;
background-color: #4CAF50;
width: 100%;
height: 2em;
}
.item .foot a
{
margin: 0.05em 0 0 0.6em;
display: inline-block;
width: 30px;
float: left;
}
.item .foot img
{
cursor: pointer;
width: 100%;
}
.item .foot .game, .item .foot .git{margin-top: 1px;}
#popup .message
{
text-align: center;
margin: 1em;
}
#popup
{
width:11em;
border-radius: .5em;
outline:none;
height:7em;
background-size: 100% 100%;
background-color: #333;
z-index:2;
position:absolute;
margin:0 0 0 -4.56em;
}
.input-group
{
width: 85% !important;
margin: .5em auto !important;
}
.input-field
{
background-color: #222 !important;
border: 1px solid #111 !important;
}
.input-field:hover
{
background-color: #111 !important;
}
.icon-background
{
border: 1px solid #111 !important;
}
#media screen and (min-width:600px){.item{width: 80%;}}
#media screen and (min-width:1000px)
{
.item{width: 60%;}
.item .legend{font-size: 2em;}
.item .gameplay
{
display: inline-block;
margin-top: .3em;
width: 25em;
float: left;
}
.item .about
{
width: 20em;
}
.item .info
{
display: inline-block;
margin: 0 0 0 1em;
max-width: 40%;
}
}
regards,
Dani
Try removing the property
float:left for the image div
Or you can put the two divs that want to be one below the other in one big div and the div you want at right outside in a different div.
From the information you provided, I think you're trying to make a 2 column layout. If you're floating all of your div containers to the left, since you added your "about" div last in your html and because your 2 first div's take up the full width of the container, your third div will be positioned below the div with the greatest height. If you want to avoid this You should use 2 divs (one for each column). Float them both left and add your content inside your respective columns.
.container {
position: relative;
width:100%;
}
.col1{
position: relative;
float:left;
width:60%;
}
.col2 {
position: relative;
float: left;
width: 40%;
}
img {
max-width:100%;
}
<div class="container">
<div class="col1">
<div class="image">
<img src="http://www.telegraph.co.uk/content/dam/pets/2016/03/18/bunny-large_trans_NvBQzQNjv4BqqVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg" />
</div>
<div class="about">
bla bla bla
</div>
</div>
<div class="col2">Cras quis venenatis est, in pretium eros. Duis a rutrum sem, ac ultricies nunc. Nulla non placerat turpis, a elementum lorem. Duis porttitor, tortor eu congue feugiat, arcu dolor pellentesque ante, sit amet ullamcorper mauris elit quis dui. Suspendisse sem lacus, viverra eget nunc id, ornare volutpat eros. Aliquam erat volutpat. Maecenas eu efficitur neque. Curabitur tortor ex, dictum tempor neque vitae, semper suscipit arcu. In at velit non velit molestie fringilla nec a nunc. Integer et tincidunt risus. Integer finibus, arcu eu hendrerit tincidunt, ante urna vestibulum ante, sit amet accumsan turpis purus id arcu. Curabitur non aliquet sapien, malesuada imperdiet orci. Sed posuere lectus ac nulla viverra, consequat semper lorem commodo. In fermentum nisl lacus, non congue velit sagittis sit amet. Phasellus mollis diam mi, id mollis lectus imperdiet ut. Mauris egestas neque urna, vehicula cursus nisi auctor vitae.
Aliquam ornare vitae urna auctor pretium. Ut vestibulum suscipit volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras viverra lorem non ex maximus, tempus gravida justo tempus. Pellentesque fermentum volutpat tortor ut pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur mattis tortor. Fusce et lectus pulvinar, sollicitudin leo interdum, molestie risus. Nullam non consectetur arcu. Phasellus congue, eros vel euismod pulvinar, erat ex viverra velit, vitae bibendum arcu odio in dolor. Maecenas efficitur massa faucibus pretium accumsan. Duis id suscipit neque.
Nulla pulvinar tempus dui, vitae pellentesque orci dapibus id. Nullam hendrerit egestas dui. Nullam tempus mattis dui. Proin in rutrum purus. Vivamus tempor justo mauris, non bibendum dui luctus ac. Nunc vulputate libero velit, sed auctor nulla mattis ut. Nullam finibus mollis ante eget rhoncus. Suspendisse at purus ante. Vivamus tristique felis eu quam pulvinar, nec viverra quam porta. Phasellus gravida enim non sem facilisis maximus. In varius ac lacus nec convallis. Quisque molestie commodo mi in fermentum.
</div>
</div>
This is very basic CSS and I'm sure if you google enough you will find other grid methods (as mentioned above) that will make your layouts a whole lot easier. Hope this helps.
In a mobile menu I've been playing with, I ran across a problem with jQuery's slideToggle animation being jumpy despite setting explicit widths and heights for the element. I found another potential fix to that problem was to set overflow: hidden on the toggled div. That's when I ran into this problem, which I assume is at least contributing to my slideToggle problem:
I noticed that setting overflow-y: hidden on my navigation seems to cut things off when it shouldn't. Given a nav that renders as 240px tall normally, if I set that nav to height: 240px; overflow: hidden, I would expect that there would be no overflow to hide. What actually happens is that it cuts off at around 102px in Chrome, and in Firefox it simply doesn't show up at all.
I have tried setting the CSS in the stylesheet and also dynamically in the JS by calculating the height of the nav's contents. I have tried clearfixing the nav. I have tried wrapping it in a div. I have tried various methods of display. Nothing seems to work.
My question is simple: What's up with the nav's height? What am I not understanding?
As a note, setting min-height does work, but that apparently interferes with the slideToggle effect and also doesn't really answer my question about why just using height won't work.
See http://codepen.io/cjl750/pen/xRdoRW for code.
$('header span').click(function(){
$('nav').slideToggle(400);
});
html {
font-family: 'Raleway', sans-serif;
}
header {
background-color: mediumaquamarine;
padding: 5px 15px;
}
nav {
font-family: 'Oswald', sans-serif;
color: white;
overflow-y: hidden;
/* display: none; */
height: 240px;
}
#body {
width: 360px;
height: 616px;
overflow-y: scroll;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
main {
background-color: slategray;
display: flex;
flex-direction: column;
}
section, aside {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}
section {
background-color: powderblue;
}
aside {
background-color: cadetblue;
}
h1, h2, h3 {
font-weight: 400;
}
h2 {
font-size: 1.33em;
}
#slogan {
font-size: 2em;
font-weight: 900;
float: left;
}
header span {
float: right;
margin-top: 5px;
}
header span:hover {
cursor: pointer;
text-decoration: underline;
}
nav ul {
list-style-type: none;
font-size: 1.5rem;
margin: 0;
padding: 0;
}
nav ul li + ul {
display: none;
}
nav ul.topLvl li {
padding: 2.5px 0 2.5px 15px;
background-color: rgba(220,220,220,0.7);
border: 3px outset rgba(255,255,255,0.65);
border-top-style: inset;
border-right-style: inset;
border-right-width: 4.5px;
border-bottom-color: rgba(255,255,255,1);
border-left-width: 4.5px;
}
nav ul.topLvl li:first-of-type {
border-top-width: 4.5px;
}
nav ul.topLvl li:last-of-type {
border-bottom-width: 4.5px;
}
nav ul.topLvl li:hover {
background-color: rgba(220,220,220,0.80);
border-top-style: outset;
border-right-style: outset;
border-bottom-style: inset;
border-left-style: inset;
border-bottom-color: rgba(255,255,255,0.45);
border-top-color: rgba(255,255,255,0.45);
}
<div id="body">
<header>
<div id="slogan">Octavian</div>
<span>Menu</span>
</header>
<nav>
<ul class="topLvl">
<li>Giraffes</li>
<ul class="secondLvl">
<li>Tall</li>
<li>Spots</li>
<li>Weird horn things</li>
<li>Head-whacking battles</li>
</ul>
<li>Elephants</li>
<ul class="secondLvl">
<li>Real big</li>
<li>Eat lots of plants</li>
<li>Floppy ears</li>
<li>Get feet stuck in tires</li>
</ul>
<li>Cheetas</li>
<ul class="secondLvl">
<li>Spots</li>
<li>Real fast</li>
<li>Tire out quickly</li>
<li>Gazelle's arch nemesis</li>
</ul>
<li>Vultures</li>
<ul class="secondLvl">
<li>Ominous death circle</li>
<li>Super gnarley stoach acid</li>
<li>Flap, flap, flap</li>
<li>Big wingspan</li>
</ul>
<li>Zebras</li>
<ul class="secondLvl">
<li>Stripy horses</li>
<li>Black and white</li>
<li>Neeeeeiiiiiigh</li>
<li>Big herds</li>
</ul>
</ul>
</nav>
<main>
<section>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum iaculis scelerisque. Nulla ligula nibh, venenatis a leo vel, varius tincidunt magna. Nulla consequat justo at lacus sodales ornare. Aenean quis faucibus est.</p>
<p><em>Ut dapibus id justo tempor iaculis. Vestibulum elementum quis diam a consectetur. Nunc pellentesque purus sapien.</em></p>
<p>Phasellus volutpat felis id libero bibendum euismod. Donec urna eros, euismod quis nisl cursus, placerat ultricies nulla. Vivamus finibus neque sit amet vestibulum posuere. Sed euismod, justo nec varius lacinia, tellus eros suscipit velit, sit amet dignissim leo nisi aliquet augue.</p>
<h3>Fusce sagittis eleifend enim</h3>
<p>Egestas sollicitudin. Nam at dui vel risus bibendum fringilla.</p>
<p>Mauris tincidunt nunc lorem, vel mollis sapien sollicitudin id. Nunc aliquam nulla enim, sit amet porta quam euismod a. Sed varius vel ligula quis laoreet. Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium turpis elit, eu auctor velit suscipit non.</p>
</section>
<aside>
<h2>Dulce et decorum est</h2>
<p>Mauris sit amet eleifend tortor. Praesent vitae aliquam turpis. Quisque auctor maximus ante ac fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vel fermentum lacus.</p>
<ul>
<li>cras feugiat justo non lacus auctor</li>
<li>eget sollicitudin mi eleifend</li>
<li>quisque pulvinar pretium risus et accumsan</li>
<li>praesent lacus sapien</li>
</ul>
<p>Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>
</main>
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,900" rel="stylesheet">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Flex items do flex by default. You can prevent shrinking with
nav {
flex-shrink: 0;
}
You can also use the flex shorthand property like flex: none or flex: 0 0 240px.
$('header span').click(function(){
$('nav').slideToggle(400);
});
html {
font-family: 'Raleway', sans-serif;
}
header {
background-color: mediumaquamarine;
padding: 5px 15px;
}
nav {
font-family: 'Oswald', sans-serif;
color: white;
overflow-y: hidden;
/* display: none; */
height: 240px;
flex-shrink: 0;
}
#body {
width: 360px;
height: 616px;
overflow-y: scroll;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
main {
background-color: slategray;
display: flex;
flex-direction: column;
}
section, aside {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
}
section {
background-color: powderblue;
}
aside {
background-color: cadetblue;
}
h1, h2, h3 {
font-weight: 400;
}
h2 {
font-size: 1.33em;
}
#slogan {
font-size: 2em;
font-weight: 900;
float: left;
}
header span {
float: right;
margin-top: 5px;
}
header span:hover {
cursor: pointer;
text-decoration: underline;
}
nav ul {
list-style-type: none;
font-size: 1.5rem;
margin: 0;
padding: 0;
}
nav ul li + ul {
display: none;
}
nav ul.topLvl li {
padding: 2.5px 0 2.5px 15px;
background-color: rgba(220,220,220,0.7);
border: 3px outset rgba(255,255,255,0.65);
border-top-style: inset;
border-right-style: inset;
border-right-width: 4.5px;
border-bottom-color: rgba(255,255,255,1);
border-left-width: 4.5px;
}
nav ul.topLvl li:first-of-type {
border-top-width: 4.5px;
}
nav ul.topLvl li:last-of-type {
border-bottom-width: 4.5px;
}
nav ul.topLvl li:hover {
background-color: rgba(220,220,220,0.80);
border-top-style: outset;
border-right-style: outset;
border-bottom-style: inset;
border-left-style: inset;
border-bottom-color: rgba(255,255,255,0.45);
border-top-color: rgba(255,255,255,0.45);
}
<div id="body">
<header>
<div id="slogan">Octavian</div>
<span>Menu</span>
</header>
<nav>
<ul class="topLvl">
<li>Giraffes</li>
<ul class="secondLvl">
<li>Tall</li>
<li>Spots</li>
<li>Weird horn things</li>
<li>Head-whacking battles</li>
</ul>
<li>Elephants</li>
<ul class="secondLvl">
<li>Real big</li>
<li>Eat lots of plants</li>
<li>Floppy ears</li>
<li>Get feet stuck in tires</li>
</ul>
<li>Cheetas</li>
<ul class="secondLvl">
<li>Spots</li>
<li>Real fast</li>
<li>Tire out quickly</li>
<li>Gazelle's arch nemesis</li>
</ul>
<li>Vultures</li>
<ul class="secondLvl">
<li>Ominous death circle</li>
<li>Super gnarley stoach acid</li>
<li>Flap, flap, flap</li>
<li>Big wingspan</li>
</ul>
<li>Zebras</li>
<ul class="secondLvl">
<li>Stripy horses</li>
<li>Black and white</li>
<li>Neeeeeiiiiiigh</li>
<li>Big herds</li>
</ul>
</ul>
</nav>
<main>
<section>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum iaculis scelerisque. Nulla ligula nibh, venenatis a leo vel, varius tincidunt magna. Nulla consequat justo at lacus sodales ornare. Aenean quis faucibus est.</p>
<p><em>Ut dapibus id justo tempor iaculis. Vestibulum elementum quis diam a consectetur. Nunc pellentesque purus sapien.</em></p>
<p>Phasellus volutpat felis id libero bibendum euismod. Donec urna eros, euismod quis nisl cursus, placerat ultricies nulla. Vivamus finibus neque sit amet vestibulum posuere. Sed euismod, justo nec varius lacinia, tellus eros suscipit velit, sit amet dignissim leo nisi aliquet augue.</p>
<h3>Fusce sagittis eleifend enim</h3>
<p>Egestas sollicitudin. Nam at dui vel risus bibendum fringilla.</p>
<p>Mauris tincidunt nunc lorem, vel mollis sapien sollicitudin id. Nunc aliquam nulla enim, sit amet porta quam euismod a. Sed varius vel ligula quis laoreet. Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium turpis elit, eu auctor velit suscipit non.</p>
</section>
<aside>
<h2>Dulce et decorum est</h2>
<p>Mauris sit amet eleifend tortor. Praesent vitae aliquam turpis. Quisque auctor maximus ante ac fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vel fermentum lacus.</p>
<ul>
<li>cras feugiat justo non lacus auctor</li>
<li>eget sollicitudin mi eleifend</li>
<li>quisque pulvinar pretium risus et accumsan</li>
<li>praesent lacus sapien</li>
</ul>
<p>Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</aside>
</main>
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,900" rel="stylesheet">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Without overflow-y: hidden there was less shrinking due to Flexbox Implied Minimum Size.
Your problem seems to be the fact that you have flexbox on body.
This seems to be "confusing" the .slideToggle(), seeing as flexbox handles height in a very particular way (sort of dynamically adjusting height of flex-items to their respective rows).
Seeing as you're attempting to display a one-column layout, this is not necessary. You may just give alle direct children of body a width of 100%.
Here's a jsFiddle where it works: https://jsfiddle.net/1qrgg695/2/
I removed flex from body.
The header acted weird, so the header is now flex:
header {
display: flex;
justify-content:space-between;
}
The justify content makes sure the Title stays to the left and the Toggle to the right.