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
Related
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%;
}
}
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.
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>
What I need to do is display a staggered set of testimonials on desktop and then when the screen is below 979px switch over to a vertical type of layout. The images and name of the person should be on the top as a header and the testimonial text directly below.
I have included a fiddle here. You can see that when the viewport is wide there is a staggered layout but when you shrink it the layout switches to a more vertical layout for the testimonials where the image was on the left.
What I need is for the testimonials where the image was on the right to look just like the testimonials where the image was on the left. The only way I have been able to do this is to change the order of the testimonials with the image on the right so that the image wrapper is placed above the text wrapper and float the image wrapper to the right. The problem with this is that it breaks the vertical-align: middle of the inline-block elements.
I am wondering if there is a different way to accomplish my vertical layout goal using pure CSS? I know I can easily do it with Javascript but would prefer not to use it if I don't have to.
Here is my code:
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
.about-wrapper .spacer {
height: 75px;
}
.about-wrapper h1.customer-testimonial-header {
text-align: center;
font-size: 2rem;
font-weight: 600;
color: white;
}
.about-wrapper .bubble p {
font-size: 0.9rem;
}
.about-wrapper .bubble {
position: relative;
padding: 35px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: #cecece solid 1px;
}
.about-wrapper .bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top: 50%;
border-color: transparent #FFFFFF;
}
.about-wrapper .bubble:before {
content: '';
position: absolute;
border-style: solid;
border-color: transparent #cecece;
display: block;
width: 0;
z-index: 0;
top: 50%;
}
.about-wrapper .bubble-left:after {
border-width: 15px 20px 15px 0;
left: -19px;
}
.about-wrapper .bubble-left:before {
border-width: 15px 20px 15px 0;
left: -21px;
}
.about-wrapper .bubble-right:after {
border-width: 15px 0px 15px 20px;
right: -19px;
}
.about-wrapper .bubble-right:before {
border-width: 15px 0px 15px 20px;
right: -21px;
}
.about-wrapper .left-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .right-three-quarter {
width: 65%;
}
.about-wrapper .right-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .left-three-quarter {
width: 65%;
}
.about-wrapper .column {
display: inline-block;
vertical-align: middle;
}
.about-wrapper .testimonial-text:before {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-start.png);
height: 16px;
width: 20px;
position: absolute;
left: 10px;
}
.about-wrapper .testimonial-text:after {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-end.png);
height: 16px;
width: 20px;
position: absolute;
right: 10px;
}
.about-wrapper .testimonial-name-wrapper {
margin-top: 15px;
}
.about-wrapper .about-banner {
position: relative;
}
.about-wrapper .about-banner .banner-text {
font-size: 2.3rem;
position: absolute;
top: 50%;
}
#media (min-width: 768px) and (max-width: 979px) {
.about-wrapper .left-one-quarter {
border-top: 1px solid;
padding: 20px 0 20px 10px;
border-bottom: 1px solid;
float: left;
width: 100%;
text-align: left;
}
.about-wrapper .right-three-quarter {
width: 100%;
}
.about-wrapper .testimonial-image-wrapper {
width: 20%;
display: inline-block;
}
.about-wrapper .testimonial-name-wrapper {
float: none;
display: inline-block;
margin-top: 15px;
}
.about-wrapper .testimonial-name-wrapper > strong {
margin-left: 20px;
vertical-align: middle;
font-weight: 500;
font-size: 1.5rem;
}
.about-wrapper .testimonial-name-wrapper > span {
display: none;
}
.about-wrapper .bubble-left {
border: none;
}
.about-wrapper .bubble:after,
.about-wrapper .bubble:before {
content: none;
}
.about-wrapper .testimonial-text:before,
.about-wrapper .testimonial-text:after {
content: none;
}
}
<div class="about-wrapper">
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-three-quarter column">
<div class="bubble-right bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
<div class="right-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
</div>
using flexbox(which has partial support in IE10+) you can achieve this using order and align-self
You just have to take care of the left bubbles and make it right bubbles.
/*new*/
#media (max-width: 979px) {
.testimonial-content {
display: flex
}
.right-three-quarter {
order: -1
}
.about-wrapper .column {
align-self: center
}
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
.about-wrapper .spacer {
height: 75px;
}
.about-wrapper h1.customer-testimonial-header {
text-align: center;
font-size: 2rem;
font-weight: 600;
color: white;
}
.about-wrapper .bubble p {
font-size: 0.9rem;
}
.about-wrapper .bubble {
position: relative;
padding: 35px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: #cecece solid 1px;
}
.about-wrapper .bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top: 50%;
border-color: transparent #FFFFFF;
}
.about-wrapper .bubble:before {
content: '';
position: absolute;
border-style: solid;
border-color: transparent #cecece;
display: block;
width: 0;
z-index: 0;
top: 50%;
}
.about-wrapper .bubble-left:after {
border-width: 15px 20px 15px 0;
left: -19px;
}
.about-wrapper .bubble-left:before {
border-width: 15px 20px 15px 0;
left: -21px;
}
.about-wrapper .bubble-right:after {
border-width: 15px 0px 15px 20px;
right: -19px;
}
.about-wrapper .bubble-right:before {
border-width: 15px 0px 15px 20px;
right: -21px;
}
.about-wrapper .left-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .right-three-quarter {
width: 65%;
}
.about-wrapper .right-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .left-three-quarter {
width: 65%;
}
.about-wrapper .column {
display: inline-block;
vertical-align: middle;
}
.about-wrapper .testimonial-text:before {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-start.png);
height: 16px;
width: 20px;
position: absolute;
left: 10px;
}
.about-wrapper .testimonial-text:after {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-end.png);
height: 16px;
width: 20px;
position: absolute;
right: 10px;
}
.about-wrapper .testimonial-name-wrapper {
margin-top: 15px;
}
.about-wrapper .about-banner {
position: relative;
}
.about-wrapper .about-banner .banner-text {
font-size: 2.3rem;
position: absolute;
top: 50%;
}
#media (min-width: 768px) and (max-width: 979px) {
.about-wrapper .left-one-quarter {
border-top: 1px solid;
padding: 20px 0 20px 10px;
border-bottom: 1px solid;
float: left;
width: 100%;
text-align: left;
}
.about-wrapper .right-three-quarter {
width: 100%;
}
.about-wrapper .testimonial-image-wrapper {
width: 20%;
display: inline-block;
}
.about-wrapper .testimonial-name-wrapper {
float: none;
display: inline-block;
margin-top: 15px;
}
.about-wrapper .testimonial-name-wrapper > strong {
margin-left: 20px;
vertical-align: middle;
font-weight: 500;
font-size: 1.5rem;
}
.about-wrapper .testimonial-name-wrapper > span {
display: none;
}
.about-wrapper .bubble-left {
border: none;
}
.about-wrapper .bubble:after,
.about-wrapper .bubble:before {
content: none;
}
.about-wrapper .testimonial-text:before,
.about-wrapper .testimonial-text:after {
content: none;
}
}
<div class="about-wrapper">
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-three-quarter column">
<div class="bubble-right bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
<div class="right-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
</div>
I recommend using Flex box for this, as answered by dippas.
However, if you insist that you want to present floats in a different order, then you need to rearrange their appearance order in the HTML DOM.
floats sit on the page appear in the order they appear and conforming to other placement rules such as float:left or float:right etc.
So if you want to reorder your floating units then each one needs to be given a tag (probably an id tag) and then a CSS media query for each one to show/hide which floating boxes you want to display at any certain screen size.
You'd need to add lots of display:none / display:block in #media based declarations to "reorder" your floats depending on screen size. This will cause some code repetition and increase your page size...
HTML
<html>
<body>
<div id='largeScreen'>
<div class='floater'>top content</div>
<div class='floater'>middle content</div>
<div class='floater'>bottom content</div>
</div>
<div id='smallScreen'>
<div class='floater'>bottom content</div>
<div class='floater'>top content</div>
<div class='floater'>middle content</div>
</div>
<body>
</html>
CSS
.floater {
float:left;
width:49%;
}
#media (max-width:600px){
#largeScreen {
display:none;
}
#smallScreen {
display:block;
}
}
#media (min-width:601px){
#largeScreen {
display:block;
}
#smallScreen {
display:none;
}
}
But I finish by saying this is a large code burden and repetition to the page layout and data size, and flexbox will only ever increase in availability.
Also here is a good guide to starting out with flexbox if you're not that used to it.
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%;
}