Problema distanta footer fata de sidebar

[Jetix]

Salut, cum spune si titlul, am o ptoblema cu footer care nu pastreaza distanta fata de sidebar. La container isi mentine distanta de 10px, dar la sidebar nu merge. Am incercat sa pun diferite comenzi sa il blochez dar nu merge.

  Reveal hidden contents

 

 

CSS source

* {
	margin: 0px;
	padding: 0px;
	font-family: Arial;
}

body {
	position: relative;
	margin: 0px;
	font-family: Verdana, Georgia, serif;
	font-size: 14px;
	color: black;
	padding-bottom: 6rem;
}

input, textarea:focus {
	outline: none;
}

header {
	background-color: #f5f5f5;
	margin-bottom: 10px;
	height: 150px;
	box-shadow: 0 0 5px #1a1a1a;
}

header .logo {
	position: relative;
	margin: 25px;
	opacity: 0.8;
}

header .logo:hover {
	opacity: 1;
	transition: 0.3s;
}

header nav {
	margin: 50px;
	float: right;
	position: relative;
}

header nav ul a {
	text-decoration: none;
	list-style: none;
	color: white;
}

header nav ul li {
	margin-right: 2px;
	background: rgba(25, 25, 25, 0.7);
	float: left;
	display: block;
	padding: 15px;
	text-align: left;
	position: relative;
}

header nav ul li:hover {
	background: rgba(25, 25, 25, 0.9);
}

.sidebar {
	position: relative;
	float: right;
	width: 260px;
}

.sideright {
	display: block;
	background-color: #f5f5f5;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 20px;
	font-size: 105%;
	float: right;
	width: 260px;
	box-shadow: 0 0 5px #1a1a1a;
}

.sideright .side-search {
	text-align: center;
}

.sideright .input-side-search {
	margin-top: 10px;
	display: block;
	width: 100%;
	height: 30px;
	text-indent: 5px;
	background: #fff;
	border: none;
	border-bottom: 1px solid #000;
	box-shadow: 0 0 5px #1a1a1a;
}

.sideright .side-cat {
	padding: 5px;
}

.sideright .side-cat a {
	text-decoration: none;
	color: black;
}

.sideright .side-cat a:hover {
	color: #df9d19;
}

.content {
	overflow: hidden;
	position: relative;
	background-color: #f5f5f5;
	margin-left: 10px;
	margin-right: 320px;
	margin-top: 10px;
	margin-bottom: 15px;
	height: 100%;
	padding: 20px;
	font-size: 110%;
	box-shadow: 0 0 5px #1a1a1a;
}

footer {
	position: absolute;
	height: 100px;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #212121;
	box-shadow: 0 0 5px #1a1a1a;
}

footer p {
	padding-top: 10px;
	color: grey;
	text-align: center;
	font-size: 120%;
	font-style: italic;
}

footer a {
	text-decoration: none;
	color: #bf4d26;
	transition: 0.3s;
}

footer a:hover {
	text-decoration: underline;
	color: #df9d19;
	transition: 0.3s;
}

.last-mod {
	float: left;
	position: relative;
	display: block;
	width: 96%;
	padding: 2%;
}

.last-mod .last-title {
	width: 100%;
	height: 50px;
	margin-bottom: 10px;
}

.last-mod .last-title a {
	font-size: 150%;
	text-decoration: none;
	color: rgba(25, 25, 25, 0.7);
}

.last-mod .last-title a:hover {
	color: rgba(25, 25, 25, 0.9);
}

.last-mod .last-title h2 {
	padding: 8px;
}

.last-mod .last-content {
	padding: 1%;
	width: 98%;
	margin-bottom: 10px;
}

.last-mod .last-content img {
	width: 300px;
	height: 200px;
}
.last-mod .last-content img:hover {
	background: #fff;
	opacity: 0.7;
	transition: 0.3s;
}

.last-mod .last-content p {
	margin-left: 320px;
}

.last-mod .last-content button {
	margin-left: 320px;
	float: right;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 200px;
	height: 50px;
	background: rgba(25, 25, 25, 0.7);
	color: white;
	border: none;
}

.last-mod .last-content button:hover {
	background: rgba(25, 25, 25, 0.9);
	color: #df9d19;
	cursor: pointer;
}

.download-btn {
	margin-top: 50px;
	width: 300px;
	height: 50px;
	border: none;
	background: rgba(25, 25, 25, 0.7);
	color: white;
}

.download-btn:hover {
	background: rgba(25, 25, 25, 0.9);
	color: #df9d19;
	cursor: pointer;
}

.upload table tr th {
	float: left;
}

.upload table tr td input {
	margin: 5px;
	width: 200px;
	height: 30px;
	text-indent: 5px;
	border: none;
	border-bottom: 1px solid #212121;
}

.upload table tr td textarea {
	margin: 5px;
	width: 200px;
	min-width: 200px;
	max-width: 200px;
	height: 30px;
	min-height: 30px;
	text-indent: 5px;
	border: none;
	border-bottom: 1px solid #212121;
}

.upload table tr td .img-btn {
	border: none;
}

 

 

[+Sn!k3rs]

incearca sa scazi din footer la width:95% etc destea

[Jetix]

  On 11/12/2017 at 4:53 PM, Sn!k3rs said:

incearca sa scazi din footer la width:95% etc destea

Expand  

El este pe pozitie absolute si ar trebui sa fie jos fara a se ridica.

footer {
	position: absolute;
	height: 100px;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #212121;
	box-shadow: 0 0 5px #1a1a1a;
}

 

[Daizuke]

https://www.youtube.com/watch?v=qlCIXXhSX6Y

 E în engleză, dar sper să te ajute.