Adjusting Height and Centering - html

I'm trying to replicate a header/nav (from www.mineplex.com) for my website, but I need some help. I'm trying, but it's not working. Your guys' help would be greatly appreciated. Here's the code I have so far.
body {
font-family: Helvetica;
margin: auto;
width: 100%;
}
#header {
background: #383838;
position: fixed;
top: 0;
width: 100%;
}
#container {
margin: 0 auto;
}
#logo {
color: white;
font-size: 15;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!-- IGNORE THIS! THIS IS FOR LiveReload -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<!-- IGNORE THIS! THIS IS FOR LiveReload -->
<div id="header">
<div id="container">
<div id="logo">
<h1>WEBSITE</h1>
</div>
</div>
</div>
</body>
</html>

Here is how to add the darker bar in your header. DEMO
HTML:
<div id="header">
<div id="container">
<div id="logo">
<h1>WEBSITE</h1>
</div>
</div>
<div class="header-bottom"></div>
</div>
CSS:
body {
font-family: Helvetica;
margin: auto;
width: 100%;
}
#header {
background: #383838;
position: fixed;
top: 0;
width: 100%;
}
#container {
margin: 0 auto;
}
#logo {
color: white;
font-size: 15;
text-align: center;
}
.header-bottom {
width:100%;
height:25px;
background:#1E2224;
box-shadow: 0px 5px 5px #888888;
}

Related

Why cant I see my navigation bar , everything is right

I can't see the navigation bar even tho everything is right
Nothing is missing and its really getting frustrating now and I don't know what to do can someone help me please
<html>
<head>
<link href="app.css" rel="stylesheet" />
</head>
<body>
<header>
<div id="topbar">
</div>
<nav id="main">
</nav>
</header>
</body>
</html>
body{
margin: 0;
}
header{
background: url('./images/bg.png') bottom center no-repeat;
background-size: cover;
height: 750px;
}
#topbar {
height: 70px;
}
nav#main {
height: 150px;
color: white;
border-radius: 4px;
}
The problem is in your nav#main you only applied color:white property so the nav is displayed and it is white in color . As also your background-color is not set so it is not visible .
So apply a background-color property . See below snippet
body {
margin: 0;
}
header {
background: url('./images/bg.png') bottom center no-repeat;
background-size: cover;
height: 750px;
}
#topbar {
height: 70px;
text-align: center;
}
nav#main {
color: white;
background-color: red;
display: block;
padding: 10px;
border-radius: 4px;
}
#main a {
padding: 10px;
display: inline-block;
cursor: pointer;
}
#main a:hover {
background-color: green;
}
<html>
<head>
<link href="app.css" rel="stylesheet" />
</head>
<body>
<header>
<div id="topbar">
Hello
</div>
<nav id="main">
<a>View</a>
<a>Help</a>
<a>Data</a>
</nav>
</header>
</body>
</html>

Why won't my footer move to the bottom of the page?

So I've been stuck on this issue for over a week now and it's driving me crazy. I want to position my footer at the bottom of my web page. For some reason, it just wants to float in the middle of the page, right underneath my last div. I've done a lot of research and tried a million different things, and none of them have given me the results that I need.
Here are a few of the solutions that I've tried:
I played around with the position property, setting it to 'absolute', 'relative' and 'fixed'. 'Relative' pushed the footer down, but also pushed the content underneath it down as well. 'Absolute' worked in positioning it at the very bottom, but for some reason it cut the width of the footer off. (I tried manually adjusting the width back, but no luck). Same thing with 'fixed'.
I set the margins and padding of the body and html content to 0.
I set the height of the body to 100%.
I checked to make sure all tags were closed.
I tried placing the footer outside of the body.
I've tried creating new divs before and around the footer.
At this point, I'm not sure what the issue is. Can someone assist me?
body {
background-color: white;
background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
background-size: cover;
max-height: 100%;
}
ul {
list-style-type: none;
font-family: "Lucida Console";
}
li {
font-size: 150%;
font-family: Abel;
display: inline;
width: 390px;
margin: 18px;
position: relative;
bottom: -21px;
}
div.well {
background-color: black;
height: 55px;
width: 1609px;
position: relative;
left: -17px;
top: -20px;
}
.container {
min-height: 100%;
}
div.main {
background-image: url();
text-align: center;
position: relative;
padding-top: 20px;
position: relative;
bottom: -40px;
min-height: 100%;
}
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 200px;
}
h1 {
text-align: center;
font-family: "Londrina Shadow";
font-size: 600%;
color: black;
letter-spacing: 0.2em;
}
h2 {
font-family: Chewy;
font-size: 300%;
color: black;
padding-bottom: 20px;
position: relative;
top: -60px;
}
li a:hover {
background-color: gainsboro;
color: black;
}
.links {
text-align: center;
letter-spacing: 15px;
}
.youtube {
position: relative;
bottom: -3px;
}
.dailymotion {
position: relative;
top: -1px;
}
/* html, body {
height: 100%;
padding: 0;
margin: 0;
} */
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>iHeartFandomz.net</title>
</head>
<body>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Londrina Shadow" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo Bhaijaan" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chewy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest Guy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "iheartfandomz.css"/>
<div class="container">
<div class="col-xs-6">
<div class="well">
<ul>
<li class="active">Home</li>
<li>Videos</li>
<li>Fanart</li>
</ul>
</div>
</div>
<div class="main">
<h1>iHeartFandomz</h1>
<h2>Fandoms Collection</h2>
</div>
<div class="links">
<img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;">
<img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;">
<img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;">
<img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;">
</div>
</div>
<footer class="footer">
<p>Here's the footer</p>
</footer>
</body>
</html>
In your css Change
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 200px;
}
to
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 0px;
}
Or you can try
.footer p {
padding-bottom: 0px !important;
}
You have a p element inside your footer that has padding-bottom: 200px;.
You will need to remove it or change the style of the p that inside a footer.
Try this. This will stick your footer at the bottom of the page. I also removed the padding of the paragraph inside of your footer.
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.footer p {
padding-bottom: 0;
}
Working fiddle : https://jsfiddle.net/zrbzf22v/
Change your html like that :
<footer class="footer">
<p style=" bottom: 0px;
padding-bottom: 0px; ">Here's the footer</p>
</footer>
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
position: absolute;
width: 100%;
bottom: 0;
}
p {
padding-bottom: 0px;
}
Check this Your footer at bottom
body {
background-color: white;
background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
background-size: cover;
max-height: 100%;
margin:0px;
width:100%;
}
ul {
list-style-type: none;
font-family: "Lucida Console";
}
li {
font-size: 150%;
font-family: Abel;
display: inline;
width: 390px;
margin: 18px;
position: relative;
bottom: -21px;
}
div.well {
background-color: black;
height: 55px;
width: 1609px;
position: relative;
left: -17px;
top: -20px;
}
.container {
min-height: 100%;
}
div.main {
background-image: url();
text-align: center;
position: relative;
padding-top: 20px;
position: relative;
bottom: -40px;
min-height: 100%;
}
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 0px;
}
h1 {
text-align: center;
font-family: "Londrina Shadow";
font-size: 600%;
color: black;
letter-spacing: 0.2em;
}
h2 {
font-family: Chewy;
font-size: 300%;
color: black;
padding-bottom: 20px;
position: relative;
top: -60px;
}
li a:hover {
background-color: gainsboro;
color: black;
}
.links {
text-align: center;
letter-spacing: 15px;
}
.youtube {
position: relative;
bottom: -3px;
}
.dailymotion {
position: relative;
top: -1px;
}
/* html, body {
height: 100%;
padding: 0;
margin: 0;
} */
.footer {
background-color: black;
height: 100px;
padding: 0;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>iHeartFandomz.net</title>
</head>
<body>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Londrina Shadow" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo Bhaijaan" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chewy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest Guy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "iheartfandomz.css"/>
<div class="container">
<div class="col-xs-6">
<div class="well">
<ul>
<li class="active">Home</li>
<li>Videos</li>
<li>Fanart</li>
</ul>
</div>
</div>
<div class="main">
<h1>iHeartFandomz</h1>
<h2>Fandoms Collection</h2>
</div>
<div class="links">
<img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;">
<img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;">
<img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;">
<img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;">
</div>
</div>
<footer class="footer">
<p>Here's the footer</p>
</footer>
</body>
</html>
I use this and i have tested it in your project. its working
footer{
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
text-align: center;
}

Not centered text in Bootstrap column

I constructed a 1-10-1-column header construction in Bootstrap. Now I want to center this ! in the 10-column. But as you can see by the dotted lines in the middle of the page ! is not centered in the exact middle. Why not? And how can I get it there?
And the height of the header depends on the font-size of the text in it. How can I set the height of the header manually by a command?
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div id="body-wrapper">
<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-md-1 text-center">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
<div class="col-md-1 text-center">
</div>
</ul>
</div>
</div>
</div>
<div class="jumbo"></div>
<div class="footer">
<div class="container">
<p>© Lorem ipsum.</p>
</div>
</div>
</div>
</body>
</html>
CSS:
html {}
body{
left: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
body:after {
content: "";
position: absolute;
z-index: -1;
top: 0px;
bottom: 0px;
left: 50%;
border-left: 1px dotted #333333;
}
.menu {
left: -185px;
height: 200%;
position: fixed;
width: 185px;
}
.menu ul {
border-top: 1px solid rgb(51,51,51);
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid rgb(51,51,51);
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: rgb(51,51,51);
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.header {
}
.header i {
font-size: 30px;
margin-top: 15px;
}
.header a{
color: rgb(250,250,250);
font-size: 40px;
text-align: center;
}
.header .col-md-10 {
background-color: rgb(51,51,51);
width: 85%;
margin-left:auto;
margin-right:auto;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 1000px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Raleway', sans-serif;
text-transform: normal;
font-size: 11px;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
JS:
$(document).ready(function() {
$(".icon-menu").click(function() {
$(".menu").animate({
left: "0px"
}, 600);
$(".icon-menu").toggle(1600);
$("body").animate({
left: "185px"
}, 600);
});
});
$(document).ready(function() {
$('.icon-close').click(function() {
$('.menu').animate({
left: "-185px"
}, 600);
$(".icon-menu").toggle(600);
$('body').animate({
left: "0px"
}, 600);
});
});
Codepen
Try this:
<div class="row col-md-12">
...
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
...
</div>
If you want change height of header try to set height for div, for example:
<div class="col-md-10 text-center" style="height:100px;">
<li><a>!</a></li>
</div>
Of course for good style, create a specific style at css with value of height and add to class of your div.
But as you can see by the dotted lines in the middle of the page ! is not centered in the exact middle. Why not? And how can I get it there?
It is invalid to have a list tag <li> in the middle of nowhere. Try using a <span> instead (or leave it out alltogether) and your ! will be centered.
<div class="col-md-10 text-center">
<a>!</a>
</div>
How can I set the height of the header manually by a command?
You can assign the height property. I also set a background-color, so you can see that the header actually grows.
.header {
height: 200px;
background-color: blue;
}
actuallay ! is already coming in center your dotted line giving on body after is not align center you need to use translated instead of left. for header to giving height you need to give header in navbar div that is bootstrap class.
here is demo...
$(document).ready(function() {
$(".icon-menu").click(function() {
$(".menu").animate({
left: "0px"
}, 600);
$(".icon-menu").toggle(1600);
$("body").animate({
left: "185px"
}, 600);
});
});
$(document).ready(function() {
$('.icon-close').click(function() {
$('.menu').animate({
left: "-185px"
}, 600);
$(".icon-menu").toggle(600);
$('body').animate({
left: "0px"
}, 600);
});
});
html {}
body{
left: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
body:after {
border-left: 1px dotted #333333;
bottom: 0;
content: "";
display: block;
left: 0;
margin: 0 auto 0 50%;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: -1;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.menu {
left: -185px;
height: 200%;
position: fixed;
width: 185px;
}
.menu ul {
border-top: 1px solid rgb(51,51,51);
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid rgb(51,51,51);
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: rgb(51,51,51);
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.header {
}
.header i {
font-size: 30px;
margin-top: 15px;
}
.header a{
color: rgb(250,250,250);
font-size: 40px;
text-align: center;
}
.header .col-md-10 {
background-color: rgb(51,51,51);
width: 85%;
margin-left:auto;
margin-right:auto;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 1000px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Raleway', sans-serif;
text-transform: normal;
font-size: 11px;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div id="body-wrapper">
<div class="navbar">
<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-fluid">
<div class="header ">
<div class="row">
<div class="col-md-1 text-center">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
<div class="col-md-1 text-center">
</div>
</ul>
</div>
</div>
</div></div>
<div class="jumbo"></div>
<div class="footer">
<div class="container">
<p>© Lorem ipsum.</p>
</div>
</div>
</div>
</body>
</html>

Hyperlink image link boundary

I have three social media images in a div at the bottom of the page. I have them placed center of the div but when i add the link to the image it pushes the other images away and the area around the image is linked as well.
On other sites I have not had this issues so I am not sure what is going on
Thanks
<head>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="assets/hover.css" rel="stylesheet" media="all">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NolanD</title>
</head>
<body>
<div id="nav">
<header>
<div class="logo">NolanD</div>
<div id="logo">
</div>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
</div>
<body>
<div class="rowone">
</div>
<div class="rowtwo">
<p>
</p>
</div>
<div class="rowthree">
</div>
</div>
<div class="rowfour">
</div>
<div class="rowfive">
</div>
<div class="rowsix">
<img src="assets/images/linkedin.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
<img src="assets/images/github-2.png " height="24 " width="24 " class="hvr-bounce-in " /></li>
</div>
</body>
And the CSS, where I think the issues is coming from.
html, body {
margin:0;
padding:0;
}
* {
margin: 0;
padding:0;
}
#nav {position:absolute;
width:100%;
height: 60px;
background:#F4F2F2 ;
text-align: right; left: 0; top: 0; }
#nav a { font-size:26px; padding: 3px; margin-right: 1rem; font-family: Roboto;
font-weight:100; }
#nav li { display: inline-block; }
#nav h1 { text-align: left; }
a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s; }
.logo {
float: left;
color: #1D7090;
font-size: 26px;
font-family: Roboto;
font-weight:100;
line-height: 31px;
display: inline-block;
margin-left: 1rem;
}
body {
background-color:#6A6262;
}
.rowone {
background-color:#7DB3BF;
width: 100%;
height: 600px; }
.rowtwo {
text-align: center;
font-size:72px;
color:#000000;
padding-top: 1rem;
background-color:#F9F2F2;
width: 100%;
height: 540px;
}
.rowthree {
background-color:#B34042;
width: 100%;
height: 500px;
}
.rowfour {
background-color:#FF5700;
width: 100%;
height: 500px;
}
.rowfive {
background-color:#DDD39B;
width: 100%;
height: 500px;
}
.rowsix{
background-color:#3E3E3E;
width: 100%;
height: 175px;
text-align:center;
}
.rowsix img { display: block;
padding-top: 5rem;
text-align:center;
display:inline-block;
margin:5px 15px;
}
#media all and (max-width:600px) {
.logo { display:none; }
#nav {text-align: center; }
}
Try remove padding attribute you added for link at line :
a { color:#1D7090; text-decoration: none; padding: 10rem; transition: .4s; }
Btw : please reformat your code. It's to bad :(

css / position main content div to right of login and register div

I am trying to create a page with a header, sticky footer, and three divs in between. Right now it looks like this:
Here is my html and css:
index.php
<!DOCTYPE html>
<html>
<head>
<title>ONE DAY ONLY</title>
<script src="reqscripts/jquery.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/application.css">
<link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<header>
<h1>ONE DAY ONLY</h1>
<p>THE BIZZ()</p>
</header>
<div id="login"></div>
<div id="register"></div>
<div id="main"><p>Content</p></div>
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
</html>
css/application.css
* {
margin: 0;
}
html, body {
background: rgba(179,180,255,1);
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
.footer {
background: rgba(22,138,43,1);
}
#loginform {
width: 240px;
height: 165px;
background: rgba(207,207,255, 1);
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
font-family: 'Londrina Solid', cursive;
}
#registerform {
width: 240px;
height: 200px;
background: rgba(207,207,255, 1);
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
padding-top: 0px;
padding-bottom: 0px;
font-family: 'Londrina Solid', cursive;
}
#loginuser, #loginpass, #reguser, #regpass, #regemail {
float: right;
}
#submitbutton, #registerbutton {
text-align: center;
}
.textaligncenter {
text-align: center;
}
header {
font-family: 'Londrina Solid', cursive;
background: rgba(179,180,255,1);
height: 90px;
}
#main {
background: rgba(207,207,255, 1);
}
I have tried adding float: right to the main div, and for some reason it floats it right, but into the footer div. I want the main div (with "Content") to be positioned nicely to the right of the login and register divs.
I used this for my sticky footer:
http://ryanfait.com/sticky-footer/
UPDATE
Per the suggestion below, the page now looks like this:
UPDATE
I got the div to be positioned where I want, but when I add a bunch of line breaks to extend the main div...it extends over the stickyfooter...which shouldnt happen...
Here is what I changed:
#main {
background: rgba(207,207,255, 1);
float: left;
}
#loginregcss {
float: left;
}
#content {
float: left;
}
Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>ONE DAY ONLY</title>
<script src="reqscripts/jquery.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/application.css">
<link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<header>
<h1>ONE DAY ONLY</h1>
<p>THE BIZZ()</p>
</header>
<div id="loginregcss">
<div id="login"></div>
<div id="register"></div>
</div>
<div id="content">
<div id="main"><p>Content</p></div>
</div>
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
</html>
Here is what it looks like:
Try this:
<body>
<div class="wrapper">
<div id="left">
<div id="login"></div>
<div id="register"></div>
</div>
<div id="main"><p>Content</p></div>
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
#left{
width: 250px;
float: left;
}
#main{
width: 700px;
margin-left: 50px;
float: left;
}
To get the footer always at the bottom:
.push{
clear: both;
}
Thanks for your help guys... I needed clear: both; for .footer and .push - as suggested here - http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
try this steps:
move both login and register to a div like this:
<div class="leftBar">
<div id="login"></div>
<div id="register"></div>
</div>
and add left float to class leftBar and main. add a little margin-right to this leftBar. A complete code is here:
<title>ONE DAY ONLY</title>
<body>
<div class="wrapper">
<header>
<h1>ONE DAY ONLY</h1>
<p>THE BIZZ()</p>
</header>
<div class="row">
<div class="leftBar">
<div id="login"></div>
<div id="register"></div>
</div>
<div id="main"><p>Content</p></div>
<div class="push"></div>
</div>
</div>
<div class="footer"></div>
and here the CSS:
* {
margin: 0;
}
html, body {
background: rgba(179,180,255,1);
height: 100%;
}
.wrapper {
min-height: 600px;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
.footer {
background: rgba(22,138,43,1);
width:100%;
}
.leftBar{
float:left ;
width:28%;
margin-right:10px;
}
#login {
width: 240px;
height: 165px;
background: rgba(207,207,255, 1);
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
font-family: 'Londrina Solid', cursive;
}
#register {
width: 240px;
height: 200px;
background: rgba(207,207,255, 1);
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
padding-top: 0px;
padding-bottom: 0px;
font-family: 'Londrina Solid', cursive;
}
#loginuser, #loginpass, #reguser, #regpass, #regemail {
float: right;
}
#submitbutton, #registerbutton {
text-align: center;
}
.textaligncenter {
text-align: center;
}
header {
font-family: 'Londrina Solid', cursive;
background: rgba(179,180,255,1);
height: 90px;
}
.row{
width:100%;
}
#main {
background: rgba(207,207,255, 1);
float:left;
width:60%;
min-height:300px;
}
SEE THIS LINK