Can't get footer to stick at bottom of page - html

I've been trying for a couple of hours now, and looked at several topics about it on stackoverflow and elsewhere. But I can't seem to solve it..
body {
background-color: #1a3041;
background-image: radial-gradient(#757580, #1a3041);
background-repeat: no-repeat;
background-size: cover;
}
html {height:100%}
.header {
border-style:solid;
border-width: 2px;
border-color: #fa6800;
background-color: #717171;
font-family: open sans;
color: #c1c1c1;
padding:0px;
margin:5px;
margin-top:20px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
.header h1{
display:inline;
font-size:40px;
padding-left:10px;
}
#slogan {
display: inline-block;
font-size:20px;
font-style:italic;
float:center;
line-height: normal;
vertical-align: center;
padding-right:10px;
margin-top:0px;
}
#menu {
display: inline-block;
font-size:25px;
font-weight:bold;
float:right;
line-height: normal;
vertical-align: bottom;
margin-top:10px;
}
.main {
position:absolute;
background-color:#cdd1d5;
padding: 10px;
margin: 25px;
margin-top:30px;
margin-bottom: 10px;
top:70px;
min-height: calc(100% - 130px - 35px);
left:0;
right:0;
box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}
.footer {
position: absolute;
bottom:0px;
left:5px;
right:5px;
height:30px;
overflow:hidden;
border-style:solid;
border-bottom: none;
border-width: 2px;
border-color: #fa6800;
background-color:#333333;
padding-left:10px;
vertical-align:top;
font-size:12px;
font-family: open sans;
color: #c1c1c1;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
a:link{
text-decoration:none;
}
a:link.title, a:visited.title {
color:#c1c1c1;
}
a:link.menu, a:visited.menu, a:link.current, a:visited.current {
color:#c1c1c1;
text-decoration:none;
padding:10px;
}
a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
color:#c1c1c1;
text-decoration:none;
padding:10px;
padding-right:20px;
}
a:link:hover.menu{
background-color:#fa6800;
padding:10px;
}
a:link:hover.lastmenu{
background-color:#fa6800;
padding:10px;
padding-right:20px;
}
a:link.current{
background-color:#333333;
padding:10px;
}
a:link.lastcurrent{
background-color:#333333;
padding:10px;
padding-right:20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Airline Project | Home</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
</head>
<body>
<div class="header">
<h1><a class="title" href="home.html">The Airline Project</a></h1>
<span id="slogan">Let your dreams fly</span>
<span id="menu">
<a class="menu" href="Home.html">Home</a>
<a class="current" href="TheGame.html">The Game</a>
<a class="menu" href="TutandTips.html">Tutorials and Tips</a>
<a class="menu" href="FAQ.html">FAQ</a>
<a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
<a class="lastmenu" href="Aboutus.html">About Us</a>
</span>
</div>
<div class="main">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
</html>
So I have two problems:
-my footer doesn't stick to the bottom of the page
-my 'main' content div doesn't stop before the footer like it should if the window is made too small. (It just continues to the end of the page)
I have read a lot of things that should solve it, but it mostly doesn't work.
Setting the footer to relative for example, sticks it right under the menu. Setting the content to relative sticks it to the middle of the page...


Just remove Position absolute from the .menu and .footer class style. You will get the desired result. :)
body {
background-color: #1a3041;
background-image: radial-gradient(#757580, #1a3041);
background-repeat: no-repeat;
background-size: cover;
}
html {height:100%}
.header {
border-style:solid;
border-width: 2px;
border-color: #fa6800;
background-color: #717171;
font-family: open sans;
color: #c1c1c1;
padding:0px;
margin:5px;
margin-top:20px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
.header h1{
display:inline;
font-size:40px;
padding-left:10px;
}
#slogan {
display: inline-block;
font-size:20px;
font-style:italic;
float:center;
line-height: normal;
vertical-align: center;
padding-right:10px;
margin-top:0px;
}
#menu {
display: inline-block;
font-size:25px;
font-weight:bold;
float:right;
line-height: normal;
vertical-align: bottom;
margin-top:10px;
}
.main {
background-color:#cdd1d5;
padding: 10px;
margin: 25px;
margin-top:30px;
margin-bottom: 10px;
top:70px;
min-height: calc(100% - 130px - 35px);
left:0;
right:0;
box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}
.footer {
left:5px;
right:5px;
height:30px;
overflow:hidden;
border-style:solid;
border-bottom: none;
border-width: 2px;
border-color: #fa6800;
background-color:#333333;
padding-left:10px;
vertical-align:top;
font-size:12px;
font-family: open sans;
color: #c1c1c1;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
a:link{
text-decoration:none;
}
a:link.title, a:visited.title {
color:#c1c1c1;
}
a:link.menu, a:visited.menu, a:link.current, a:visited.current {
color:#c1c1c1;
text-decoration:none;
padding:10px;
}
a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
color:#c1c1c1;
text-decoration:none;
padding:10px;
padding-right:20px;
}
a:link:hover.menu{
background-color:#fa6800;
padding:10px;
}
a:link:hover.lastmenu{
background-color:#fa6800;
padding:10px;
padding-right:20px;
}
a:link.current{
background-color:#333333;
padding:10px;
}
a:link.lastcurrent{
background-color:#333333;
padding:10px;
padding-right:20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Airline Project | Home</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
</head>
<body>
<div class="header">
<h1><a class="title" href="home.html">The Airline Project</a></h1>
<span id="slogan">Let your dreams fly</span>
<span id="menu">
<a class="menu" href="Home.html">Home</a>
<a class="current" href="TheGame.html">The Game</a>
<a class="menu" href="TutandTips.html">Tutorials and Tips</a>
<a class="menu" href="FAQ.html">FAQ</a>
<a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
<a class="lastmenu" href="Aboutus.html">About Us</a>
</span>
</div>
<div class="main">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
</html>


Under .footer in the css, change position: absolute to position: fixed.
Example: https://jsfiddle.net/6adfc7bs/


In order to achieve this you need to change your html.
You need to place the footer inside of your last div see below.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Airline Project | Home</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
</head>
<body>
<div class="header">
<h1><a class="title" href="home.html">The Airline Project</a></h1>
<span id="slogan">Let your dreams fly</span>
<span id="menu">
<a class="menu" href="Home.html">Home</a>
<a class="current" href="TheGame.html">The Game</a>
<a class="menu" href="TutandTips.html">Tutorials and Tips</a>
<a class="menu" href="FAQ.html">FAQ</a>
<a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
<a class="lastmenu" href="Aboutus.html">About Us</a>
</span>
</div>
<div class="main">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<div class="footer">
<p>footer</p>
</div>
</div>
</body>
However this still does not work 100% as the formatting needs to be changed.
I would recommend looking at a bootstrap.
It will make it easier for these types of layouts along with it being already mobile optimized.
Hope this helps


You can set your footer sticky using postion property by adding sticky value in your css.
body {
background-color: #1a3041;
background-image: radial-gradient(#757580, #1a3041);
background-repeat: no-repeat;
background-size: cover;
}
html {height:100%}
.header {
border-style:solid;
border-width: 2px;
border-color: #fa6800;
background-color: #717171;
font-family: open sans;
color: #c1c1c1;
padding:0px;
margin:5px;
margin-top:20px;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
.header h1{
display:inline;
font-size:40px;
padding-left:10px;
}
#slogan {
display: inline-block;
font-size:20px;
font-style:italic;
float:center;
line-height: normal;
vertical-align: center;
padding-right:10px;
margin-top:0px;
}
#menu {
display: inline-block;
font-size:25px;
font-weight:bold;
float:right;
line-height: normal;
vertical-align: bottom;
margin-top:10px;
}
.main {
background-color:#cdd1d5;
padding: 10px;
margin: 25px;
margin-top:30px;
margin-bottom: 10px;
top:70px;
min-height: calc(100% - 130px - 35px);
left:0;
right:0;
box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}
.footer {
left:5px;
right:5px;
height:30px;
overflow:hidden;
border-style:solid;
border-bottom: none;
border-width: 2px;
border-color: #fa6800;
background-color:#333333;
padding-left:10px;
vertical-align:top;
font-size:12px;
font-family: open sans;
color: #c1c1c1;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
position: sticky;
bottom: 0;
}
a:link{
text-decoration:none;
}
a:link.title, a:visited.title {
color:#c1c1c1;
}
a:link.menu, a:visited.menu, a:link.current, a:visited.current {
color:#c1c1c1;
text-decoration:none;
padding:10px;
}
a:link.lastmenu, a:visited.lastmenu, a:link.lastcurrent, a:visited.lastcurrent {
color:#c1c1c1;
text-decoration:none;
padding:10px;
padding-right:20px;
}
a:link:hover.menu{
background-color:#fa6800;
padding:10px;
}
a:link:hover.lastmenu{
background-color:#fa6800;
padding:10px;
padding-right:20px;
}
a:link.current{
background-color:#333333;
padding:10px;
}
a:link.lastcurrent{
background-color:#333333;
padding:10px;
padding-right:20px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Airline Project | Home</title>
<link rel="stylesheet" type="text/css" media="screen and (max-width:1250px)" href="mainverysmall.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1500px) and (min-width:1250px)" href="mainsmall.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width:1500px)" href="main.css">
</head>
<body>
<div class="header">
<h1><a class="title" href="home.html">The Airline Project</a></h1>
<span id="slogan">Let your dreams fly</span>
<span id="menu">
<a class="menu" href="Home.html">Home</a>
<a class="current" href="TheGame.html">The Game</a>
<a class="menu" href="TutandTips.html">Tutorials and Tips</a>
<a class="menu" href="FAQ.html">FAQ</a>
<a class="menu" href="http://theairlineproject.net/forum/" target="_blank">Forum</a>
<a class="lastmenu" href="Aboutus.html">About Us</a>
</span>
</div>
<div class="main">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
</html>

Related

When I add text to a horizontal scroll it pushes its parent div down

I'm trying to figure out why when I insert text into one of the divs in the horizontally scrolling div it causes the text's parent div to push downward.
Any ideas?
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
height: 800px;
width:100%;
overflow:auto;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer>
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>

.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
position: relative;
}
.pjct-skinny div {
position: absolute;
}
Demo
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
height: 800px;
width:100%;
overflow:auto;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
position: relative;
}
.pjct-skinny div {
position: absolute;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer>
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>

Does this satisfy your requirements?
#import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
//custom code by naren
body{
overflow:hidden;
}
footer{
height: 50px;
bottom: 0px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.project_container {
border: purple 4px solid;
height: auto;
width: auto;
overflow: auto;
white-space: nowrap;
position: absolute;
overflow-x: hidden;
top: 50px;
bottom: 50px;
left: 0px;
right: 0px;
}
header{
position: absolute !important;
top: 0px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
//custom code by naren
a {
color:white;
text-decoration:none;
font-family:'Hind';
}
#bold_avenir {
font-family:'Hind';
font-weight:bold;
}
#head_link{
text-transform:uppercase;
}
body{
background-image: url('http://via.placeholder.com/300');
background-size:cover;
}
.project_container{
border:purple 4px solid;
white-space: nowrap;
}
.pjct-fat{
display:inline-block;
width:800px;
height:96%;
}
.pjct-skinny{
display:inline-block;
width:450px;
height:96%;
}
#project_1{
border:red 4px solid;
}
#project_1 p{
display:block;
border:red 4px solid;
}
#project_2{
border:yellow 4px solid;
}
#project_3{
border:green 4px solid;
}
#project_4{
border:blue 4px solid;
}
<html>
<head>
<meta charset="utf-8">
<title>Paul Taylor Creates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav><span id="bold_avenir">Paul Taylor</span> Creative Design
</nav>
</header>
<div class="project_container">
<div class="pjct-skinny" id="project_1">
<div>First Project</div>
</div>
<div class="pjct-fat" id="project_2">
</div>
<div class="pjct-fat" id="project_3">
</div>
<div class="pjct-skinny" id="project_4">
</div>
</div>
<footer class="footer">
<span id="bold_avenir" >Resume:</span> LinkedIn
<span id="bold_avenir">Contact:</span> paultaylorcreates#gmail.com
</footer>
</body>
</html>
Also find below the JSFiddle:
https://jsfiddle.net/Kai_Draord/kz4uap1t/

How to Center a span in between two floating spans and the container is fixed?

I'm working on header section where there are 3 spans, one floating to the left, one floating to the right and the other span in the middle. The middle span is not getting horizontally aligned no matter what.
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
}
#position{
float: right;
margin-right: 10px;
/*width: 20px;*/
/*margin-top: -75px;*/
}
#logo{
float: left;
height: inherit;
}
#logo:hover{
cursor: pointer;
}
#name{
border: 1px solid black;
position: absolute;
margin: 0px auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<a href="https://www.google.com" target="_blank">
<img src="abc.png" id="logo">
</a>
<span id="position"> Developer Developer </span>
<span id="name">SKSV</span>
</div>
</body>
</html>

Here is a simpler solution. Wrap them in a parent div and make the width equal. Take a look at the following:
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
font-size:0;
}
.header-col
{
display:inline-block;
width:33.3333333334%;
vertical-align:middle;
font-size:13px;
}
#position{
display:block;
text-align:right;
}
#logo{
display:block;
text-align:left;
}
#name{
border: 1px solid black;
display:block;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<div class="header-col">
<a href="https://www.google.com" target="_blank" id="logo">
<img src="abc.png">
</a>
</div>
<div class="header-col">
<span id="name">SKSV</span>
</div>
<div class="header-col">
<span id="position"> Developer Developer </span>
</div>
</div>
</body>
</html>

I would use left: 50%. Here. I this what you wanted:
body{
font-family: Myriad Set Pro;
margin: 0;
}
/* ===================== Header Section =============================*/
#header{
width: 100%;
position: fixed;
height: 75px;
line-height: 75px;
box-shadow: 5px 5px 5px #edeff2;
text-align: center;
}
#position{
float: right;
margin-right: 10px;
/*width: 20px;*/
/*margin-top: -75px;*/
}
#logo{
float: left;
height: inherit;
}
#logo:hover{
cursor: pointer;
}
#name{
border: 1px solid black;
position: absolute;
margin: 0px auto;
left: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dash Html</title>
<link rel="stylesheet" type="text/css" href="dash.css">
</head>
<body>
<div id="header">
<a href="https://www.google.com" target="_blank">
<img src="abc.png" id="logo">
</a>
<span id="position"> Developer Developer </span>
<span id="name">SKSV</span>
</div>
</body>
</html>

Display a full image in css

I was working on a project last three months and I stopped for something else, now Im back to continue and Im facing a problem.
Before I start explain my problem, I would invite you to run this snippet so that you will understand more my problem:
/***************Style.css**************/
/* Circular Content Carousel Style */
.ca-container{
position:relative;
margin:25px auto 20px auto;
width:1200px;
height:700px;
}
.ca-wrapper{
width: 1200px;
height:100%;
position:relative;
}
.ca-item{
position:relative;
float:left;
width:330px;
height:100%;
text-align:center;
}
.ca-item-main{
position:absolute;
right:80px;
bottom:5px;
background:#fff;
overflow:hidden;
width: 325px;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
width:25px;
height:38px;
background:transparent url(https://photos-2.dropbox.com/t/2/AADIMMteRhEB2NiHzX_Z0MquXnxppt4ivpdmarz52rDyOQ/12/226666032/png/32x32/1/_/1/2/arrows.png/EO2pmKoBGH0gAigC/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY?size=1024x768&size_mode=3) no-repeat top left;
position:absolute;
top:50%;
margin-top:-19px;
left:-40px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
z-index:100;
}
.ca-nav span.ca-nav-next{
background-position:top right;
left:auto;
right:-40px;
}
.ca-nav span:hover{
opacity:1.0;
}
/**********Demo.cs*****************/
#import url('reset.css');
/* General Demo Style */
body{
background:#e4ebe9 url(../images/pattern.png) repeat top left;
color:#000;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
.clr{
clear:both;
}
h1, h5{
margin:15px;
font-size:44px;
color:#000;
font-family: 'Rochester', sans-serif;
text-shadow:1px 1px 1px #fff;
text-align:center;
}
h1 span, h5{
font-size:20px;
display:block;
color:#60817a;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Circular Content Carousel with jQuery" />
<meta name="keywords" content="jquery, conent slider, content carousel, circular, expanding, sliding, css3" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
$('#ca-container').contentcarousel();
</script>
</body>
</html>
After running the snippet, you will see three blocs, the image in each bloc has a size of 380x650. I would like to display the entire image in the bloc but Im unable, Whenever I try, the size of the image which will be displayed is 375x650, instead of 380x650.
I have been playing around with the value but no amelioration.
Please let me know how to fix this problem.
Sorry for the english, Im not a native english speaker, Im trying my best

It's now with width: 380px; and looks ok.
/***************Style.css**************/
.ca-item-main .wrapper img {
width: 100%;
}
/* Circular Content Carousel Style */
.ca-container{
position:relative;
margin:25px auto 20px auto;
width:1200px;
height:700px;
}
.ca-wrapper{
width: 1200px;
height:100%;
position:relative;
}
.ca-item{
position:relative;
float:left;
width:380px;
height:100%;
text-align:center;
margin: 0 5px 0 5px;
}
.ca-item-main{
position:absolute;
right:80px;
bottom:5px;
background:#fff;
overflow:hidden;
width: 380px;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
width:25px;
height:38px;
background:transparent url(https://photos-2.dropbox.com/t/2/AADIMMteRhEB2NiHzX_Z0MquXnxppt4ivpdmarz52rDyOQ/12/226666032/png/32x32/1/_/1/2/arrows.png/EO2pmKoBGH0gAigC/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY?size=1024x768&size_mode=3) no-repeat top left;
position:absolute;
top:50%;
margin-top:-19px;
left:-40px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
z-index:100;
}
.ca-nav span.ca-nav-next{
background-position:top right;
left:auto;
right:-40px;
}
.ca-nav span:hover{
opacity:1.0;
}
/**********Demo.cs*****************/
#import url('reset.css');
/* General Demo Style */
body{
background:#e4ebe9 url(../images/pattern.png) repeat top left;
color:#000;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
.clr{
clear:both;
}
h1, h5{
margin:15px;
font-size:44px;
color:#000;
font-family: 'Rochester', sans-serif;
text-shadow:1px 1px 1px #fff;
text-align:center;
}
h1 span, h5{
font-size:20px;
display:block;
color:#60817a;
}
<div class="container">
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How to get two horizontal bars to butt up against each other

Am working on making a copy of the BBC site and want to make two horizontal bars (part of the header) butt up against each other. Right now, there is a space between the two which I want to remove.
Here is the image I am getting:
Here is the HTML and CSS:
<!doctype html>
<html>
<head>
<title>BBC_Copy</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family: arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #770000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
padding:2px 80px 12px 20px;
font-size: 0.9em;
float:left;
border-right:1px solid #770000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style: none;
font-wieght:bold;
font-size:0.9em;
border-right:1px solid #770000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
float:left;
padding:5px 0 0 10px;
}
#searchdiv input {
height:25px;
border:none;
font-size:0.9em;
padding-left: 10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position:center right;
}
.break {
clear:both;
}
#newsbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc_logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break">
</div>
<div id="newsbar">
</div>
</div>
</body>
</html>

Your problem is in:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
The <p> tags are adding extra margin on top and bottom. I would recommend getting rid of the p tags... they don't add any semantic advantage.

Replace this:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
with this:
<div id="signindiv">
<img src="images/signin.png" />Sign In
</div>
Result: http://jsfiddle.net/ru7zzc1w/1/

Boxes are touching

hi guys i am creating a website for one of my projects for college and i need some help as i have no idea of how i have done this haha. Basically i have two of the boxes are touching where i want a small gap in between them. Any help is appreciated.
Cheers in advance here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style_sheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="top">
<div class="logo"> </div>
</div>
<div id="menu">
<div class="button"> Home </div>
<div class="button"> Destinations </div>
<div class="button"> Make A Booking </div>
<div class="button"> Things To Do </div>
<div class="button"> Contact Us </div>
</div>
<div id="box">
content here
</div>
<div id="deal_one">
</div>
</body>
</html>
CSS
#wrapper
{
width: 80%;
position:relative;
margin: 0 auto;
}
#top
{
width:100% ;
height:200px;
background-color:rgba(0, 95, 160, 1);
border:solid 2px black;
position:relative;
}
#menu {
width: 100%;
height: 150px;
background-color: #fff;
border: solid 2px black;
text-align:center;
position: relative;
display: inline-block;
}
#box {
width:100% ;
min-height:500px;
background-color:rgba(0, 95, 160, 1);
margin-top:0;
border:solid 2px black;
position:relative;
}
.button {
font-family:Verdana, Geneva, sans-serif;
font-size:15pt;
display:inline-block;
margin: 0 auto;
margin-left:5%;
margin-right:5%;
margin-top:4.5%;
}
.logo {
position:relative;
background-image:url(../Images/Logo%203.png);
background-size:650px;
width:500px;
height:900px;
top:-30%;
display:inline-block;
z-index:500;
margin: 0 auto;
background-repeat:no-repeat;
margin-left:-10%;
}
#deal_one {
width:350px;
height:300px;
background-color:rgba(0, 95, 160, 1);
border: solid 2px black;
position:relative;
}

Margin is the space outside of an element. You probably want to set that. You may also want to look into the box model: