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>
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.
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;
}
The problem should be able to be seen live at this link (on every page, as the main content of the page is contained by my "content" div): http://tucsonbagley.com/index.html
The "content" class (a container div) has a much larger margin on the left than on the right and, after going over my CSS ad nauseum, I just cannot figure out why. I've broken something for sure (it was working not long ago!), but I just can't figure out what.
If I remove my id Navbar or id Header divs, the Content div will default back to the left... yeah, at this point I'm lost.
The CSS in question:
.content{
display:inline-block;
margin:0 auto;
width: 68%;
overflow:hidden;
text-align: center;
padding: 10px;
background-color: #FFFFFF;
font-size: 12px;
border-radius: 10px 10px 10px 10px;
}
Example HTML:
<body>
<div class="header">
<p>Tucson Bagley</p>
</div>
<div id="socialmedia">
<img src="images/Twitter_logo_blue.png"/>
<img src="images/linkedin.png"/>
<img src="images/facebook.png"/>
</div>
<div id="header">
<small>BagelHero#gmail.com</small>
</div>
<div id="navbar">
<ul>
<li><span>Gallery</span></li>
<li><span>Resume/CV</span></li>
<li><span>Contact me</span></li>
</ul>
</div>
<div class="content">
<div class="thumbleft"><h2>This is some content.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non varius metus. Pellentesque eu nunc tortor. Aliquam id lectus orci. Sed id consectetur eros. Curabitur semper nisl nibh, rhoncus lacinia nibh volutpat at. Pellentesque sollicitudin vitae ipsum ut dictum. Proin ac risus ac nisi interdum hendrerit. Pellentesque sodales mauris ac eleifend vehicula. Nulla convallis aliquet urna varius auctor. Donec eget ipsum ut mauris consequat auctor eget sit amet odio. Nullam sed lorem erat. Praesent consequat porttitor magna, sit amet feugiat odio tincidunt ut. Fusce congue eros vel quam condimentum, vel consectetur quam imperdiet. </p>
</div>
</br>
<div id="copyright">
<p>Copyright 2012-2014 | Tucson Bagley</p>
</div>
</body>
Some help would be appreciated. Thanks in advance!
Add a <div style="clear:both"></div> before .content div and apply display:block to .content instead of display:inline-block and that's it
change the css of your .content to look like this
.content{
position: absolute;
left:0px;
right:0px;
display:inline-block;
margin:10px auto;
width: 68%;
overflow:hidden;
text-align: center;
padding: 10px;
background-color: #FFFFFF;
font-size: 12px;
border-radius: 10px 10px 10px 10px;
}
the magic is the left:0px combined with right:0px and margin:10px auto which will only work in absolute mode.
Edit - updated css as per comments.
I'm wondering why my aside is at the bottom of the page instead of next to the main content when I apply (float:right;) in the css. I've tried to float it on the left and the main content on the right but had the same problem.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Photoblog</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="container">
<header>
<h1>Photoblog</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<article>
<h2>Welcome:</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
justo, quis consectetur arcu. Etiam vel orci massa, vel vestibulum ante.
Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus,
sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue
interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum,
purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl
ac turpis.
</p>
</article>
<article>
<h2>First Impressions</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
justo, quis consectetur arcu. Etiam vel orci massa, vel vestibulum ante.
Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus,
sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue
interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum,
purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl
ac turpis.
</p>
</article>
<article>
<h2>Bro</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros
justo, quis consectetur arcu. Etiam vel orci massa, vel vestibulum ante.
Nam posuere luctus iaculis. In id augue augue. Integer vel massa purus,
sit amet tincidunt sapien. Integer sit amet adipiscing risus.
Praesent rhoncus mauris mattis justo mattis eget egestas augue
interdum. Curabitur tempus accumsan lacus id accumsan. Nulla fermentum,
purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl
ac turpis.
</p>
</article>
<aside>
<h2>About Me</h2>
<p>
Hello here is some placeholder text. Hello here is some placeholder text.
Hello here is some placeholder text. Hello here is some placeholder text.
Hello here is some placeholder text. Hello here is some placeholder text.
</p>
</aside>
<footer>
<p>By Howard Tang</p>
</footer>
</div>
</body>
</html>
CSS:
body {
background-color: #F2E9E1;
color : #111111;
font-family : "Arial", "helvetica", sans-serif;
font-size : 11pt;
}
header h1 {
background-color: black;
padding:0px;
color: #ffffff;
display:block;
height: 80px;
width: 960px;
text-align : center;
line-height:80px ;
font-family : "Georgia", Serif;
}
nav ul {
list-style : none;
width:960px;
padding : 0;
text-align : center;
}
nav ul li {
color : #111111;
display : block;
}
nav {
display : block;
}
nav a {
color : #111111;
}
nav ul li {
display : inline;
}
article {
float : left;
width : 600px;
padding-top:0px;
padding-right : 20px;
padding-left : 20px;
padding-bottom : 40px;
background-color : #cbe86b;
}
article img {
height : 400px;
width : 600px;
}
aside {
padding-left: 20px;
float: right;
background-color : #cccccc;
width : 300px;
}
#container {
width : 900px;
margin : 0 auto;
}
footer {
margin-top: 20px;
float : left;
text-align: left;
width : 600px;
}
You haven't accounted for the padding in your widths. If you reduce your widths to those below, the aside will move back to the side.
article {
background-color: #CBE86B;
float: left;
padding: 0 20px 40px;
width: 560px; /* 560px + 20px + 20px = 600px */
}
aside {
background-color: #CCCCCC;
float: right;
padding-left: 20px;
width: 280px; /* 280px + 20px = 300px */
}