I'm trying to recreate the flex layout exercise from The Odin Project.
Here is what my page looks like but I can't figure out how to make the footer stick at the bottom of the page so that the main container can occupy most of the screen. For the exercise, I can only use display: flex and its properties. What is wrong with my code?
#import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght#0,100;0,300;0,400;0,900;1,900&display=swap');
body {
font-family: 'Alegreya Sans', sans-serif;
background-color: #FEF9F8;
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header {
background-color: #ED9275;
height: 70px;
display: flex;
font-size: 32px;
align-items: center;
padding: 16px;
}
.main-container {
display: flex;
flex: 1;
}
.sidebar {
background-color: #2A6877;
flex-shrink: 0;
width: 300px;
padding: 16px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
font-weight: 400;
}
li {
margin-bottom: 5px;
font-size: 20px;
}
.card-container {
display: flex;
margin: 30px;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
}
.card {
border: 1px solid black;
width: 200px;
padding: 10px;
text-align: center;
margin: 16px;
}
footer {
background-color: #ED9275;
color: black;
font-weight: 300;
height: 72px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h1>Box Zilla</h1>
</header>
<main>
<div class="main-container">
<div class="sidebar">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Packages
</li>
<li>
Contact Us
</li>
</ul>
</div>
<div class="card-container">
<div class="card">
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
</div>
</div>
</div>
<footer>
<p>Property of Box Zilla Corporated</p>
</footer>
</main>
</body>
</html>
Your webpage has 3 main elements
Header
Content
Footer
I would suggest you to add justify-content:space-between; to the body tag as you have to use flex properties
Alternatively, you can use a media query to keep footer at bottom using position. After that, your content will fill the page's empty space and your footer will be automatically at the bottom
Changes Made
Moved footer outside main tag (idk why)
Tips
Use padding in percentage (ex: Padding:2%;) for responsiveness
Have a nice day ^_^
#import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght#0,100;0,300;0,400;0,900;1,900&display=swap');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Alegreya Sans', sans-serif;
background-color: #FEF9F8;
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
/* Changes Made */
justify-content: space-between;
}
header {
background-color: #ED9275;
height: 70px;
display: flex;
font-size: 32px;
align-items: center;
padding: 16px;
}
.main-container {
display: flex;
flex: 1;
}
.sidebar {
background-color: #2A6877;
flex-shrink: 0;
width: 300px;
padding: 16px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
font-weight: 400;
}
li {
margin-bottom: 5px;
font-size: 20px;
}
.card-container {
display: flex;
margin: 30px;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
}
.card {
border: 1px solid black;
width: 200px;
padding: 10px;
text-align: center;
margin: 16px;
}
footer {
background-color: #ED9275;
color: black;
font-weight: 300;
height: 72px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Box Zilla</h1>
</header>
<main>
<div class="main-container">
<div class="sidebar">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Packages
</li>
<li>
Contact Us
</li>
</ul>
</div>
<div class="card-container">
<div class="card">
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
</div>
</div>
</div>
</main>
<footer>
<p>Property of Box Zilla Corporated</p>
</footer>
</body>
</html>
The best way would be to add position: relative; with bottom: 0; on your footer. However, when your content does not exceed the length of the page (y-axis scroll) the footer will be directly under the content and not at the very bottom of the page.
In the event that there is no scroll and you still want the footer at the bottom I would then use either position fixed or absolute and add width: 100%; on the footer.
I added a static height on your main-container to demonstrate how relative works.
#import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght#0,100;0,300;0,400;0,900;1,900&display=swap');
body {
font-family: 'Alegreya Sans', sans-serif;
background-color: #FEF9F8;
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header {
background-color: #ED9275;
height: 70px;
display: flex;
font-size: 32px;
align-items: center;
padding: 16px;
}
.main-container {
display: flex;
flex: 1;
height: 1074px;
}
.sidebar {
background-color: #2A6877;
flex-shrink: 0;
width: 300px;
padding: 16px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
font-weight: 400;
}
li {
margin-bottom: 5px;
font-size: 20px;
}
.card-container {
display: flex;
margin: 30px;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
}
.card {
border: 1px solid black;
width: 200px;
padding: 10px;
text-align: center;
margin: 16px;
}
footer {
background-color: #ED9275;
color: black;
font-weight: 300;
height: 72px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
position: relative;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h1>Box Zilla</h1>
</header>
<main>
<div class="main-container">
<div class="sidebar">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Packages
</li>
<li>
Contact Us
</li>
</ul>
</div>
<div class="card-container">
<div class="card">
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
</div>
</div>
</main>
<footer>
<p>Property of Box Zilla Corporated</p>
</footer>
</body>
</html>
Related
here is a demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
height: 300px;
width: 500px;
overflow: scroll;
position: relative;
}
p {
margin-bottom: 20px;
}
span.tag {
position: absolute;
padding: 10px;
background-color: deepskyblue;
color: white;
}
.tl {
top: 0;
left: 0;
}
.tr {
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
<span class="tag tl">TopLeft</span>
<span class="tag tr">TopRight</span>
</div>
</body>
</html>
Basically I expected the four span.tag to stay the corner of the
div.wrapper viewport(it is so called I guess),because I've set div.wrapper position relative and span.tag position absolute , but when I scroll it, why it doesn't stay at the corner of viewport? is there anything about the overflow:scroll?
I thought div.wrapper has a height of 300px, so if the content of it has a larger height, a scroll-bar appear, we can scroll it, but what we scroll is the content, the wrapper doesn't move, so why the tag which set top:0 didn't stay at the top the wrapper?
[EDIT]
this is the result I want:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
height: 300px;
width: 500px;
position: relative;
}
.newlyAdded {
height: 100%;
overflow: scroll;
}
p {
margin-bottom: 20px;
}
span.tag {
position: absolute;
padding: 10px;
background-color: deepskyblue;
color: white;
}
.tl {
top: 0;
left: 0;
}
.tr {
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="newlyAdded">
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<span class="tag tl">TopLeft</span>
<span class="tag tr">TopRight</span>
</div>
</div>
</body>
</html>
But I still don't know why.
you need to use position: fixed instead of absolute
https://developer.mozilla.org/en-US/docs/Web/CSS/position
a fixed element doesn't move also if you have a scrollbar
the behavior of fixed normally use the viewport, but if you use a position: relative; on the parent element,
you can get the behavior inside that element and not the page.
as you see is not the whole page, but inside the parent element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
height: 300px;
width: 500px;
overflow: scroll;
position: relative;
}
p {
margin-bottom: 20px;
}
span.tag {
position: fixed;
padding: 10px;
background-color: deepskyblue;
color: white;
}
.tl {
top: 0;
left: 0;
}
.tr {
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
<span class="tag tl">TopLeft</span>
<span class="tag tr">TopRight</span>
</div>
</body>
</html>
I have a <div id = 'body-box> and and at the bottom I have an input for text .
I want to stay at the bottom of the while the chat messages scroll behind it. The stays in line and gets pushed down as more chat elements are added in.
I would like the input form to stay at the bottom while still within . What am I doing wrong in my css currently because this is not being achieved. Thanks!
</head>
<body style="background-image: url(./images/background.svg)">
<div id = 'bodybox'>
<div id = 'chat-message-list'>
<div class = "message-row you-message">
<div class = "message-content">
<div class = "message-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class = "message-time">Apr 16</div>
</div>
</div>
<div class = "message-row you-message">
<div class = "message-content">
<div class = "message-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class = "message-time">Apr 16</div>
</div>
</div>
<div id = 'chat-form'>
<input id = 'input' type = 'text' placeholder="What would you like to know"/>
<button id = 'sendbutton'>SEND</button>
</div>
</div>
</body>
</html>
#chat-form {
position: absolute;
bottom: 5px;
border-radius: 10px;
padding-left: 42px;
padding-right: 22px;
align-items: center;
align-content: center;
height: 70px;
display: inline-flex;
}
body {
font: 15px arial, sans-serif;
background-color: #FFFFFF;
padding-top: 15px;
padding-bottom: 15px;
/*display: grid;*/
}
#bodybox {
margin: auto;
max-width: 1000px;
font: 15px arial, sans-serif;
background-color: #F3F6FB;
padding-top: 20px;
padding-bottom: 25px;
padding-right: 25px;
padding-left: 25px;
border-radius: 15px;
max-height: 600px;
position: relative;
overflow: scroll;
}
You can apply sticky positioning to the form (instead of absolute, which you started with), remove the hard-coded height of the form, and achieve what you're after.
From MDN
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
In your case the relatively-positioned parent bodybox is acting as the nearest block-level ancestor, allowing us to pin the form to the bottom of the element.
Demo
#chat-form {
position: sticky;
bottom: 5px;
border-radius: 10px;
align-items: center;
align-content: center;
display: inline-flex;
bottom: -25px;
left: calc(50% - 80px);
}
body {
font: 15px arial, sans-serif;
background-color: #FFFFFF;
padding-top: 15px;
padding-bottom: 15px;
/*display: grid;*/
}
#bodybox {
margin: auto;
max-width: 1000px;
font: 15px arial, sans-serif;
background-color: #F3F6FB;
padding-top: 20px;
padding-bottom: 25px;
padding-right: 25px;
padding-left: 25px;
border-radius: 15px;
max-height: 600px;
position: relative;
overflow: scroll;
max-height: 8em;
}
<div id='bodybox'>
<div id='chat-message-list'>
<div class="message-row you-message">
<div class="message-content">
<div class="message-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="message-time">Apr 16</div>
</div>
</div>
<div class="message-row you-message">
<div class="message-content">
<div class="message-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="message-time">Apr 16</div>
</div>
</div>
<div class="message-row you-message">
<div class="message-content">
<div class="message-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="message-time">Apr 16</div>
</div>
</div>
<div class="message-row you-message">
<div class="message-content">
<div class="message-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="message-time">Apr 16</div>
</div>
</div>
<div class="message-row you-message">
<div class="message-content">
<div class="message-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="message-time">Apr 16</div>
</div>
</div>
<div class="message-row you-message">
<div class="message-content">
<div class="message-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="message-time">Apr 16</div>
</div>
</div>
<div id='chat-form'>
<input id='input' type='text' placeholder="What would you like to know" />
<button id='sendbutton'>SEND</button>
</div>
</div>
Link
jsFiddle
I have problem problem with centering element on mobile devices, when height decreases, top content is hidden but on desktop is okey. Please see below link for see problem in screenshot
Desktop version
Mobile version
HTML
<div class="modal">
<div class="modal-section">
<div class="modal-area">
<div class="header">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
<div class="items">
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.modal {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: oldlace;
color: #2F2F2F;
z-index: 99999;
overflow: auto;
}
.items {
display: flex;
margin: 20px 0;
justify-content: center;
}
.element {
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
margin: 20px;
cursor: pointer;
width: 150px;
}
.img {
height: 150px;
}
example code
https://jsfiddle.net/twzud65n/3/
Seems like you have some elements that don't quite do something and have no styling applied to fit in. What is the suppose of modal-section?
Because you have position: fixed on your modal, you need to tell its children to not overflow their parent. width: 100% does that, height: auto means it can scale as much as needed allowing to scroll.
Try this:
.modal-section {
width: 100%;
height: auto;
}
It's because of justify-content: center which is centering your element (even if it's overflowing). You can turn it off and add margin:auto to .modal-section.
Example
.modal {
display: flex;
flex-flow: column nowrap;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: oldlace;
color: #2F2F2F;
z-index: 99999;
overflow: auto;
}
.modal-section {
margin: auto;
}
.items {
display: flex;
margin: 20px 0;
justify-content: center;
}
.element {
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
margin: 20px;
cursor: pointer;
width: 150px;
}
.img {
height: 150px;
}
<div class="modal">
<div class="modal-section">
<div class="modal-area">
<div class="header">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
<div class="items">
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to create a responsive page where the "boxes" wrap to another row when browser window it made smaller. I used:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
to accomplish this in the pen below.
See link for example of behavior desired.
https://codepen.io/DukeJellington/pen/BrMQga
html {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: var(--dark)
}
body {
background: #ccc;
margin: 30px 50px;
line-height: 1.4;
}
.boxes {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<!-- Boxes -->
<section class="boxes">
<div class="box">
<i class="fas fa-chart-pie fa-4x"></i>
<h3>Analytics</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-globe fa-4x"></i>
<h3>Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-cog fa-4x"></i>
<h3>Development</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<h3>Support</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
</section>
Notice how the icons/text will wrap to the lower row when window is made smaller, until there is one grid item is on top of another.
However, there is something prohibiting this behavior on the full page that was created in the link below; and I am unable to find what is prohibiting this behavior.
https://codepen.io/DukeJellington/pen/vRbyqb
/* CSS Variables */
:root {
--primary: #ddd;
--dark: #333;
--light: #fff;
--shadow: 0 1px 5px rgba(104, 104, 104, 0.8)
}
html {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: var(--dark)
}
body {
background: #ccc;
margin: 30px 50px;
line-height: 1.4;
}
.btn {
background-color: var(--dark);
color: var(--light);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 20px;
}
/* Navigation */
.main-nav ul {
display: grid;
grid-gap: 20px;
padding: 0;
list-style: none;
grid-template-columns: repeat(4, 1fr);
}
.main-nav a {
background: var(--primary);
display: block;
text-decoration: none;
padding: 0.8rem;
text-align: center;
color: var(--dark);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--dark);
color: var(--light);
}
/* Top Container */
.top-container {
display: grid;
grid-gap: 20px;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b'
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url(img/showcase.jpg);
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0;
color: var(--light);
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
color: var(--light);
}
/* Top Box */
.top-box {
background: var(--primary);
display: grid;
align-items: center;
justify-items: center;
box-shadow: var(--shadow);
padding: 1.5rem;
}
.top-box .price {
font-size: 2.5rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
/* Boxes */
.boxes {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<div class="wrapper">
<!-- Navigation -->
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<!-- Top Container -->
<section class="top-container">
<header class="showcase">
<h1>Your Web Presence</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, omnis magnam? Tempore ut vero ex.</p>
Read More
</header>
<div class="top-box top-box-a">
<h4>Membership</h4>
<p class="price">$199/month</p>
Buy Now
</div>
<div class="top-box top-box-b">
<h4>Pro Membership</h4>
<p class="price">$299/month</p>
Buy Now
</div>
</section>
<!-- Boxes Section -->
<section class="boxes">
<div class="box">
<i class="fas fa-chart-pie fa-4x"></i>
<h3>Analytics</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-globe fa-4x"></i>
<h3>Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-cog fa-4x"></i>
<h3>Development</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<h3>Support</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
</section>
<!-- Information Section -->
<section class="info">
<img src="img/pic1.jpg" alt="">
<div>
<h2>Your Business on the Web</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, minima praesentium accusamus maxime repellat, amet non necessitatibus enim officia ipsam saepe nemo deleniti incidunt vero autem earum accusantium sed corporis.
Learn More
</p>
</div>
</section>
<!-- Portfolio Section -->
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200" alt="">
<img src="https://source.unsplash.com/random/200x201" alt="">
<img src="https://source.unsplash.com/random/200x202" alt="">
<img src="https://source.unsplash.com/random/200x203" alt="">
<img src="https://source.unsplash.com/random/200x204" alt="">
<img src="https://source.unsplash.com/random/200x205" alt="">
<img src="https://source.unsplash.com/random/200x206" alt="">
<img src="https://source.unsplash.com/random/200x207" alt="">
<img src="https://source.unsplash.com/random/200x208" alt="">
</section>
<!-- Footer -->
<footer>
<p>GridBiz © 2018</p>
</footer>
</div>
<!-- Wrapper Ends -->
In the link above, when the window is made smaller, the final div wraps below, but the other grid items remain on the same row when the window is minimized further.
I played with the code a bit and noticed that when I commented out the following styling for the wrapper class, the grid items behave as desired.
.wrapper {
display: grid;
grid-gap: 20px;
Can somebody tell me what about having the grid display for the wrapper class is prohibiting my grid items below from wrapping properly?
Your .boxes grid doesn't wrap further due to other wider sibling blocks in main .wrapper block.
By default when you add just display: grid for a block, it becomes a grid container. Your .wrapper grid container has only single column and minimum width of this column is defined by a child with the biggest minimum size. The top biggest child in your case is .main-nav ul because it has 4 columns which won't shrink regardless of resolution. The next big container is .top-container which also have big number of unshrinkable content.
So for resolving your issue just make .main-nav ul and .top-container blocks shrinkable in any way.
Also note that for 1D layout you can use Flexbox.
Can someone explain why, despite having a height set to 100% for both my main content and my main content fixed width, why the child items within the main-content fixed width exist outside of its height? Shouldn't setting height:100% cause it to grow relative to the items placed inside?
*
{
margin: 0;
padding: 0;
}
p
{
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
line-height: 19px;
color: #1e4164;
margin: 10px 10px;
}
.content-section-heading
{
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
line-height: 12px;
color: #5c5c5c;
margin: 10px 10px;
font-weight: 600;
}
h1
{
font-size: 36px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 122px;
color: #1e4164;
font-weight: 800;
text-align: center;
margin-top: 25px;
margin-bottom: 70px;
}
header
{
height: 127px;
width: 100%;
background-color: #569ABD;
box-shadow: rgba(80, 80, 80, 0.7) 1px 1px 2px 0px;
position: relative;
z-index: 2;
}
#header-fixedWidth
{
width: 1253px;
margin: 0 auto;
}
#header-fixedWidth img
{
margin-top: 3px;
}
#banner
{
width: 100%;
height: 772px;
display: block;
}
#main-content
{
display: block;
width: 100%;
height: 100%;
border: 1px solid black;
}
#mainContent-fixedWidth
{
width: 1253px;
height: 100%;
margin: 0 auto;
border: 1px solid #ccc;
}
.content
{
height:340px;
width: 220px;
background-color: white;
box-shadow: rgba(192, 192, 192, 0.8) 0px 10px 10px 0px;
float: left;
margin: 0px 0px 40px 30px;
}
.content #tempContentImage
{
height: 180px;
width: 222px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OECTA Template</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" />
</head>
<body>
<header>
<div id="header-fixedWidth">
<img src="Images/header/navigationMenu.png" alt="mainNavImage" id="mainNav" />
</div>
</header>
<div id="banner">
<img src="Images/Banner/BenefitsBanner.jpg" alt="bannerImage" id="bannerTemplate" />
</div>
<div id="main-content">
<div id="mainContent-fixedWidth">
<h1>Intranet</h1>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
</div>
</div>
</body>
</html>
It's because your 'content' items are all floating, so it appears to the browser that there isn't any content in your 'mainContent-fixedWidth' container.
Add the CSS rule overflow: auto to your mainContent-fixedWidth element and that should solve it.
is it what you want? There are different tricky things in here if you are not familiar with CSS:
height in % only works well if the hierarchy chain is also defined in %, usually setting 'html' and 'body' to 100% height does the thing, like here, sometimes it's more complex and you will need wrappers or JS
floating items kind of get out of the content flow in term of height, correct me if i'm wrong, they "stay in the text line" they are in. To force the container to adapt, tou have to do a "clearfix". It consists in adding a div with a class like i did at the very end of your floating elements list. This clearfix class is maybe outdated, there are many different versions depending on how far you want backwards support.
'height:100%' doesn't adapt to the content, but min-height does. The bad news is that backwards support is not really good. To have a perfect support for this, you might need to use JS (by setting the height depending on the window height when it is smaller, and let adapt to content when bigger)
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
}
.clear{
clear: both;
height: 0; overflow: hidden; /* Precaution pour IE 7 */
}
p
{
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
line-height: 19px;
color: #1e4164;
margin: 10px 10px;
}
.content-section-heading
{
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
line-height: 12px;
color: #5c5c5c;
margin: 10px 10px;
font-weight: 600;
}
h1
{
font-size: 36px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 122px;
color: #1e4164;
font-weight: 800;
text-align: center;
margin-top: 25px;
margin-bottom: 70px;
}
header
{
height: 127px;
width: 100%;
background-color: #569ABD;
box-shadow: rgba(80, 80, 80, 0.7) 1px 1px 2px 0px;
position: relative;
z-index: 2;
}
#header-fixedWidth
{
width: 1253px;
margin: 0 auto;
}
#header-fixedWidth img
{
margin-top: 3px;
}
#banner
{
width: 100%;
height: 772px;
display: block;
}
#main-content
{
display: block;
width: 100%;
min-height: 100%;
border: 1px solid black;
}
#mainContent-fixedWidth
{
width: 1253px;
min-height: 100%;
margin: 0 auto;
border: 1px solid #ccc;
}
.content
{
height:340px;
width: 220px;
background-color: white;
box-shadow: rgba(192, 192, 192, 0.8) 0px 10px 10px 0px;
float: left;
margin: 0px 0px 40px 30px;
}
.content #tempContentImage
{
height: 180px;
width: 222px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OECTA Template</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" />
</head>
<body>
<header>
<div id="header-fixedWidth">
<img src="Images/header/navigationMenu.png" alt="mainNavImage" id="mainNav" />
</div>
</header>
<div id="banner">
<img src="Images/Banner/BenefitsBanner.jpg" alt="bannerImage" id="bannerTemplate" />
</div>
<div id="main-content">
<div id="mainContent-fixedWidth">
<h1>Intranet</h1>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="content">
<img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
<p class="content-section-heading">Section Heading</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>