I was wondering why my Right-nav div isn't responding to anything in the CSS.
HTML:
<body>
<div id="header">Header</div>
<div id="main-wrap">
<div id="sidebarwrap">
<div id="nav">Left Nav</div>
advertisment pictures
</div>
<div id="content-wrap">
<div id="picture-wrap">
<div class="info">Picture</div>
</div>
<div id = "Content"><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.</p></div>
<div class ="Right-nav"><p>right-nav</p></div>
</div>
</div>
<div id="footer">Footer</div>
</body>
CSS:
/**
* custom layout
*/
#header,
#footer {
background-color: #f1f1f1;
width: 60%;
margin: 0 auto;
}
#main-wrap {
background-color: #D9D9D9;
width: 60%;
margin: 0 auto;
}
#sidebar {
background-color: #d2d2d2;
}
#content-wrap {
background-color: #c5c5c5;
}
.info {
background-color: #DDD;
}
.info + .info {
background-color: #e6e6e6
}
/* sizes */
#main-wrap > div {
min-height: 450px;
}
#header,
#footer {
min-height: 40px;
}
.info {
min-height: 80px;
}
/* layout */
#main-wrap {
/* overflow to handle inner floating block */
overflow: hidden;
}
#sidebarwrap {
float: left;
width: 30%;
overflow:hidden;
background-color:blue;
}
#nav{
min-height: 80px;
background-color: red;
}
#content-wrap {
float: right;
width: 70%;
overflow:hidden;
background-color:blue;
}
#Content{
float:left;
width:40%;
min-height:370px;
background-color:red;
}
#Right-nav{
background-color:red;
}
#picture-wrap {
/* overflow to handle inner floating block */
overflow: hidden;
}
.info {
width:100%;
float: left;
}
It's because you've given the right div a class in the HTML but an id in the CSS, change both to one or the other and the problem should be resolved.
Change <div class="Right-nav"> to <div id="Right-nav">
Related
In mobile view, the footer is not remaining at at the bottom of the page. It stays somewhere above the bottom. I want the footer to stay at the bottom always in mobile view and desktop view. But the footer should not be visible always, if the site has much contents, user will have to scroll down to see the footer. What changes do I need to make in the css file to make the footer stay at the bottom of the page always?
html { height: 100%; }
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:1100px;
overflow:auto;
height:100%;
}
#mainPart{
margin:0 auto;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
}
footer {
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
}
.footrow{
overflow:hidden;
background-color: #111;
display:block;
}
.footrow2{
overflow:hidden;
background-color: #002c42;
display:block;
padding:15px;
}
.foot{
max-width:1080px;
margin:0 auto;
font-size:11px;
line-height:18px;
}
.foot-p{
font-weight: 600;
padding:2px;
color:#66e355 !important;
}
.half-width {
width: 50%;
float:left;
}
.quarter-width {
width: calc(25% - 30px);
float:left;
padding:15px;
}
#social2 {
display: block;
background-color: transparent;
float: left;
margin: 0 auto;
}
.sc-icn2 {
width: 50px;
height: 50px;
display: block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
}
<html>
<head>
</head>
<body>
<div id="mainPart">
</div>
<div class="container">
</div>
<footer>
<div class="footrow" >
<div class="foot">
<div class="quarter-width">
<div>
</div>
</div>
<div class="quarter-width">
</div>
<div class="quarter-width">
<div id="social2">
</div>
</div>
<div class="quarter-width">
</div>
</div>
</div>
<div class="footrow2" >
<div class="foot">
<div class="half-width">
</div>
<div class="half-width">
</div>
</div>
</div>
</footer>
</body>
</html>
To achieve that result define the footer position to bottom. position: absolute; bottom: 0;
The position property specifies the type of positioning method used for an element. The absolute element is positioned relative to its first positioned ancestor element which is the body As you can see in body css rule the element is positioned relative to its normal position.
More about position property can be found here.
html {
position: relative;
min-height: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
overflow-x: hidden;
margin: 0px;
position: relative;
min-height: 100%;
height: auto;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #34495e;
color:#fff;
text-align: center;
}
<div class="demo">
<h1>Footer Stays Bottom</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
To make the footer stay at bottom of the page, you simply have to add position: absolute; and bottom: 0; in the block of CSS that applies to footer. So it will become:
footer{
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
position: absolute;
bottom: 0;
}
You can do this by many ways:
There is negative bottom margins on wrappers
There was a wrapping element that held everything except the footer. It had a negative margin equal to the height of the footer.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
<div class="content">
<h1>Sticky Footer with Negative Margin 1</h1>
</div>
<footer class="footer">
Footer
</footer>
Negative top margins on footers
This technique did not require a push element, but instead, required an extra wrapping element around the content in which to apply matching bottom padding to. Again to prevent negative margin from lifting the footer above any content.
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
background: red;
}
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
There is calc() reduced height wrappers
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.content {
min-height: calc(100vh - 70px);
padding: 40px 40px 0 40px;
}
.footer {
height: 50px;
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
<div class="content">
<h1>Sticky Footer with calc()</h1>
</div>
<footer class="footer">
Footer
</footer>
And also you can use flexbox
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1 0 auto;
padding: 20px;
}
.footer {
flex-shrink: 0;
padding: 20px;
background: #42A5F5;
color: white;
}
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
</div>
<footer class="footer">
Footer
</footer>
This works for you. Try it.
For that add enough content in side the .container div.
And add min-height value to .container as below.
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:100%;
overflow:auto;
height:100%;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
/*new style*/
min-height:768px;
}
#media only screen and (max-width: 768px) {
.container{
max-width: 80%;
margin:20px auto 40px auto;
min-height:480px;
}
}
html { height: 100%; }
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:100%;
overflow:auto;
height:100%;
}
#mainPart{
margin:0 auto;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
min-height:768px;
}
footer {
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
}
.footrow{
overflow:hidden;
background-color: #111;
display:block;
}
.footrow2{
overflow:hidden;
background-color: #002c42;
display:block;
padding:15px;
}
.foot{
max-width:1080px;
margin:0 auto;
font-size:11px;
line-height:18px;
}
.foot-p{
font-weight: 600;
padding:2px;
color:#66e355 !important;
}
.half-width {
width: 50%;
float:left;
}
.quarter-width {
width: calc(25% - 30px);
float:left;
padding:15px;
}
#social2 {
display: block;
background-color: transparent;
float: left;
margin: 0 auto;
}
.sc-icn2 {
width: 50px;
height: 50px;
display: block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
}
#media only screen and (max-width: 768px) {
.container{
max-width: 80%;
margin:20px auto 40px auto;
min-height:480px;
}
}
<html>
<head>
</head>
<body>
<div id="mainPart"></div>
<div class="container">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<footer>
<div class="footrow" >
<div class="foot">
<div class="quarter-width">
<div>
</div>
</div>
<div class="quarter-width">
</div>
<div class="quarter-width">
<div id="social2">
</div>
</div>
<div class="quarter-width">
</div>
</div>
</div>
<div class="footrow2">
<div class="foot">
<div class="half-width">
</div>
<div class="half-width">
</div>
</div>
</div>
</footer>
</body>
</html>
I am trying to get a basic layout going with CSS.
Header
Aside - Content
Footer
I put a margin-top property for the footer, but i am not sure why it is not working. Here is the simple code I have so far:
<style>
header {
width: 100%;
height: 100px;
border: 1px solid black;
margin-bottom: 10px;
}
aside {
width: 100px;
height: 200px;
border: 1px solid green;
float: left;
margin-right:10px;
}
article {
height: 200px;
width: 200px;
border: 1px solid red;
float: left;
}
footer {
clear: both;
border: 1px solid blue;
width: 100%;
height: 100px;
margin-top: 10px;
}
</style>
<header> </header>
<aside> </aside>
<article> </article>
<footer> </footer>
You can see the footer not getting a margin here:
http://i.imgur.com/PeeTg6I.png
Add display: inline-block; in footer.
<style>
header {
width: 100%;
height: 100px;
border: 1px solid black;
margin-bottom: 10px;
}
aside {
width: 100px;
height: 200px;
border: 1px solid green;
float: left;
margin-right:10px;
}
article {
height: 200px;
width: 200px;
border: 1px solid red;
float: left;
}
footer {
clear: both;
border: 1px solid blue;
width: 100%;
height: 100px;
margin-top: 10px;
display: inline-block;
}
</style>
<header>
</header>
<aside>
</aside>
<article>
</article>
<footer>
</footer>
Try It Once
*{
margin:0px;
padding:0px;
}
header {
width: 100%;
height: 100px;
border: 1px solid black;
margin-bottom:10px;
}
aside {
width: 100px;
height: 200px;
border: 1px solid green;
float: left;
margin-bottom:10px;
}
article {
height: 200px;
width: 200px;
border: 1px solid red;
float: left;
margin-bottom:10px;
}
footer {
clear: both;
border: 1px solid blue;
width: 100%;
height: 100px;
margin-right:10px;
}
<body>
<header>
</header>
<aside>
</aside>
<article>
</article>
<footer>
</footer>
</body>
body{
font-family:Arial, Helvetica, sans-serif;
}
header{
border-radius:10px;
padding:10px 1%;
margin:10px 1%;
background-color:#066;
text-align:center;
}
article{
background-color:#066;
width:50%;
height:100%;
float:left;
border-radius:10px;
text-align:center;
margin:10px;
}
content{
background-color:#066;
width:40%;
height:100%;
border-radius:10px;
text-align:center;
margin:10px;
float:right;
}
footer{
clear:both;
border-radius:10px;
background-color:#066;
text-align:center;
padding:10px;
margin:10px;
}
<header>
<h2>Header</h2>
</header>
<article>
<h2>Aside</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id odio velit. Praesent orci lectus, fermentum vel ullamcorper vel, pharetra ac elit. Fusce eu sapien ac ligula tempor fermentum. Sed vulputate rutrum mattis. Ut et metus ac lectus fermentum porttitor.</p>
</article>
<content>
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id odio velit. Praesent orci lectus, fermentum vel ullamcorper vel, pharetra ac elit. Fusce eu sapien ac ligula tempor fermentum. Sed vulputate rutrum mattis. Ut et metus ac lectus fermentum porttitor. </p>
</content>
<footer>
<h2>Footer</h2>
</footer>
OK so here is my code
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
I want my website to look like this: first square is red, next to is green, and below red is yellow square. I thought that float left on first element should make next one jump right next to him. Why doesn't it work?
Add float: left; to .div2 and clear:left to .div3
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
float: left;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
clear: left;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
You need to add float:left to the green box in order to make the element stand next to red. If you added the float:left to the yellow square, it would stand next to green. We added clear: left to "clear" the left floats.
Read more about floats.
The problem is that floating elements are out-of-flow:
An element is called out of flow if it is floated, absolutely
positioned, or is the root element.
Therefore, they don't impact surrounding elements as an in-flow element would.
This is explained in 9.5 Floats:
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling:after {
content: 'Block sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
<div class="float"></div>
<div class="block-sibling">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>
There is an exception to that problematic behavior: if a block element establishes a Block Formatting Context (is a BFC root), then it won't overlap the float:
The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context […] must not overlap the margin box of any floats in the same
block formatting context as the element itself.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling.bfc-root:after {
content: 'BFC sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="float"></div>
<div class="block-sibling bfc-root">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>
For example, you can establish a BFC with overflow different than visible, e.g. hidden
.div2 {
overflow: hidden;
}
.div1 {
height: 40px;
width: 40px;
background-color: red;
display: block;
float: left;
}
.div2 {
height: 40px;
width: 40px;
background-color: green;
display: block;
overflow: hidden;
}
.div3 {
height: 40px;
width: 40px;
background-color: yellow;
display: block;
}
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<html>
<head>
<style>
.div1{
height:40px;
width:40px;
background-color:red;
display:block;
float:left;
}
.div2{
height:40px;
width:40px;
background-color:green;
display:block;
float:left;
}
.div3{
height:40px;
width:40px;
background-color:yellow;
display:block;
float:left;
clear: both;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
This will do what you want, but, there is much to improve in that code to make it more simple and more DRY, this will be a short answer, if you want to see a better and smaller style to do the same just ask, and gladly will help.
I want my page to fill the screen even if it doesn't contain enough content. I have made this happen with height set to 100% in body. What I also want is some space around my content, and by adding 5px to the margin it gets how I want it. My problem is that then I have to scroll to see the whole page, even if the content is not too long for the screen. I guess there is a simple sollution to this, but I can't seem to find it. Anyone who can?
/* Allmänt */
html, body{
background: grey;
background-size: cover;
height: 100%;
}
#content{
background-color: white;
width: 1100px;
margin: 5px auto;
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
/* Header */
#huvud{
width: 1000px;
height: 250px;
margin: 0 auto;
position: relative;
padding-top: 5px;
}
#header{
display: block;
}
/* Meny */
#nav-yttre{
width: 1000px;
height: 35px;
margin: 0 auto;
background-image: url("Rusty-bar2.jpg");
}
#nav-mitten{
display: table;
width: 100%;
padding: 10px;
}
#nav-inre{
display: table-row;
list-style: none;
font-family: 'Special Elite', Verdana, Arial, sans-serif;
font-size: 25px;
}
#nav-inre li{
display: table-cell;
}
#nav-inre li a{
display: block;
text-decoration: none;
text-align: center;
color: #eeeeee;
}
#nav-inre li #here{
color: #221f20;
}
#nav-inre li a:hover{
color: #221f20;
}
/* Main */
#main{
width: 980px;
margin: 0 auto;
height: 100%;
position: relative;
padding-bottom: 150px;
}
#fadein {
margin: 10px auto;
position:relative;
width:970px;
height:215px;
padding: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#fadein img {
position:absolute;
}
#main-blogg{
width: 1050px;
margin: 0 auto;
}
#blogg{
min-height: 1000px;
}
/* Fot */
#fot{
width: 980px;
margin: 0 auto;
text-align: center;
}
#fot-inre{
border-top: solid #221f20 1px;
position: absolute;
bottom: 0;
}
#adress{
width: 327px;
float: left;
}
#kontakt{
width: 326px;
float: left;
}
#tider{
width: 326px;
float: right;
}
#design{
width: 500px;
margin: 0 auto;
clear: both;
text-align: center;
background-image: url("Rusty-bar-small.jpg");
}
#design p{
color: #eeeeee;
font-weight: bold;
}
#design a{
color: #eeeeee;
}
#design a:hover{
color: #221f20;
}
#rub{
font-weight: bold;
}
/* Allmänt */
p{
font-family: Verdana, Arial, sans-serif;
color: #221f20;
font-size: 0.9em;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stajlish.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="stajlish.js"></script>
</head>
<body>
<div id="content">
<div id="huvud">
<img id="header" src="hej.jpg" alt="Header">
</div>
<div id="nav-yttre">
<div id="nav-mitten">
<ul id="nav-inre">
<li>HEM</li>
<li>OM OSS</li>
<li>BLOGG</li>
<li>MÄRKEN</li>
<li>HITTA HIT</li>
</ul>
</div>
</div>
<div id="main">
<div id="fadein">
<img src="slides1.jpg">
<img src="slides2.jpg">
<img src="slides3.jpg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus quam lectus, in suscipit nisl luctus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit eros, tempor sed bibendum nec, luctus in dui. Proin vitae tincidunt diam, a pulvinar tortor. Maecenas pulvinar rhoncus nisl quis aliquet. Nulla dolor metus, euismod ac gravida eget, congue at nunc. Etiam non urna vel dolor pulvinar finibus. Suspendisse eget lacinia massa. Morbi sodales non purus pretium congue. Nullam sed tellus diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla porta sapien sit amet placerat lobortis. Nunc sed orci tincidunt, lacinia massa ut, fringilla est. Maecenas sodales orci at erat malesuada, non tristique leo auctor. Suspendisse augue felis, lobortis rhoncus pharetra at, pretium sit amet dolor.</p>
</div>
<div id="fot">
<div id="fot-inre">
<div id="adress">
<p id="rub">BESÖKSADRESS</p>
<p>Hej</p>
</div>
<div id="kontakt">
<p id="rub">KONTAKTA OSS</p>
<p>Telefon: 08-123 45 67</p>
<p>Mail: info#mail.se</p>
</div>
<div id="tider">
<p id="rub">ÖPPETTIDER</p>
<p>Vardagar: 10-19<br>Lördag: 10-17<br>Söndag: 11-16</p>
</div>
<div id="design">
<p>Webbplatsen är gjord av Maria</p>
</div>
</div>
</div>
</div>
</body>
Bulletproof full height!
*,
*:before,
*:after {
-webkit-box-sizing:border-box;
-mozbox-sizing:border-box;
box-sizing:border-box;
}
html,
body {
height:100%;
height:100vh;
margin:0;
padding:0;
}
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
}
Reasons:
100vh is supported in IE9 and above (and basically anything else), and 100% is used as a fallback
border-box is a key piece of layout functionality, to support recalc after padding (so width:50px actually remains 50px, instead of 50px plus padding), and it works back to IE8
adding the margin:0;padding:0; to the html,body eliminates the white space around it ... if you desperately want padding on the body, add it separately (although you should really have it on whatever container you have for everything)
EDIT
So the reason you are still needing to scroll is because border-box handles padding, but not margin. If you want "room" around your content, add the padding there:
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
padding:5px 0;
}
This will give you the effect of room on top and bottom. However, if (for some crazy reason) you are really clinging to the need for margin over padding, you could use calc:
#content {
height:auto !important;
min-height:calc(100% - 10px);
min-height:calc(100vh - 10px);
margin:5px auto;
}
Only supported on IE9 and up, but will give you what you are looking for. I highly advise against it though, as what you are trying to attain is much more easily doable in ways that don't involve margin.
I would implement 2 things. I would use a bumper and calc.
<div class="bumper"></div>
.bumper {
height:5px;
width:100%;
}
put the bumper where you would want your padding to be. Then use calc to set the height of the content.
#content {
background-color: white;
max-width:800px;
padding: 5px;
min-height:90%; //backup for browsers who do not support calc
min-height:calc(100% -5px);
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
html, body {
background: grey;
height: 100%;
margin:0px; //important
}
Result:
http://jsfiddle.net/m/qes/
Full Code: http://jsfiddle.net/neoaptt/r2ddyg8e/
Change
html, body{
background: grey;
background-size: cover;
height: 100%;
}
to
html, body{
background: grey;
background-size: cover;
height: 100vh;
}
then add a reset
*{box-sizing: border-box; padding: 0; margin: 0}
you can read more about Sizing with CSS3's vw and vh units
The problem:
The reason you have to scroll to see the whole page is because you are giving your element with the id content a min-height of 100% and then also giving it a margin of 5px auto. This is essentially saying I want my content element to have a height of 100% + 5px on the top and 5px on the bottom of margin. height now equals: (100% + 10px).
The answer:
If you want space around your content use the padding property on your content element instead of the margin. This will push the elements within the content element inward 5px from the top and 5px from the bottom, without increasing the height of your content element past 100%.
It should look something like this (not tested):
#content{
background-color: white;
width: 1100px;
padding: 5px auto; /* changed margin to padding */
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
You have a top and bottom margin on your #content div. Remove it and add this to the body :
body {
padding: 5px 0;
box-sizing: border-box;
}
I am trying to extend the background color of my nav-wrapper div or in general, my navigation area, beyond the 960px container. I have tried some techniques, but nothing has appeared to be working. See attached code and JSFiddle.
JSFidde: Header Background Color Extend
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Responsive 3-Line Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link type="text/javascript" src="navicon.js">
</head>
<body>
<!-- Start Wrapper -->
<div class="wrapper">
<!-- Start Navigation Wrapper -->
<nav class="nav-wrapper">
<img src="tappery.png"/>
<!-- Start Navigation Links -->
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- End Navigation Links -->
</nav>
<!-- End Navigation Wrapper -->
<!-- Start Content -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet ante orci, vitae auctor risus pharetra at. Quisque gravida a massa eget hendrerit. Nulla facilisi. Ut rutrum commodo faucibus. Aenean nec libero condimentum, vehicula nisi ut, ullamcorper felis. Ut non tempus odio. Donec vulputate blandit adipiscing. Ut condimentum feugiat lacus. Morbi eget mi pulvinar, imperdiet quam non, commodo ante. Proin vel urna in quam malesuada tincidunt. Suspendisse bibendum lacinia mi, et consectetur felis. Quisque a sem vel justo condimentum scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie dapibus quam, nec pharetra nisl pretium in. Fusce blandit felis vitae eros tempor, in tempor neque malesuada. Duis in dignissim sem.</p>
</div>
<!-- End Content -->
</div>
<!-- End Wrapper -->
<script type="text/javascript">$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});</script>
</body>
</html>
CSS:
html, body {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
background-color: #cecece;
}
.wrapper {
top:0;
margin-top: 0;
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
overflow: hidden;
}
#logo {
width: 200px;
}
#logo img {
width: 150px;
height: 40px;
}
#nav {
width: 100%;
}
#content {
margin-top: 50px;
}
li {
}
li:last-child {
border-right:none;
}
li a {
display: block;
width:100%;
background:#fff;
color: #3d6430;
font-size:1.35em;
text-decoration: none;
margin-top: 5px;
}
#media screen and (max-width: 768px) {
.wrapper {
width: 100%;
overflow: hidden;
}
#nav {
clear: both;
}
#menu {
width:1.4em;
display: block;
background:#fff;
font-size:1.35em;
text-align: center;
float: right;
top:0;
}
#logo {
float: none;
}
#nav.js {
display: none;
padding: 0;
}
ul {
width:100%;
list-style:none;
height: auto;
}
li {
width:100%;
border-right:none;
border-top: 1px solid #3d6430;
}
}
#media screen and (min-width: 768px) {
.nav-wrapper {
background-color: #fff repeat-x;
width: 100%;
overflow: hidden;
position: fixed;
z-index: 100;
}
#nav {
clear: both;
}
#logo {
float: left;
display: inline;
}
ul {
width:100%;
background-color: #fff;
height: 40px;
padding: 0;
display: inline;
}
li {
padding: 0 20px;
float: left;
list-style-type: none;
}
#menu {
display: none;
}
}
Okay, here is my answer. It's a little bit hackish but it should work...so, you can't confine it within the bounds of the wrapper, because it's limited to 960px. You'll need to declare something before the wrapper.
What I would do is make a small, white image that is 1px wide and however tall your nav is. Then, set the background color AND image in the body:
body{
background-image: url('white.jpg');
background-color: #cecece;
background-position: left top;
background-repeat: repeat-x;
}
There are downsides; you'd have to know the exact height of your nav, and if that changes you'd need to change the image's size as well. Let me know if that works--thank you for providing the image, it cleared up what you wanted.
Just set left:0; to the .nav-wrapper and remove repeat-x from background color:
.nav-wrapper {
background-color: #fff;
width: 100%;
overflow: hidden;
position: fixed;
left:0;
z-index: 100;
}
Here is a FIDDLE
If anyone came here in hopes to extend background colors outside of Bootstrap container, this is how I solved it.
Bootstrap's container will give you a centered column of content on the page. But what if you want to give color to JUST ONE of the margin areas outside of Bootstrap's container?
I solved it by wrapping the container, with a flexbox-container and building 3 distinct columns: left margin column, content column, and the right margin column.
To ensure that it's always centered, I used this bit to determine the width of each margin column:
.right-box, .left-box{
width: calc((100vw - 1170px) /2);
}
Here's a code pen.
Cant you just add a div before the wrapper?
Somthing like this:
|HTML|
<body>
<div class="backgroundColorContainer">
<div class="wrapper">
// code here
</div>
</div>
</body>
|CSS|
.backgroundColorContainer
{
background-color: #222222;
}
Worked for me :D