For some reason my div Username is not appearing.
Im trying to create a website and i cant seem to figure out what is wrong with my code. If there is not something wrong with my code can it be netbeans? Thank you!
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#header{
z-index: -1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10%;
background-color: #002EE4;
border-radius: 3px;
}
#logo{
width: 80px;
height: 75px;
z-index: 1;
}
#loginpic{
position: absolute;
left: 700px;
top: 105px;
width: 215px;
height: 215px;
}
#name{
position: relative;
margin-left: 640px;
margin-top: 250px;
font-size: 18px;
}
#nm-input{
font-size: 18px;
position: relative;
margin-left: 700px;
margin-bottom: 500px;
bottom: 25px;
background-color: rgb(220,220,220);
}
#surname{
z-index: 1;
position: relative;
margin-left: 640px;
margin-top: 250px;
font-size: 18px;
}
#username{
}
</style>
</head>
<body>
<div id="header"></div>
<img id="logo" src="BrainNetwork.png"/>
<img id="loginpic" src="BrainNetwork.png"/>
<form>
<div id="name">Name:</div>
<input id="nm-input" type="text" name="Name"/>
<div>Username</div>
</form>
</body>
now it's working check it out
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#header{
z-index: -1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10%;
background-color: #002EE4;
border-radius: 3px;
}
#logo{
width: 80px;
height: 75px;
z-index: 1;
}
#loginpic{
position: absolute;
left: 700px;
top: 105px;
width: 215px;
height: 215px;
}
#name{
position: relative;
margin-left: 640px;
margin-top: 250px;
font-size: 18px;
}
#nm-input{
font-size: 18px;
position: relative;
margin-left: 700px;
margin-bottom: 500px;
bottom: 25px;
background-color: rgb(220,220,220);
}
#surname{
z-index: 1;
position: relative;
margin-left: 640px;
margin-top: 250px;
font-size: 18px;
}
#username {
min-width: 50%;
min-height: 50%;
background: red;
z-index: 10;
}
</style>
</head>
<body>
<div id="header"></div>
<img id="logo" src="BrainNetwork.png"/>
<img id="loginpic" src="BrainNetwork.png"/>
<form>
<div id="name">Name:</div>
<input id="nm-input" type="text" name="Name"/>
<div id="username">Username</div>
</form>
</body>
It is showing the Field, just try scrolling to the top right corner of your browser. And also modify your constraints.
Replace your css with.
#name{
position: r;
font-size: 18px;
}
#nm-input{
font-size: 18px;
position: relative;
bottom: 25px;
background-color: rgb(220,220,220);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#header {
z-index: -1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10%;
background-color: #002EE4;
border-radius: 3px;
}
#logo {
width: 80px;
height: 75px;
z-index: 1;
}
#loginpic {
position: absolute;
left: 700px;
top: 105px;
width: 215px;
height: 215px;
}
#name {
position: relative;
margin-left: 0px;
margin-top: 20px;
font-size: 18px;
}
#nm-input {
font-size: 18px;
position: relative;
margin-left: 50px;
margin-bottom: 50px;
bottom: 25px;
background-color: rgb(220, 220, 220);
}
#surname {
z-index: 1;
position: relative;
margin-left: 640px;
margin-top: 250px;
font-size: 18px;
}
#username {}
</style>
</head>
<body>
<div id="header"></div>
<img id="logo" src="BrainNetwork.png" />
<img id="loginpic" src="BrainNetwork.png" />
<form>
<div id="name">Name:</div>
<input id="nm-input" type="text" name="Name" />
<div>Username</div>
</form>
</body>
</html>
Your Code is working fine. I have just changed the margin-left and margin-top property's value.
I think you want to embed some form. Better use table tag for that.
You have margin-bottom: 500px; in #nm-input. Your username is 500px below, probably you just don't see it.
Related
This question already has answers here:
center div on screen no matter window size
(4 answers)
Closed 8 months ago.
I'm trying to make these boxes horizontally centered on the screen no matter what the area of the viewport is, but I just can't seem to do it. If anyone could help with this, I would appreciate it.
<div class = 'jobFields'>
<div class = 'field-1'></div>
<div class = 'field-2'></div>
<div class = 'field-3'></div>
<div class = 'field-4'></div>
<div class = 'field-5'></div>
<div class = 'field-6'></div>
<div class = 'field-7'></div>
<div class = 'field-8'></div>
<style>
.field-1 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 5%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-2 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 28.6%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-3 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 52.2%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-4 {
position: absolute;
width: 250px;
height: 150px;
top: 400px;
left: 75.8%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-5 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 5%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-6 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 28.6%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-7 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 52.2%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
.field-8 {
position: absolute;
width: 250px;
height: 150px;
top: 620px;
left: 75.8%;
box-shadow: 10px 10px;
background-color: #0f0f0f;
color: #5e00bc;
z-index: 2;
}
</style>
</div>
</div>
</body>
flex would do you just right
body, html {
height: 100%;
margin: 0;
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
div {
background-color: black;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 1 year ago.
I wanted to creat a background image blur I applied it and everything just blurred so here is the html and this is just fast re creation of the full project and if you didn't understand the class names talk to me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
</body>
</html>
Here's the css to help
font-size: 15pt;
width: 500px;
height: 500px;
background-image: url("bto.jpg");
filter: blur(8px)
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
Or you can apply it to a full size container as below, set the container size and position to absolute and then the rest of the content to relative and set the z-indexes.
body, html{
width: 100%;
height: 100%;
position: relative;
margin:0;
padding:0;
}
.bgImageContainer{
background-image:url('https://placeimg.com/1000/1000/people');
width:100%; height:100%;
-webkit-filter: blur(5px);z-index:0;
position:absolute;
background-position: center;
background-size:cover;
z-index:-10;
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="bgImageContainer">
</div>
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
You can't directly use blur filter in body. But you could apply the background image and filter to a pseudo element on the body. You can use below code to add blur effect in your background.
body {
margin:0;
padding:0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
}
body:before {
content: "";
position: absolute;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_GUUtZTKhhfKuCm9q5Ab77HQ8KiTFng3usA0MdgVmIXBC5tgHk3XiecscRsddpRi4SA&usqp=CAU);
background-size: cover;
height:100%;
z-index: -1000; /* Keep the background behind the all your content */ height: 20%; width: 20%;
/* don't forget to use the prefixes you need */
transform: scale(5);
transform-origin: top left;
filter: blur(1px);
}
.trbp{
width: 500px;
height: 40px;
border: black;
}
.trb{
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
}
.btp{
position: relative;
top: 120px;
left: 30px;
}
.bth{
position: relative;
top: 100px;
left: 30px;
}
.blb{
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
Using the code given in the question, and assuming it's the body that the background is required on, you can add a pseudo before element to the body and put the background on that and blur it.
That way only the image gets blurred, not everything else.
body {
font-size: 15pt;
width: 500px;
height: 500px;
}
body::before {
background-image: url("https://picsum.photos/id/1015/1024/768");
filter: blur(8px);
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
content: '';
z-index: -1;
}
.trbp {
width: 500px;
height: 40px;
border: black;
}
.trb {
position: relative;
left: 440px;
width: 60px;
background-color: cyan;
border-radius: 5px;
display: inline-block;
}
.btp {
position: relative;
top: 120px;
left: 30px;
}
.bth {
position: relative;
top: 100px;
left: 30px;
}
.blb {
position: relative;
top: 80px;
left: 60px;
border-radius: 4px;
background-color: #0731D2;
}
<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
<h2 class="btp">welcom to</h2>
<h2 class="bth">our site</h2>
<button class="blb">about us</button></div>
<script src="main.js"></script>
I have the following problem. When I try to position my button using
margin: 0 auto;
It sticks the button to the left. If I type any number eg.
margin: 0 100px;
it does work. I am curious what I am missing? I have
display: block;
width: 200px;
I would like to add that I need to position this button at the bottom of the container. 3% of the bottom edge of the screen and in the middle of the screen.
this is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
<div class="container">
<div class="group">
<div class="element">
</div>
</div>
button
</div>
</body>
</html>
and CSS
.container {
width: 1100px;
height: 100vh;
margin: 0 auto;
background-color: black;
position: relative;
}
.group {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(53, 20, 131);
position: absolute;
}
.element {
width: 100px;
height: 100px;
top: 0;
left: 0;
background-color: rgb(131, 20, 44);
position: absolute;
}
.btn {
display: block;
position: absolute;
bottom: 3%;
width: 200px;
height: 46px;
margin: 0 auto;
border: 1px solid #fff;
text-align: center;
text-transform: capitalize;
padding: 14px 0 0 0;
font-size: 1em;
font-weight: 100;
text-decoration: none;
color: rgb(119, 20, 20);
border-radius: 25px;
letter-spacing: 3px;
}
Thank you in advance
Robert
Its because of the position absolute
if you want to center it try adding this to your code:
.btn{
left: 50%;
transform: translateX(-50%);
}
The reason why your margin: auto; does not work is because your button has a position: absolute;
Of course you want to solve this without having to change the elements' position. With position: absolute; you can use the left and right properties:
left: 0; and right: 0; this will center an element with the position of absolute relative to (the width of) its parent that has a position of relative.
View the Code Snippet below in Full Page to have a better view.
.container {
width: 1100px;
height: 100vh;
margin: 0 auto;
background-color: black;
position: relative;
}
.group {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(53, 20, 131);
position: absolute;
}
.element {
width: 100px;
height: 100px;
top: 0;
left: 0;
background-color: rgb(131, 20, 44);
position: absolute;
}
.btn {
display: block;
position: absolute;
left: 0; /* added */
right: 0; /* added */
bottom: 3%;
width: 200px;
height: 46px;
margin: 0 auto;
border: 1px solid #fff;
text-align: center;
text-transform: capitalize;
padding: 14px 0 0 0;
font-size: 1em;
font-weight: 100;
text-decoration: none;
color: rgb(119, 20, 20);
border-radius: 25px;
letter-spacing: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
<div class="container">
<div class="group">
<div class="element">
</div>
</div>
button
</div>
</body>
</html>
As VXp already wrote in his comment: To horizontally center an absolutely positioned element inside its container, you need left: 50% (which moves its left border to the middle) and transform: translateX(-50%) (which moves the element back left by half of its own width) - see the snippet below, where those are the only changes to your given code. (and margin: 0 autowon't do anything in this case, since it's position: absolute)
.container {
width: 1100px;
height: 100vh;
margin: 0 auto;
background-color: black;
position: relative;
}
.group {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(53, 20, 131);
position: absolute;
}
.element {
width: 100px;
height: 100px;
top: 0;
left: 0;
background-color: rgb(131, 20, 44);
position: absolute;
}
.btn {
display: block;
position: absolute;
bottom: 3%;
width: 200px;
height: 46px;
left: 50%;
transform: translateX(-50%);
border: 1px solid #fff;
text-align: center;
text-transform: capitalize;
padding: 14px 0 0 0;
font-size: 1em;
font-weight: 100;
text-decoration: none;
color: rgb(119, 20, 20);
border-radius: 25px;
letter-spacing: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="css/test.css" />
</head>
<body>
<div class="container">
<div class="group">
<div class="element">
</div>
</div>
button
</div>
</body>
</html>
I am practicing html and css and want to make a website, but the text isn't scaling properly.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
</head>
<body>
<div id="huge"></div>
<div class="navbar">
<div id="navbar-background"></div>
<div id="home-div">
<p id="home-text">Home</p>
</div>
<div id="home-div-button"></div>
</div>
</body>
</html>
css:
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
background-size: cover;
}
html, body {
height: 100%;
}
#huge {
width: 85.8%;
height: 100%;
position: relative;
background-color: rgba(255, 103, 48, 0.5);
left: 7%;
}
.navbar div, .navbar div p {
position: fixed;
}
#navbar-background {
width: 77.5%;
height: 22.5%;
border-radius: 70px;
top: 2.5%;
left: 11%;
background-color: rgba(255,255,255, .2);
z-index: 1
}
#home-div {
background-color: rgb(249, 162, 100);
width: 19.5%;
height: 12%;
border-radius: 30px;
color: #FFFFFF;
position: fixed;
left: 12%;
top: 6%;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 20%;
height: 12%;
border-radius: 30px;
z-index: 1;
top: 8%;
left: 12.5%;
position: fixed;
}
#home-text {
font-size: 3.3em;
font-family: Comfortaa;
text-align: center;
line-height: 1.3em;
top: 2.3%;
left: 13%;
}
When I resize my browser everything scales except the text, which starts going out of the button that it is on top of.
I can't find an easy answer for this anywhere. All I need is a technique that I can repeat for other situations that will make the text scale with everything else.
body { background-image: url('http://wallpapercave.com/wp/adsKXLw.png'); background-repeat: no-repeat; background-size: cover; } html, body { height: 100%; } #huge { width: 85.8%; height: 100%; position: relative; background-color: rgba(255, 103, 48, 0.5); left: 7%; } .navbar div, .navbar div p { position: fixed; } #navbar-background { width: 77.5%; height: 22.5%; border-radius: 70px; top: 2.5%; left: 11%; background-color: rgba(255,255,255, .2); z-index: 1 } #home-div { background-color: rgb(249, 162, 100); width: 19.5%; height: 12%; border-radius: 30px; color: #FFFFFF; position: fixed; left: 12%; top: 6%; z-index: 2; border-top: 1px white solid; border-left: 1px solid white } #home-div-button { background-color: rgb(200, 131, 78); width: 20%; height: 12%; border-radius: 30px; z-index: 1; top: 8%; left: 12.5%; position: fixed; } #home-text { font-size: 3.3em; font-family: Comfortaa; text-align: center; line-height: 1.3em; top: 2.3%; left: 13%; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Website</title> <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> <link href="style.css" rel="stylesheet" text="text/css"> </head> <body> <div id="huge"></div> <div class="navbar"> <div id="navbar-background"></div> <div id="home-div"> <p id="home-text">Home</p> </div> <div id="home-div-button"></div> </div> </body> </html>
If you put the snippet to a full page, then the text will be in the right spot.
It seems I have a problem with my footer. My Content div won't push the footer down. It just go through it. I have been searching the net for days now (even stackoverflow), but I can't seem to find a solution. If anyone can help me, I would really appreciate it. I have tryed to clean up the html, so it would be easier to help me, however, If you like the original code, go to http://djstarkick.com/where-we-belong. (You will also see the problem with the footer.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>StarKick</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css">
</head>
<body>
<div class="background">
<div class="Container">
<div class="Header">
<div class="Slideshow">
<div class="TopLine"></div><!--TopLine-->
<div class="NewMusic">
<div class="NewMusicText"></div><!--NewMusicText-->
</div><!--NewMusic-->
<div class="WhereWeBelongPodcast">
<div class="WhereWeBelongPodcastText"></div><!--WhereWeBelongPodcastText-->
</div><!--WhereWeBelongPodcast-->
<div class="Meny">
</div>
</div><!-- Meny-->
</div><!--Slideshow-->
<div class="HeaderLine"></div><!--HeaderLine-->
<div class="Logo"></div><!--Logo-->
</div><!--Header-->
<div class="MainContent">
<div class="TwitterPost">
<div class="TwitterFeed">
</div><!--TwitterFeed-->
</div><!--TwitterPost-->
<div class="Content">
<div class="contentbackground">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<hi><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?> <!--Wordpress-->
</div><!--Contentbackground-->
</div><!--Contentline-->
</div><!--Content-->
</div><!--MainContent-->
<div class="Footer"></div><!--Footer-->
</div><!--Container-->
</div><!--Background-->
</body>
</html><!-- -->
CSS code:
/*
Theme Name: StarKick - Where We Belong
Theme URI: djstarkick.com
Author: Dani Møllerplass
Author URI: djstarkick.com
Description: My first theme on wordpress for my own use.
Version: 1.0
*/
#charset "utf-8";
body {
margin: 0;
padding: 0;
background-color:#000
}
.background {
height: 1080px;
width: 1920px;
background-image: url(Pictures/Background/background.png);
background-repeat: no-repeat;
position: relative;
top: 0px;
}
.Container {
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
top: 0px;
}
.Header {
height: 560px;
width: 980px;
position: relative;
}
.HeaderLine {
height: 45px;
width: 980px;
}
.Share {
height: 55px;
width: 265px;
position: absolute;
top: 5px;
left: 345.5px;
}
.Logo {
height: 182px;
width: 408px;
margin-right: auto;
margin-left: auto;
position: absolute;
bottom: 25px;
left: 291px;
}
.Meny {
height: 50px;
width: 545px;
position: absolute;
top: 150px;
left: 217.5px;
}
.MenyText {
height: 50px;
width: 545px;
position: absolute;
top: 7.5px;
}
.MainContent {
width: 980px;
position: relative;
height: auto;
}
.Content {
width: 625px;
height: auto;
left: 0px;
top: 0px;
float: left;
}
.Contentline {
height: 45px;
width: 625px;
top: 0px;
}
.contentbackground {
width: 625px;
background-repeat: repeat-y;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
left: 0px;
background-color: #000;
position: relative;
}
.Footer {
height: 150px;
width: 980px;
font-family: "high Tower Text";
color: #FFF;
text-align: center;
position: relative;
clear: both;
}
.TwitterPost {
height: 650px;
width: 325px;
right: 0px;
float: right;
}
.TwitterFeed {
height: 600px;
width: 323px;
position: absolute;
top: 29px;
right: 1px;
}
.Slideshow {
height: 450px;
width: 980px;
position: relative;
}
.NewMusic {
height: 53px;
width: 332px;
position: absolute;
left: 0px;
bottom: 0px;
}
.NewMusicText {
height: 53px;
width: 300px;
position: absolute;
left: -5px;
bottom: 3px;
}
.TopLine {
height: 397px;
width: 980px;
position: absolute;
top: 0px;
}
.WhereWeBelongPodcast {
height: 53px;
width: 332px;
position: absolute;
right: 0px;
bottom: 0px;
}
.WhereWeBelongPodcastText {
height: 53px;
width: 300px;
position: absolute;
right: -15px;
bottom: 0px;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
color: #FFF;
text-decoration: none;
}
a:hover {
color: #CCC;
text-decoration: none;
}
a:active {
color: #FFF;
text-decoration: none;
font-family: "high Tower Text";
text-align: center;
}
.background .Container .Header .Slideshow .Meny .MenyText table tr td {
color: #FFF;
font-family: "high Tower Text";
text-align: center;
}
.year {
font-size: 22px;
}
Thanks in advance! :)
Add a div right before your footer class that is inside of your MainContent div like so
EDIT: Also, remove the height from your ContentLine div
HTML
<div class="clearFloat"></div>
CSS
.clearFloat { clear: both;}
add float:left to every containter and add clear:left for the footer