CSS mobile view off screen position issue

CSS mobile view off screen position issue - html

I have an issue with my text image and footer position. Whenever it is in mobile view the text stacks one and other with the images and the design doesn't look how I want it. I have tried using #media screen and (max-width: 480px) but I could not get it working.
I want the mobile view to fit in the screen and not go out of the screen.
Desire how I want it to look like almost the desktop version is fine is just that the mobile version is not working properly:
Mobile view:
Desktop view:
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.container {
margin-left: 25%;
padding: 1px 16px;
height: auto;
}
#media screen and (max-width: 480px) {
ul {
position: relative;
width: 100%;
}
.container {
/* margin: 0 auto; is a great trick for centering */
margin: 0 auto;
padding: 1px 16px;
height: 1000px;
}
/* remove the set width on your items */
div.item {
width: initial;
}
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 520px;
}
.blog {
max-width: 100%;
height: auto;
background-color: grey;
}
.caption {
display: block;
}
img {
display: block;
}
img.wrap {
max-width: 70%;
margin: 30px 0px;
}
img.align-right {
float: right;
margin-left: 30px;
}
div.article-container {
padding: 5px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>web</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li><img alt="htmll logo" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"></li>
<li>
<a class="active" href="#home">Länk 1</a>
</li>
<li>
Länk 2
</li>
<li>
Länk 3
</li>
<li>
Länk 4
</li>
</ul>
</nav>
<div class="container">
<h1>Innehåll</h1>
<div class="item">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
</div>
<div class="item">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
</div>
<div class="item">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
</div>
</div>
<hr>
<div class="container">
<div class="article-container clearfix">
<img class="wrap align-right" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="html logo">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<div class="footer">
This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.
</div>
</body>
</html>

Change the .item class to max-width:
max-width: 520px;
This will keep the text from staying at 520px and going over the side.
Also, on that media query of 480px for the .container class, remove the:
height: 1000px;
to keep the text from jumbling after the width change.

Related

CSS flexbox issue with paragraph

I have an issue with my flexbox and text it doesn't follow like the navigation bar in the mobile view. I want it to fill the screen with text the same size as the menu.
Issue:
I want to look like my article-container so that the text is filled out across the whole mobile screen. In desktop view, they are three together and in mobile view, they are stacked like hamburger similar to the menu where it says Länk 1 2 3 4.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #EBEBEB;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #F16529;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.container {
margin-left: 25%;
padding: 1px 16px;
height: auto;
}
#media screen and (max-width: 480px) {
ul {
position: relative;
width: 100%;
}
.container {
margin: 0 auto;
padding: 1px 16px;
}
div.item {
width: initial;
max-width: 256px;
}
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
max-width: 256px;
}
.blog {
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
.caption {
display: block;
}
img {
display: block;
}
img.wrap {
max-width: 70%;
margin: 30px 0px;
}
img.align-right {
float: right;
margin-left: 30px;
}
div.article-container {
padding: 5px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
footer {
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #EBEBEB;
text-align: center;
}
#media(max-width:767px) {
img.align-right {
float: none;
margin: auto;
}
div.article-container {
padding: 5px;
text-align: center;
max-width: 256px;
}
}
.flex-grid {
display: flex;
}
.flex-grid .col {
flex: 1;
}
.flex-grid-thirds {
display: flex;
justify-content: space-between;
}
.flex-grid-thirds .col {
width: 32%;
}
#media (max-width: 400px) {
.flex-grid,
.flex-grid-thirds {
display: block;
.col {
width: 100%;
margin: 0 0 10px 0;
}
}
}
* {
box-sizing: border-box;
}
body {
padding: 20px;
}
.flex-grid {
margin: 0 0 20px 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inlämningsuppgift 6</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--nav bar-->
<nav>
<ul>
<li style="list-style: none"><br></li>
<li><img alt="htmll logo" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"></li>
<li>
<h2>Menu</h2>
</li>
<li>
<a class="active" href="#lank">Länk 1</a>
</li>
<li>
Länk 2
</li>
<li>
Länk 3
</li>
<li>
Länk 4
</li>
</ul>
</nav><!--navbar end-->
<!--container for blog posts 3 images-->
</div>
<div class="container">
<h1>Innehåll</h1>
<div class="flex-grid-thirds">
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alligment >
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div><!--end-->
<hr>
<!--container for article -->
<div class="container">
<div class="article-container clearfix">
<img alt="html logo" class="wrap align-right" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div><!--end-->
<footer class="container">
Skriven i HTML 5.
</footer>
</html>

You're updating the width of the .col sections in your media query using .col but you defined the initial width using .flex-grid-thirds .col. So it's just a specificity issue in your media query. Use .flex-grid-thirds .col in your media query selector.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #EBEBEB;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #F16529;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.container {
margin-left: 25%;
padding: 1px 16px;
height: auto;
}
#media screen and (max-width: 480px) {
ul {
position: relative;
width: 100%;
}
.container {
margin: 0 auto;
padding: 1px 16px;
}
div.item {
width: initial;
max-width: 256px;
}
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
max-width: 256px;
}
.blog {
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
.caption {
display: block;
}
img {
display: block;
}
img.wrap {
max-width: 70%;
margin: 30px 0px;
}
img.align-right {
float: right;
margin-left: 30px;
}
div.article-container {
padding: 5px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
footer {
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #EBEBEB;
text-align: center;
}
#media(max-width:767px) {
img.align-right {
float: none;
margin: auto;
}
div.article-container {
padding: 5px;
text-align: center;
max-width: 256px;
}
}
.flex-grid {
display: flex;
}
.flex-grid .col {
flex: 1;
}
.flex-grid-thirds {
display: flex;
justify-content: space-between;
}
.flex-grid-thirds .col {
width: 32%;
}
#media (max-width: 400px) {
.flex-grid,
.flex-grid-thirds {
display: block;
}
.flex-grid-thirds .col {
width: 100%;
margin: 0 0 10px 0;
}
}
}
* {
box-sizing: border-box;
}
body {
padding: 20px;
}
.flex-grid {
margin: 0 0 20px 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inlämningsuppgift 6</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--nav bar-->
<nav>
<ul>
<li style="list-style: none"><br></li>
<li><img alt="htmll logo" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"></li>
<li>
<h2>Menu</h2>
</li>
<li>
<a class="active" href="#lank">Länk 1</a>
</li>
<li>
Länk 2
</li>
<li>
Länk 3
</li>
<li>
Länk 4
</li>
</ul>
</nav><!--navbar end-->
<!--container for blog posts 3 images-->
</div>
<div class="container">
<h1>Innehåll</h1>
<div class="flex-grid-thirds">
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alligment >
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="col">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div><!--end-->
<hr>
<!--container for article -->
<div class="container">
<div class="article-container clearfix">
<img alt="html logo" class="wrap align-right" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div><!--end-->
<footer class="container">
Skriven i HTML 5.
</footer>
</html>

The problem is that the class .col is still set to width 32%. When the browser is less than 480px the body text is still only 32% when it should be 100%.
Easiest fix is to add
#media screen and (max-width: 480px) {
.col {
width: 100% !important;
}
}
If you want to remove the !important you can move the class .flex-grid-thirds .col to only get called when the browser is greater than 481px.
#media screen and (min-width: 481px) {
{
width: 32%;
}
}

CSS alignment right in desktop view and mobile view alignment center

I have an issue when it comes to viewing my website responsive one of the images is a little bit off screen but in desktop view, it supposes to be to the right however in mobile view it should it in the centre like others.
The image is located under:<!--container for article -->
<div class="container">
<div class="article-container clearfix">
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #EBEBEB;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #F16529;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.container {
margin-left: 25%;
padding: 1px 16px;
height: auto;
}
#media screen and (max-width: 480px) {
ul {
position: relative;
width: 100%;
}
.container {
margin: 0 auto;
padding: 1px 16px;
}
div.item {
width: initial;
max-width: 256px;
}
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
max-width: 256px;
}
.blog {
max-width: 100%;
height: auto;
}
.caption {
display: block;
}
img {
display: block;
}
img.wrap {
max-width: 70%;
margin: 30px 0px;
}
img.align-right {
float: right;
margin-left: 30px;
}
div.article-container {
padding: 5px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
footer {
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #EBEBEB;
text-align: center;
}
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="sv">
<head>
<title>Inlämningsuppgift 6</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--nav bar-->
<nav>
<ul>
<br>
<li><img alt="htmll logo" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"></li>
<li>
<h2>Menu</h2>
</li>
<li>
<a class="active" href="#lank">Länk 1</a>
</li>
<li>
Länk 2
</li>
<li>
Länk 3
</li>
<li>
Länk 4
</li>
</ul>
</nav>
<!--navbar end-->
<!--container for blog posts 3 images-->
<div class="container">
<h1>Innehåll</h1>
<div class="item">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
</div>
<div class="item">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
</div>
<div class="item">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
</div>
</div>
<!--end-->
<hr>
<!--container for article -->
<div class="container">
<div class="article-container clearfix">
<img alt="html logo" class="wrap align-right" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<!--end-->
<footer>
Skriven i HTML 5.
</footer>
</body>
</html>

Add this css.
#media screen and (max-width: 480px) {
img.align-right {
float: none;
margin: auto;
max-width: 256px;
}
div.article-container {
padding: 5px;
text-align: center;
max-width: 256px;
}
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #EBEBEB;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #F16529;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.container {
margin-left: 25%;
padding: 1px 16px;
height: auto;
}
#media screen and (max-width: 480px) {
ul {
position: relative;
width: 100%;
}
.container {
margin: 0 auto;
padding: 1px 16px;
}
div.item {
width: initial;
max-width: 256px;
}
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
max-width: 256px;
}
.blog {
max-width: 100%;
height: auto;
}
.caption {
display: block;
}
img {
display: block;
}
img.wrap {
max-width: 70%;
margin: 30px 0px;
}
img.align-right {
float: right;
margin-left: 30px;
}
div.article-container {
padding: 5px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
footer {
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #EBEBEB;
text-align: center;
}
#media(max-width:767px){
img.align-right {
float: none;
margin: auto;
}
div.article-container {
padding: 5px;
text-align: center;
max-width: 256px;
}
}
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="sv">
<head>
<title>Inlämningsuppgift 6</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--nav bar-->
<nav>
<ul>
<br>
<li><img alt="htmll logo" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"></li>
<li>
<h2>Menu</h2>
</li>
<li>
<a class="active" href="#lank">Länk 1</a>
</li>
<li>
Länk 2
</li>
<li>
Länk 3
</li>
<li>
Länk 4
</li>
</ul>
</nav>
<!--navbar end-->
<!--container for blog posts 3 images-->
<div class="container">
<h1>Innehåll</h1>
<div class="item">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
</div>
<div class="item">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
</div>
<div class="item">
<img alt="htmll logo" class="blog" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png"> <span class="caption">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</span>
</div>
</div>
<!--end-->
<hr>
<!--container for article -->
<div class="container">
<div class="article-container clearfix">
<img alt="html logo" class="wrap align-right" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<!--end-->
<footer>
Skriven i HTML 5.
</footer>
</body>
</html>

add media query for image
display: block;
margin: 0 auto

Sticky header/footer in a resizable container

I am trying to make the header and footer fixed at the top and bottom portion of a resizable container. However, when I resize the container the footer stays fixed and doesn't respond with its container.
Here is my code:
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
<style type="text/css">
.container {
height: 500px;
width: 500px;
border: 1px solid black;
}
#sticky-header, #sticky-footer {
position: relative;
min-height: 100px!important;
width: 100%;
background-color: black;
}
#sticky-header {
top: 0;
}
#main {
min-height: 300px!important;
width: 100%;
overflow: scroll;
}
#sticky-footer {
bottom: 0;
}
</style>
</head>
<body>
<div class="container" id="resizable">
<div id="sticky-header"></div>
<div id="main"></div>
<div id="sticky-footer"></div>
</div><!-- /end container -->
</body>

not sure what you expect, but CSS on its own should do this via flex and resize : demo or snippets below
.container {
margin: auto;
height: 200px;
width: 500px;
border: 1px solid black;
display: flex;
flex-direction: column;
resize: both;
overflow: auto;
/* to trigger resize handle */
}
#sticky-header,
#sticky-footer {
text-align: center;
color: white;
background-color: black;
}
#main {
flex: 1;
overflow: auto;
}
<div class="container" id="resizable">
<div id="sticky-header">height from content</div>
<div id="main">scroll when needed</div>
<div id="sticky-footer">height from content</div>
</div>
the same with more content
.container {
margin: auto;
height: 200px;
width: 500px;
border: 1px solid black;
display: flex;
flex-direction: column;
resize: both;
overflow: auto;
}
#sticky-header,
#sticky-footer , nav a{
color: white;
background-color: black;
text-align:center;
}
#main {
flex: 1;
overflow: auto;
}
<div class="container" id="resizable">
<div id="sticky-header">
<h1>HTML Ipsum Presents</h1>
</div>
<div id="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
<div id="sticky-footer">
<nav>
Home
About
Clients
Contact Us
</nav>
</div>
</div>

how to make a content-box be fixed vertically

Not a full-time front end dev so might be really simple. I am trying ot add a vertical nav box as can be seen here (the blue box) http://jsbin.com/oceguRa/2/edit?html,output I'd like this blue box to be fixed vertically rather than scrolling. How would I do this?
thx

add position: fixed; in your .nav-box
Fiddle

you just want to fix it? Add position:fixed
EXAMPLE

<title>Reveal | Scrolling Sidebar from CSS-Tricks</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 600px; margin: 0 auto; position: relative; z-index: 1500; }
h1 { padding-top: 15px; }
p { margin: 0 0 15px 0; }
p:first-child { background: #fffcde; padding: 10px; }
#sidebar ul { background: #eee; padding: 10px; }
li { margin: 0 0 0 20px; }
#main { width: 390px; float: left; }
#sidebar { width: 190px; position: fixed; left: 50%; top: -45px; margin: 0 0 0 110px; z-index: 1000; }
#title-area { background: white; position: relative; z-index: 3000; }
#reveal { position: absolute; right: 0; bottom: -20px; z-index: 2000; }
</style>
<!--[if IE 6]>
<style type="text/css">
html, body { height: 100%; overflow: auto; }
#sidebar { position: absolute; }
#page-wrap { margin-top: -5px; }
#ie6-wrap { position: relative; height: 100%; overflow: auto; width: 100%; }
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#page-wrap { margin-top: -5px; }
#reveal { bottom: -10px; }
</style>
<![endif]-->
<div id="ie6-wrap">
<div id="page-wrap">
<div id="title-area">
<h1>Scrolling Sidebar</h1>
<p>By <strong>CSS</strong>-Tricks</p>
<img src="images/reveal.png" alt="" id="reveal" />
</div>
<div id="main">
<p>Scroll down and watch the sidebar on the right follow.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
<div id="sidebar">
<img src="images/logo.png" alt="logo" id="logo" />
<ul>
<li>jQuery (animated)</li>
<li>CSS (fixed)</li>
<li>CSS (reveal)</li>
</ul>
</div>

use
position:fixed
html
<div class="container">
<div id="side_nav">
</div>
<div class="body1">
</div>
</div>
css
*
{margin:0;
padding:0;
}
.container
{width:1000px;
margin:0 auto;
}
#side_nav
{width:20%;
height:150px;
background:#06C;
position:fixed;
}
.body1
{width:60%;
height:900px;
background:#096;
margin-left:35%;
}

Sticky footer not working with full width slider

I'm using this code: http://www.cssstickyfooter.com/using-sticky-footer-code.html to stick my footer.
Well, as you can see here: http://alsite.com.br/prime/
my #main div is passing behind my footer (yellow and blue) part...
What's wrong??
My code:
HTML:
<div id="wrap">
<div id="header">
<header>
<div id="wrap_header">
<h1 id="logo">Prime Consultoria</h1>
<nav>
<ul>
<li>Home</li>
<li>Conheça a Prime</li>
<li>Produtos e Serviços</li>
<li>Área do Cliente</li>
<li>Fale Conosco</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
</div>
<div id="banner">
<div id="cbp-fwslider" class="cbp-fwslider">
<ul>
<li><img src="banners/banner_1.jpg" alt="img01"/></li>
<li><img src="banners/banner_2.jpg" alt="img02"/></li>
<li><img src="banners/banner_3.jpg" alt="img03"/></li>
<li><img src="banners/banner_4.jpg" alt="img04"/></li>
<li><img src="banners/banner_5.jpg" alt="img05"/></li>
</ul>
</div>
</div>
<div id="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
<div id="footer">
</div>
CSS:
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 160px;} /* deve ter a mesma altura do rodapé */
#footer {position: relative; margin-top: -160px; height: 160px; clear:both;} /* valor negativo da altura do rodapé */
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
#header {position:absolute; top:0; left:0; min-width:100%; height:150px; z-index:1;}
header{ min-width:100%; height:150px; background:url(../imagens/fundo_header_logo.png) top center no-repeat;}
#wrap_header{
width:960px;
margin:0 auto;
}
#wrap_header #logo{
float:left;
padding-top:31px;
padding-left:15px;
}
#wrap_header #logo a{
display:block;
width:224px;
height:56px;
background:url(../imagens/logo.png);
text-indent:-9999px;
}
nav {
float:right;
}
#banner{
position:relative;
top:50px;
z-index:0;
}
#main{
position:relative;
width:950px;
margin:0 auto;
border:5px solid #f0f0f0;
background:#FFF;
}
BANNER CSS:
.cbp-fwslider {
position: relative;
margin: 0 0 10px;
overflow: hidden;
padding: 40px 0 0px;
}
.cbp-fwslider ul {
margin: 0;
padding: 0;
white-space: nowrap;
list-style-type: none;
}
.cbp-fwslider ul li {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
float: left;
display: block;
margin: 0;
padding: 0;
}
.cbp-fwslider ul li > a,
.cbp-fwslider ul li > div {
display: block;
text-align: center;
outline: none;
}
.cbp-fwslider ul li > a img {
border: none;
display: block;
margin: 0 auto;
max-width: 100%;
}
.cbp-fwslider nav span {
position: absolute;
top: 50%;
width: 60px;
height: 60px;
background: url(../imagens/sprite.png) -65px 0 no-repeat;
color: #fff;
font-size: 50px;
text-align: center;
margin-top: -50px;
line-height: 100px;
cursor: pointer;
font-weight: normal;
}
.cbp-fwslider nav span:hover {
background: #378fc3;
}
.cbp-fwslider nav span.cbp-fwnext {
right: 10px;
text-indent:-9999px;
background: url(../imagens/sprite.png) -65px 0 no-repeat;
}
.cbp-fwslider nav span.cbp-fwprev {
left: 10px;
text-indent:-9999px;
background: url(../imagens/sprite.png) 0 0 no-repeat;
}
.cbp-fwslider nav span.cbp-fwprev:hover{
background: url(../imagens/sprite.png) 0 -60px no-repeat;
}
.cbp-fwslider nav span.cbp-fwnext:hover{
background: url(../imagens/sprite.png) -65px -60px no-repeat;
}
.cbp-fwdots {
position: absolute;
bottom: 0px;
white-space: nowrap;
text-align: center;
width: 100%;
display:none;
}
.cbp-fwdots span {
display: inline-block;
width: 18px;
height: 18px;
background: #ddd;
margin: 4px;
border-radius: 50%;
cursor: pointer;
}
.cbp-fwdots span:hover {
background: #999;
}
.cbp-fwdots span.cbp-fwcurrent {
background: #47a3da;
box-shadow: 0 0 0 2px #47a3da;
-webkit-transition: box-shadow 0.2s ease-in-out;
-moz-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
}

You have margin-top: -160px; on you #footer
Remove that and your #main div will not pass under the footer.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

CSS mobile view off screen position issue - html

Change the .item class to max-width: max-width: 520px; This will keep the text from staying at 520px and going over the side. Also, on that media query of 480px for the .container class, remove the: height: 1000px; to keep the text from jumbling after the width change.

Related

CSS flexbox issue with paragraph

CSS alignment right in desktop view and mobile view alignment center

Sticky header/footer in a resizable container

how to make a content-box be fixed vertically

Sticky footer not working with full width slider

Categories

Resources