Extending Background Color Beyond Wrapper - html

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

Related

Responsive 2 Column Layout With Embedded Video

I have a two column section on a homepage, with a responsive video.
The goal is to get the text in absolute center on the left column, and have the video take up 100% of the right column but have it be responsive.
I have achieved this somewhat.... But the video height shrinks and eventually the right column is smaller then the left.
I still need to add media queries to fix the text at certain points, but I have no idea what to do with the video.
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
.group:after {
content:"";
display: table;
clear: both;
}
img {
max-width: 100%;
height: auto;
}
#media screen and (max-width: 480px) {
.left,
.right {
float: none;
width: auto;
}
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.financingBlock{
height: 100%;
min-height:100%;
position: relative;
}
.financingText{
padding:90px 0 0 104px;
}
.financingText p{
line-height: 30px;
font-size: 14px;
padding-right:70px;
}
.clearer {
clear: both;
}
<div class="financingBlock">
<div class="left">
<div class="financingText">
<p>SLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum luctus ex, at bibendum dolor feugiat vel. Mauris sit amet ante interdum, varius nibh vitae, condimentum nunc.</p>
<p>usce posuere tempus tempus. Sed nec nibh justo. Vestibulum nec eleifend libero, tempus elementum quam. Nulla a facilisis sem, vitae imperdiet diam. Pellentesque faucibus porta facilisis. Vestibulum quis augue a nunc euismod hendrerit. </p>
</div>
</div>
<div class="right">
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="600" src="https://www.youtube.com/embed/nDY8b68oLA0?rel=0&hd=1" frameborder="0" allowfullscreen> </iframe>
</div>
</div>
<div class="clearer"></div>
</div>
it seems you have given a static padding for each screen size
like:
.financingText{padding:90px 0 0 104px;}
instead use:
.financingText{padding:0;vertical-align:middle;text-align:center;margin:0auto;}

Fill screen with height

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;
}

How to fix a footer overlapping content?

I've looked around for similar issues here and in other places, but I can't seem to find a definitive answer. When I add enough text to a page that it would get to the footer, the footer simply overlaps the text. Same thing if I reduce the size of the browser window to force the footer and the container that holds the content to meet. Occasionally, this also manifests in the "container" aka the lighter gray part, shrinking for some reason, even though it should always be taking up 100% of the height.
This is the sort of stuff that keeps me up all night, so I'm not thinking very clearly. I'm sure it's something stupid and easy to fix, but I'm not a professional designer and am certainly missing what the issue is.
Below is my code, and a JSFiddle that I made with all the relevant parts of a page.
html, body {
margin: 0;
padding: 0;
}
html, body {
background: #252525;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
text-align: center;
}
body {
background: #363636;
border-left: 1px solid #111;
border-right: 1px solid #111;
margin: 0 22.5%;
}
#container {
color: white;
margin-bottom: 2em;
min-height: 100%;
overflow: auto;
padding: 0 2em;
text-align: justify;
}
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: fixed;
font-size: small;
width:100%;
}
<body>
<div id="container">
<h1>A webpage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.
<p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</div>
<div id="footer">This is a footer.</div>
</body>
Here is a JSFiddle example.
Change this:
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: relative; //changed to relative from fixed also works if position is not there
font-size: small;
width:100%;
}
Demo
Anyone stumbling upon this in 2017 should know that a great option was invented to alleviate layout headaches such as this, flexbox.
Essentially, all you have to do is set <body> to:
body {
display: flex;
flex-direction: column;
align-items: center;
}
Then apply flex:1 1 auto to the "main" or middle section, in this case #container, which will make it expand vertically to fill available space, assuring the footer will stick to the bottom:
#container {
flex: 1 1 auto; /*grow vertically*/
}
We added align-items:center in the flex parent to handle cross-axis centering (in our case, horizontal).
Here is an example snippet of the above:
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #252525;
border-left: 1px solid #111;
border-right: 1px solid #111;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
#container {
color: white;
background: #363636;
padding: 2em;
background: #363636;
flex: 1 1 auto;
/*grow vertically*/
width: 55%;
text-align: center;
}
#footer {
color: #707070;
height: 2em;
font-size: small;
}
<body>
<div id="container">
<h1>A webpage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius
nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p>
<p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat
libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p>
</div>
<div id="footer">This is a footer.</div>
</body>
See DEMO
I have made some CSS changes. Have a look. I hope it will help you.
Updated CSS
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: fixed; /* OldProperty */
position: static;/* Updated Property */
font-size: small;
width:100%;
}
I believe you were looking for a sticky footer that stays while not being fixed to the bottom of the page (so no overlap).
Solution
The solution comes from Chris Bracco and I am going to detail what you need to reproduce the effect:
HTML
Your HTML be like:
<html>
<body class="body-for-sticky">
<...> your content </...>
<div class="footer sticky-footer"> your footer </div>
</body>
</html>
CSS
You will need to add in your css something like:
html {
height: 100%; /* for the page to take full window height */
box-sizing: border-box; /* to have the footer displayed at the bottom of the page without scrolling */
}
*,
*:before,
*:after {
box-sizing: inherit; /* enable the "border-box effect" everywhere */
}
.body-for-sticky {
position: relative; /* for the footer to move with the page size */
min-height: 100%; /* for the footer to be at the bottom */
padding-bottom: 6rem; /* Space available between last element and bottom border of the page */
}
.sticky-footer {
position: absolute; /* for it to disappear under last body element */
bottom: 0; /* so the footer can stick to the bottom*/
}
Example
That's like the basic you need to create the sticky footer. Here is an example (with some more CSS for better rendering).
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.body-for-sticky {
position: relative;
min-height: 100%;
padding-bottom: 6rem;
}
.sticky-footer {
position: absolute;
bottom: 0;
}
/* for the rendering */
body {
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
right: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer</title>
<style> </style>
</head>
<body class="body-for-sticky">
<div class="demo">
<h1 style="margin-top: 0">CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
<p> Source <a href="https://chrisbracco.com/css-sticky-footer-effect" />Chris Bracco</a>.</p>
</div>
<div class="footer sticky-footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
</body>
</html>
Expand the snippet and watch the result full size to see how it works.
First write this code
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;
}
and now set media queries
#media only screen and (max-width: 767px){
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:static;
left:0;
bottom:0;
width:100%;
}
}
hope this will help you :)
#footer {
z-index: 1;
position: absolute;
right: 0;
bottom: 0;
left: -25%;
padding: 1rem;
background-color: black;
text-align: center;
height: 3em;
left: 0;
font-size: small;
width:100%;
}

Problems with CSS layout

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">

Z-index not working on img and div with p

I'm having a problem with with positioning elements on top of each other.
Here is my markup:
<div id="glownySlajder">
<ul>
<li>
<img src="inc/img/slajder_bg.jpg" alt="Slajd" class="slajd">
<div class="fr">
<img src="inc/img/strzalka_lewo.png" alt="strzalka_lewo">
<p class="fl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet consequat gravida. Nunc sed risus est, ac vestibulum nisl. Suspendisse sagittis velit a massa auctor accumsan. Aliquam hendrerit libero tellus, at molestie leo. Curabitur sodales </p>
<img src="inc/img/strzalka_prawo.png" alt="strzalka_prawo">
</div>
</li>
</ul>
</div>
Here is my css:
#glownySlajder {
margin-bottom: -2px;
}
#glownySlajder a {
margin: 7px;
}
#glownySlajder ul li img {
z-index: 9998;
}
#glownySlajder div {
z-index: 9999;
color: black;
background-color: #e7e7e7;
height: 85px;
width: 500px;
padding: 0px 5px;
}
#glownySlajder div p {
font-size: 11px;
line-height: 14px;
margin-top: 20px;
width: 390px;
}
.fr {
float: right;
}
.fl {
float: left;
}
This is what I get:
This is want I want to achieve:
The problem is that z-index doesn't seem to be working. When I try to do negative margin on a div with p, it just disappears under the image, not what I want exactly.
I am unable to work this out on my own, any tips please?
First of all, z-index only works on block elements (display:block). Second, it is only useful for elements which are in the same stacking context. Third, don't use margin to position. Use position: and top, left, right, bottom for this.
References:
CSS2.1: Stack level
CSS2.1: Positioning