I'm practicing my CSS skills and as you can see below, I've managed to get all my main content between header and footer to line up nicely by using margin: auto.
However I am stuck on figuring out how I get a nice layout going within the footer. What I want is:
Mobile view: To have the footer elements stack vertically and in line with the rest of the site content.
Fullscreen (500px+): Have the footer elements line up horizontally and in line with the rest of the site content.
I've tried to use margin: auto like I did with the main content but it doesn't work.
I can't get the elements inside the footer to do anything, I can actually only see the embedded map for some reason I can't understand.
I hope someone can help me out. Thanks
https://jsfiddle.net/y40vcw1q/
html body {
margin: 0;
background-color: #DCDBF1;
font-family: "Raleway", sans-serif;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-areas:
"header"
"menu"
"content"
"content2"
"footer"
}
.wrapper > .content, .content2, .footercontent {
margin: 0 auto;
line-height: 2;
max-width: 50%;
}
.header {
grid-area: header;
border-bottom: #EFEEFC solid 1px;
}
.header h1 {
text-align: center;
}
.menu {
display: flex;
flex-direction: row;
grid-area: menu;
line-height: 2em;
padding-left: 20px;
}
.menu a {
padding-right: 10px;
}
.menu a:link {
text-decoration: none;
color: #666666;
}
.content {
grid-area: content;
}
.content2 {
grid-area: content2;
}
.content img {
height: auto;
width: 100%;
max-width: 200px;
border: solid black 1px;
}
.content2 img {
height: auto;
width: 100%;
max-width: 200px;
border: solid black 1px;
}
.footer {
grid-area: footer;
border-top: #EFEEFC solid 1px;
padding: 20px 0px;
background-color: #E595B3;
font-size: small;
}
.footer iframe {
border: 1px solid black;
height: auto;
width: 100%;
max-width: 200px;
}
#media screen and (min-width: 500px) {
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"header header"
"menu menu"
"content content2"
"footer footer"
}
.header h1 {float: right;
padding-right: 50px;}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>title.</h1>
</div>
<div class="menu">
<div class="menuitem">
about
</div>
<div class="menuitem">
contact
</div>
<div class="menuitem">
cv
</div>
</div>
<div class="content">
<h1>Content</h1>
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Content 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content2">
<h1>Content 3</h1>
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg?crop=0.666xw:1.00xh;0.168xw,0&resize=640:*" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Content 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="footer">
<div class="footercontent">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.828828834796!2d-74.00234906126316!3d40.7629659216891!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25850a4606051%3A0x1976b26060ef9a02!2sHell's%20Kitchen%2C%20New%20York%20City%2C%20New%20York%2C%20USA!5e0!3m2!1sda!2sdk!4v1598647639460!5m2!1sda!2sdk"</iframe>
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<h1>Archive</h1>
<ul>
<li>jan</li>
<li>feb</li>
<li>mar</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Related
Can someone please tell me how to make text in the boxes can be pushed down to stop overlapping and text shouldn't go out of the box? Also, I need some margin in the column boxes.
There are media queries and ignore that one. I just want to know how to change the CSS so that text is not overflowing from the box and I don't want to use the overflow property also. Also how to give the margin to the column boxes provided boxes remain in the line.
Code CSS and HTML -->
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Impact, Charcoal, sans-serif;
}
div.row div {
background-color: gray;
border: 1px black solid;
position: relative;
}
.heading{
margin: 30px;
margin-bottom: 70px;
text-align:center;
}
/*For large devices*/
#media (min-width: 992px){
.col-lg-3{
float : left;
width: 33.33%;
}
}
/*For medium devices*/
#media (min-width: 768px) and (max-width: 991px){
.col-md-2{
float:left;
width: 50%;
}
.col-md-12{
float: left;
width: 100%;
}
}
/*For small devices*/
#media (max-width: 767px){
.col-sm-12{
float:left;
width: 100%;
}
}
h2.item1 {
position: absolute;
background-color: orange;
top: 0;
right: 0;
padding: 2%;
}
h2.item2 {
position: absolute;
background-color: green;
top: 0;
right: 0;
padding: 2%;
}
h2.item3 {
position: absolute;
background-color: skyblue;
top: 0;
right: 0;
padding: 2%;
}
section {
padding: 2%;
}
<!DOCTYPE html>
<html>
<head>
<title>Our Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="heading">Our Menu</h1>
<div class="row">
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item1">Chicken</h2>
<section class="desc1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui zfiofficia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item2">Beef</h2>
<section class="desc2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<h2 class="item3">Sushi</h2>
<section class="desc3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
</div>
</div>
</body>
</html>
By setting the position to absolute you are removing the html from the normal 'flow' of the document, so you can't apply normal css properties such as margin.
To circumvent this, you should float the h2's right instead and then apply a margin to prevent your text being hiddent under the element.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Impact, Charcoal, sans-serif;
}
div.row div {
background-color: gray;
border: 1px black solid;
position: relative;
}
.heading{
margin: 30px;
margin-bottom: 70px;
text-align:center;
}
/*For large devices*/
#media (min-width: 992px){
.col-lg-3{
float : left;
width: 33.33%;
}
}
/*For medium devices*/
#media (min-width: 768px) and (max-width: 991px){
.col-md-2{
float:left;
width: 50%;
}
.col-md-12{
float: left;
width: 100%;
}
}
/*For small devices*/
#media (max-width: 767px){
.col-sm-12{
float:left;
width: 100%;
}
}
h2.item1, h2.item2, h2.item3 {
background-color: orange;
padding: 2%;
display: inline-block;
float: right;
margin: .3rem;
}
h2.item2 {
background-color: green;
}
h2.item3 {
background-color: skyblue;
}
section {
padding: 2%;
}
.desc1, .desc2, .desc3{
padding: 1rem;
margin: 0.5rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Our Menu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="heading">Our Menu</h1>
<div class="row">
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item1">Chicken</h2>
<section class="desc1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui zfiofficia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-2 col-lg-3">
<h2 class="item2">Beef</h2>
<section class="desc2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
</div>
<div class="col-sm-12 col-md-12 col-lg-3">
<h2 class="item3">Sushi</h2>
<section class="desc3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
</div>
</div>
</body>
</html>
Using the HTML and CSS below, you'll notice that rather than shrinking to fit the browser window, the site gets a horizontal scroll bar when shrunk down to 189px width. I've gone through my code and I cannot seem to figure out why this is happening. Keep in mind I'm a newbie so I might very well have overlooked something.
Also, I have a bonus question if that is allowed: I want to shrink the menu height but it seems impossible. How would you go about it?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Title</h1>
</div>
<div class="menu">
about <br>
contact <br>
donate <br>
</div>
<div class="pic">
<img src="roshi.jpg" alt="roshi">
</div>
<div class="content">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content2">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
html body {
margin: 0 auto;
font-family: "Raleway", sans-serif;
}
.wrapper {
margin: 0 auto;
display: grid;
grid-gap: 10px;
grid-template-areas:
"header"
"menu"
"pic"
"content"
"content2"
"footer";
}
.header {
grid-area: header;
background-color: lightgrey;
}
.header h1 {
margin-left: 0;
padding-left: 0;
}
.menu {
grid-area: menu;
padding: 0;
line-height: 2;
}
.menu a {
text-decoration: none;
}
.menu a:link {
color: black;
}
.pic {
grid-area: pic;
}
img {
width: 100%;
height: auto;
}
.content {
grid-area: content;
}
.content2 {
grid-area: content2;
}
.footer {
grid-area: footer;
background-color: lightgrey;
}
.wrapper > * {
margin: 0px 30px;
}
.header, .footer {
padding: 0px 30px;
}
#media screen and (min-width: 500px) {
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"header header"
"menu menu"
"pic pic"
"content content2"
"footer footer";
}
.menu {
display: flex;
flex-direction: row;
margin-left: auto;
}
.menu a {
padding-right: 10px;
}
}
JSFiddle link: https://jsfiddle.net/tzrqf5np/
I fixed your CSS as you wanted. You really should start making sure you get your spacings right. it has no direct influence in HTML and CSS but helps reading and is a good practise for other languages. There plently languages where spacings make a difference if a code works or not. But having it easier to read espacially with programs like Visual Studio Code the advantage is that you see which closing tags belong to which starting tag.
Please try to practice it for me "my little padawan" :P
Ok One change of formatting was to the media query:
#media only screen
and ...
and ... {
body {
random-code: xy;
}
}
espacilly if you use media query to adress screens use only screen. Even it works nearly always take it as a good habit same as getting your spacings right. Then get a new line with and... what every you want to use. you can combine that way many rules like min-width and max-width, orientation: landscape/portrait screen format...
then you used: grid-template-rows: 1fr 1fr; I switched it to grid-template-columns: 1fr 1fr; and added the grid-auto-rows: auto; and tada: its working. The menu is way smaller just like you wanted.
Next the picture got a width of auto. that way it shouldnt create a horizontal scrollbar. a width of 100% will as it will add the 100% to the margin and paddings on top and then the width is wider then the screen.
html body {
margin: 0 auto;
font-family: "Raleway", sans-serif;
}
.wrapper {
margin: 0 auto;
display: grid;
grid-auto-rows: auto;
grid-gap: 10px;
grid-template-areas:
"header"
"menu"
"pic"
"content"
"content2"
"footer";
}
.header {
grid-area: header;
background-color: lightgrey;
}
.header h1 {
margin-left: 0;
padding-left: 0;
}
.menu {
grid-area: menu;
padding: 0;
}
.menu a {
text-decoration: none;
}
.menu a:link {
color: black;
}
.pic {
grid-area: pic;
}
img {
width: 100%;
height: auto;
}
.content {
grid-area: content;
}
.content2 {
grid-area: content2;
}
.footer {
grid-area: footer;
background-color: lightgrey;
}
.wrapper > * {
margin: 0px 30px;
}
.header, .footer {
padding: 0px 30px;
}
#media only screen
and (min-width: 500px) {
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
grid-template-areas:
"header header"
"menu menu"
"pic pic"
"content content2"
"footer footer";
}
.menu {
display: flex;
flex-direction: row;
margin-left: auto;
}
.menu a {
padding-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Title</h1>
</div>
<div class="menu">
about<br>
contact<br>
donate
</div>
<div class="pic">
<img src="roshi.jpg" alt="roshi">
</div>
<div class="content">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content2">
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I want these below contents to have 50% width equally on PC's and 100% in mobile devices.
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.box-left {
width: 100%
}
.box-right {
width: 100%
}
</style>
<div class="container">
<div class="box-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
Expand or Shrink the view to check if its working.
.container {
display: flex;
flex-direction: column;
}
.box-left {
width: 100%;
font-size: 1rem;
font-family: 'Work Sans', sans-serif;
line-height: 1.5;
padding: 1rem;
}
.box-right {
margin: 0 auto;
width: 100%;
height: auto;
}
#media(min-width:576px) {
.container {
flex-direction: row;
}
.box-left {
width: 50%;
background: lightblue;
}
.box-right {
width: 50%;
background: lightcoral;
}
}
<div class="container">
<div class="box-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<img class="box-right" src="https://i.imgur.com/gawfygm.png" />
</div>
https://jsfiddle.net/drqjmssy/
From the jsfiddle link, I am trying to have "div class='main_content'" be the same vertical height as the "div class='sidebar'". How does one accomplish that? If you can't load the fiddle or it's awful formatting, here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My project</title>
<style>
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav > ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
</style>
</head>
<body>
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<footer>
© Yazen 2018.
</footer>
</div>
</body>
</html>
Sorry if any of this is confusing./////////////////////////////////////////////////////////////////////////////////
You could wrap the elements in a new tag (I've used section) and add display: flex.
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav>ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
section {
display: flex;
}
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<section>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</section>
<footer>
© Yazen 2018.
</footer>
</div>
I'm trying to find a simple fix to get my header to stay in a fixed position, but when I apply "position:fixed" to my header class nothing happens. I tried it with the h1 tag in the header too. I'd really appreciate it if someone could tell me what I'm doing wrong and what the simplest method would be to get the header to stay fixed when you scroll down the screen. I pasted the header section below.
Thank you for all suggestions!
<header class="logo">
<h1>The Loch Ness Monster Report</h1>
<ul id="nav-menu">
<li><a class="selected" href="index.html">Latest Sightings</a></li>
<li>History</li>
<li>Report a Sighting</li>
<li>Donate</li>
</ul>
</header>
The CSS is working because the other elements are connected. This is what I'm using for the CSS for the header element.
.logo {
position: fixed;
z-index: 1;
}
You could do something like this.
header{
width: 100vw; //set header width equal to viewport width.
}
.logo {
position: fixed; //set header fix to top
z-index: 1;
display: flex; // displays logo content horizontally
justify-content: flex-start; // set logo content
flex-direction: row;
height: auto;
background: #000000;
color: white;
}
#nav-menu{
display: flex;
flex-direction: row; //display lost horizontally
}
h1{
font-size: 140%;
}
li{
padding: 5px;
list-style: none;
}
a{
text-decoration: none;
color: white
}
li:hover{
background-color: white;
border-radius: 5px;
}
a:hover{
color: red;
}
body{
// reset body properties
padding: 0;
margin: 0;
}
.container{
padding-top: 60px;
}
section{
height: 500px;
width: 960px;
}
.section1{
background-color: blue;
}
.section2{
background-color: orange;
}
.section3{
background-color: red;
}
<body>
<header class="logo">
<h1>The Loch Ness Monster Report</h1>
<ul id="nav-menu">
<li><a class="selected" href="index.html">Latest Sightings</a></li>
<li>History</li>
<li>Report a Sighting</li>
<li>Donate</li>
</ul>
</header>
<div class="container">
<Section class="section1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Section>
<Section class="section2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Section>
<Section class="section3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Section>
</div>
</body>