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>
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'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
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>
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>
In my code, my footer will display at the bottom of my page, with no space above or below, as long as I specify a height of my page within Google Chrome. I tried doing height: 100% and so forth but still had problems.
When comparing that to my IE 11, the footer with a specified height has space below it. I can't seem to get both browsers to compromise and I have tried various options to make them both work.
My current css code that would affect the footer is as shown:
html {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
min-width: 768px;
/*keeps footer at bottom of page for IE 11 */
display: flex;
}
/* Formating for body of Web Site */
* {margin: 0; padding: 0;}
body {
font-family: times new roman;
background-color: #ebebeb;
zoom: 75%;
/*keeps footer at bottom of page for IE 11 */
width: 100%;
background-postion: 50% 80%;
}
#screen {
/* This locks everything in place*/
top:0px;
margin: 0 auto;
width:1500px;
height: 1500px;
padding-top:0;
padding-bottom: 30px;
postion: absolute;
margin-left: 70px;
margin-bottom: 0;
}
/* footer formating */
#footer {
background-color: black;
height: 40px;
width: 1500px;
color: white;
padding-top: 10px;
position: relative center;
bottom: 0;
text-align: center;
margin-left:70px;
}
My html:
<html>
<div id = "screen">
<body>
............................................. other code
<div id = "footer">
Copyright Notice - Site Maintanence by **********
<br>
Author of Published Text Content: ************<br>
Pagetop
</div> <!-- end footer -->
</div> <!-- end screen format -->
</body>
</html>
What IE looks like:
if i got you right, you want the footer to "stick" the upper part of the website in both Chrome and IE11 browsers.
i'm not sure why you chose this CSS settings because you didn't supply a link to the full website so i don't know exactly what is going on, but, you can get what you want not just on this two, but in all the browsers, the key is in the structure and the CSS, let me show you.
first of all i arranged your HTML and CSS so it will be easier to read and folow, i also deleted not needed code parts but you can do a reference with the old code to see the changes.
the <div id="screen"> element was outside the <body> tag, so i put it in.
as you can see in the HTML code, i've put <div id="leftcol"> and <div id="centercol"> elements with "lorem ipsum" text to Illustrate the situation in your website. i assumed <div id="screen"> is the website wrapper so i wrapped it all inside it.
<div id="screen">
<div id="leftcol">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</div>
<div id="centercol">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, 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, 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</div>
<div class="clear"></div>
<div id="footer">
Copyright Notice - Site Maintanence by **********
<br />
Author of Published Text Content: ************
<br />
</div> <!-- end footer -->
<div class="center">
Pagetop
</div>
</div> <!-- end screen format -->
you can see in the CSS i've deleted unnecessary code like i said before, the key is to keep the things simple unless you have to make it complicated for some reason, if you will tell me the reason you need the <HTML> element with display: flex; or <div id="screen"> element with position: absolute; i will try to help you with this and solve the problem but otherwise, let's keep it simple:
*
{
margin: 0;
padding: 0;
}
html
{
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body
{
font-family: times new roman;
background-color: #ebebeb;
background-postion: 50% 80%;
}
#screen
{
margin: 0 auto;
}
#footer
{
padding: 5px;
background-color: #000;
color: #fff;
text-align: center;
}
.center
{
text-align: center;
}
#leftcol
{
width: 30%;
float: left;
background: #B4B4B4;
}
#centercol
{
width: 60%;
float: right;
background: #fff;
}
#leftcol, #centercol
{
padding: 2%;
}
.clear
{
clear: both;
}
that's way it's working in all of the browsers include old versions of IE.
example: http://jsfiddle.net/Lvrcw4vw/3/