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>
Related
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>
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'm trying to style a reusable component such that it will stay inline but truncate its contents whenever it overflows. What makes it trickier is that I need to have an icon on the right.
The main issue is that I need the icon to stay on the same line, so I compensate for it in the width of the truncated text (width: calc(100% - 40px)), which makes any non-truncating example be that much shorter than it's normal width.
See the snippet below and how the short example is barely visible.
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: 100%;
margin-right: 16px;
background: #f1f1f1;
}
.value-and-icon-wrapper {
display: inline-block;
width: 100%;
}
.icon {
padding-left: 5px;
}
.truncated-text {
display: inline-block;
width: calc(100% - 40px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
-webkit-line-clamp: 1;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
This is because you are using a lot of inline-block and the width of inline-block is defined by its content so if you set 100% - 40px for a child item, it means its width minus 40px
Try to do it differently like below using flexbox:
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-flex;
max-width: calc(100% - 16px); /* don't forget to account for margin here */
margin-right: 16px;
background: #f1f1f1;
}
.icon {
padding-left: 5px;
}
.truncated-text {
flex:1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Without flexbox you can do it like below:
body, .container {
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: calc(100% - 16px); /* don't forget to account for margin/padding here */
margin-right: 16px;
background: #f1f1f1;
padding-right:20px;
box-sizing:border-box;
position:relative;
}
.icon {
padding-left: 5px;
position:absolute;
right:0;
top:0;
bottom:0;
}
.truncated-text {
display:block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Try applying the style text-overflow: ellipsis to the div that contains the text to be truncated.
MDN Documentation for text-overflow
Why does my flex box not change width when changed. I am following along this tutorial https://www.youtube.com/watch?v=JJSoEo8JSnc and at minute 7:40 he changes the flex on class box-1 from flex:1 to flex:2 and then flex:3. When he does this it makes box-1 take up more of the width. When I do the same it does not change the width as it does in the video. I am trying to duplicate on this
.container-1 {
height: 100vh;
width: 100vw;
background-image: url('https://i.imgur.com/kkQFh8p.jpg');
background-size: cover;
background-repeat: no-repeat;
display: flex;
}
.container-1 div {
border: 1px red solid;
padding: 10px;
color: white;
}
.box-1 {
flex: 3;
}
.box-2 {
flex: 1;
}
.box-3 {
flex: 1;
}
<div class="container-1">
<div class="box-1">
<h3>Box One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-1">
<h3>Box Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-1">
<h3>Box Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
width different background than the video but all else is the same. https://codepen.io/centem/pen/pozRMXm
You need to use different class names in your HTML. Replace box-1 of the 2nd and 3rd child to box-2 and box-3 respectively. With your current code all the boxes will have the same flex: 3 and will distribute equally between them instead of the 3 1 1 ratio that you desire.
.container-1 {
height: 100vh;
width: 100vw;
background-image: url('https://i.imgur.com/kkQFh8p.jpg');
background-size: cover;
background-repeat: no-repeat;
display: flex;
}
.container-1 div {
border: 1px red solid;
padding: 10px;
color: white;
}
.box-1 {
flex: 3;
}
.box-2 {
flex: 1;
}
.box-3 {
flex: 1;
}
<div class="container-1">
<div class="box-1">
<h3>Box One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-2">
<h3>Box Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="box-3">
<h3>Box Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
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>