I'm currently trying to get a logo to appear side by side with my header, I can target the logo background just fine however when I try to change the header color it doesn't allow me to. I have tried changing the float to left right and center, center is the best to me personally. Any idea as to why I can change the header color? I posted the code below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<div class="header">
<img src="logo.png" alt="logo"/>
</div>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0.3em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: center;
background: #ffffff;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
U can't use float for center. If u wanna side-by-side sorting, u use float. But u must use align or text-align for placement to center. Add this code:
.header{
text-align: center;
}
If you want add another logo or text and you want they don't see this you can use div and use this code:
.logo{
width: 250px;
height: 80px;
text-align: center;
background: #ffffff;
}
</style>
</head>
<body>
<div class="logo">
<img src="logo.png"/>
</div>
Here is what I had to do to get the proper results. Both #freginold and #edomingo1 helped resolve the issue. I had to move the div and img to the body from the head, then had to add a id="header" as well to my div which allowed me to make the proper change. Thanks for all the feedback appreciate it :)!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0em;
margin: 0em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: top;
background: #000000;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
</head>
<body>
<div class="header" id="header">
<img src="logo.png" alt="logo"/>
</div>
What are you trying to get the colour on its in its own braces, look at the braces around colour.
You are using a class selector in your HTML markup, but an ID selector in your CSS. Try replacing div class="header" with div id="header" to see the expected results.
You've included your div and img in the head of the document, rather than the body. See the example below. I moved your header into the body, and changed the color to yellow just to show that it can be targeted. (Obviously, the image doesn't load here.)
.header {
color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
body {
min-width: 630px;
}
#container {
padding-left: 200px;
padding-right: 190px;
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px;
width: 100%;
}
#left {
width: 180px;
padding: 0 10px;
right: 240px;
margin-left: -100%;
}
#right {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
#footer {
clear: both;
}
* html #left {
left: 150px;
}
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 1001em;
margin-bottom: -1000em;
}
* html body {
overflow: hidden;
}
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff;
}
body {
margin: 0;
padding: 0;
font-family:Sans-serif;
line-height: 2.24em;
}
p {
color: #000000
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: white;
text-decoration: none;
}
#header {
font-size: large;
padding: 0.3em;
background: #000000;
}
#footer {
font-size: large;
padding: 0.3em;
background: #e4e2e2;
}
#left {
background: #d3d2d2;
}
#right {
background: #d3d2d2;
}
#center {
background: #e4e2e2;
}
#container .column {
padding-top: 1em;
}
.header img {
width: 250px;
height: 80px;
float: center;
background: #ffffff;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
</style>
</head>
<body>
<div class="header">
<img src="logo.png" alt="logo"/>
</div>
</body>
</html>
Related
I have the next CSS for my header:
html, body {
margin: 0px;
width: 100%;
height: 100%;
}
.fullwidth {
width: 100%;
}
.fullheight {
height: 100%;
}
.navbar {
width: 100%;
height: 84px;
background: #4F46C8 url("../img/logo.png") no-repeat;
}
.sidebar-container {
float: left;
width: 250px;
}
.sidebar {
color: white;
background-color: #0091a8;
width: 100%;
height: 100%;
position: relative;
overflow-y: scroll;
padding: 20px 16px 16px 16px;
}
.sidebar ul {
list-style: none;
}
.sidebar li::before {
content: "- ";
}
.content {
width: auto;
margin-left: 280px;
}
.content iframe {
width: 100%;
height: 100%;
position: relative;
display: block;
border: none;
}
.page {
padding: 20px 16px 16px 16px;
}
.page h2 {
color: #0091a8;
}
.row {
width: 100%;
height: 100%;
clear: both;
box-sizing: border-box;
}
.sidebar a {
color: white;
}
.text-centered {
text-align: center;
}
The color #2874c2 is a color from that picture that was taken in Gimp 2. And in the image viewer the picture looks lighter than in browser. I checked a color in the browser it's #4F46C8.
My html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FSS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="application/javascript" src="js/app.js" async></script>
</head>
<body>
<div class="navbar">
</div>
</body>
</html>
What can be wrong?
P.S. The picture isn't transparent.
I have this list:
How can I make the list be in line with the top bar, ie. the total width of the list will be 960px just like the top bar?
I don't understand why it isn't working. The size of each of the squares is 159px + 1px for margin, and yet they make a profit from the right that I didn't define.
body {
margin: 0 auto;
}
#container {
width: 960px;
margin: 0 auto;
}
#logo_bg {
width: 65px;
height: 60px;
background-color: #146ca6;
font-size: 42px;
font-family: "Bahnschrift";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
border-bottom: 5px solid #363427;
}
header {
width: 100%;
height: 60px;
background-color: #2980b9;
border-bottom: 5px solid #363427;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 159px;
height: 100px;
}
#games {
float: left;
text-align: left;
}
#media screen and (max-width:959px) {
#container {
width: 100%;
}
#logo_bg {
font-size: 35px;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 100%;
height: 100px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2TheGames</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header>
<div id="logo_bg">2Tg</div>
</header>
<article id="games">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li><a>6</a></li>
</ul>
</article>
</div>
</body>
</html>
Try this
body {
margin: 0 auto;
}
#container {
width: 960px;
margin: 0 auto;
}
#logo_bg {
width: 65px;
height: 60px;
background-color: #146ca6;
font-size: 42px;
font-family: "Bahnschrift";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
border-bottom: 5px solid #363427;
}
header {
width: 100%;
height: 60px;
background-color: #2980b9;
border-bottom: 5px solid #363427;
}
ul {
list-style: none;
text-align: left;
margin-left: 0;
padding-left: 0;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 159px;
height: 100px;
}
#games {
float: left;
text-align: left;
}
#media screen and (max-width:959px) {
#container {
width: 100%;
}
#logo_bg {
font-size: 35px;
}
ul {
list-style: none;
text-align: left;
}
li {
float: left;
margin: 1px;
background-color: red;
width: 100%;
height: 100px;
}
}
I've tried everything and can't seem to get the footer to stick to the bottom.
I've been moving things around, might have messed up the codes a bit.
I'm fine with how it is on longer (more content) pages. But it's giving me to much white space on pages with less content.
Help would be appreciated!
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
</footer>
</body>
</html>
You have no text between the footer tags that is why you do not see the footer and if you add background color it will be much more clear.
For example you should add class="site-footer" to the html footer tag.
<footer class="site-footer">
The Footer.
</footer>
And the class definitions in the CSS file:
.site-footer{
height: 120px;
background: red;
}
You can also use the link for reference.
I'm using this for footer and its working perfect with me :
html,body,ul,a,li{
margin:0;
padding:0;
border:0;
outline:none;
vertical-align:top;
height:100%;
text-decoration:none;
}
.wrap{width:100%;
min-height:100%;
height: auto !important;
height:100%;margin:0 auto;
display:block;
background:lightblue;}
footer{
bottom:0px;
display:block;
width:100%;
height:auto;}
#fo-wrap{width:100%;
height:100px;
background-color:#FF2E99;}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='wrap'>
here every thing in page
</div>
<footer>
<div id='fo-wrap'>
here footer content
</div>
</footer>
</body>
</html>
Add a min-height for .content relative to the viewport.
Decremented 110px from it (padding-bottom: 50px; margin-top: 10px; footer height: 50px)
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ccc;
}
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
.container {
min-height: calc(100vh - 110px)
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
width: 100%;
background-color: #ccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
My footer
</footer>
</body>
</html>
On a webpage I am designing, the stylesheet contains an a:hover selector, which I'm using to give some links a different color when the cursor hovers over them. Not only does the color not change when I hover over them, in the "rules" tab of Firefox's inspect element window, the a:hover selector does not appear. Here's a snippet for reference. The links in question are displayed after clicking on the small image thumbnail at the top of the page.
function main() {
$('#arrow').click(function(){
$('#dropdown').animate({
top: '200px'
}, 400);
$('#menu').animate({
top: '75px'
}, 400);
$('#slide-wrapper').animate({
marginTop: '250px'
}, 400);
$(this).attr('src','uparrow.jpg');
$(this).off();
$(this).click(function(){
$('.hidden').animate({
top: '-=250'
}, 400);
$('#slide-wrapper').animate({
marginTop: '0px'
}, 400);
$(this).attr('src','downarrow.jpg');
$(this).off();
main();
});
});
}
$(document).ready(main);
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
background-image: url("background.jpeg");
background-attachment: fixed;
}
/* Menu elements */
.hidden {
z-index: -5;
top: -50px;
position: absolute;
}
#arrow {
margin-left: auto;
margin-right: auto;
height: 50px;
width: 50px;
display: block;
cursor: pointer;
}
#arrow-box {
background-color: white; /* FOR NOW */
}
#banner {
background-color: #9CAD9D; /* For now, until I get some pictures in */
width: 100%;
height: 200px;
margin: 0px;
padding: 0px;
top: 0px;
}
#banner-border {
width: 100%;
height: 20px;
top: 180px;
position: absolute;
text-align: center;
color: #245F27;
letter-spacing: 1px;
font-size: 10pt;
}
#dropdown {
height: 300px;
width: 100%;
}
#transground {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.menu {
float: left;
color: #006607;
margin: 15px;
z-index: 1;
font-size: 16pt;
letter-spacing: 3px;
}
.menu-item {
margin-bottom: 10px;
}
/* Fonts and such */
h1 {
color: white;
padding-top: 50px;
margin: 0px;
text-align: center;
}
ul {
margin: 0px;
}
.unstyled {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a:hover {
color: white;
}
/* General structural elements */
#content {
width: 75%;
height: 500px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding: 10px;
background-color: white;
}
#slide-wrapper {
z-index: -10;
}
/* Footer stuff: Contact form will need a media query to help it fit in the screen in mobile. Or maybe remove it? */
footer {
height: 400px;
background-color: #9CAD9D; /* FOR NOW */
}
#footer-border {
background-color: #165413;
width: 100%;
height: 20px;
}
.right {
float: right;
padding: 10px;
padding-left: 0px;
padding-bottom: 0px;
width: 50%;
}
.left {
padding: 10px;
display: inline-block;
}
#media screen and (max-width: 410px) {
.left {
display: block;
}
.right {
float: none;
}
/* Still can't get the form to fit the screen -- it floats to the right. */
}
.fields {
float: left;
padding: 2px;
}
label {
padding-right: 5px;
}
#message {
height: 150px;
}
form {
margin-left: auto;
margin-right: auto;
width: 250px;
line-height: normal;
}
input, textarea {
width: 200px;
padding: 0px;
margin: 0px;
float: right;
}
.button {
width: auto;
cursor: pointer;
}
#copy {
text-align: center;
background-color: #9CAD9D; /* Same as footer */
margin: 0px;
padding-bottom: 20px;
display: block;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css"/>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<div id="banner">
<h1>Company Name Placeholder</h1>
<div id="banner-border">CLICK THE ARROW</div>
</div>
<div id="dropdown" class="hidden">
<div id="transground"></div>
<ul id="menu" class="menu hidden unstyled">
<li class="menu-item">HOME</li> <!-- HORIZONTAL OR VERTICAL? -->
<li class="menu-item">ABOUT ME</li>
<li class="menu-item">GET A WEBSITE</li>
<li class="menu-item">PORTFOLIO</li>
</ul>
</div>
<div id="arrow-box">
<img id="arrow" src="downarrow.jpg"/>
</div>
<div id="slide-wrapper">
<div id="content">
Page content will go here.
</div>
<footer>
<div id="footer-border"></div>
<div class="left">
This will be about customers contacting me, etc.
</div>
<div class="right">
<form id="contact" method="post" action"mail.php" accept-charset="UTF-8">
<ul class="fields unstyled">
<li class="fields"><label for="name">Full Name</label></li>
<li class="fields"><input name="name" type="text" maxlength=50 placeholder="Your Name" required=""></input></li>
<li class="fields"><label for="email-address">E-Mail</label></li>
<li class="fields"><input type="email" name="email-address" maxlength=50 placeholder="you#example.com" required=""></input></li>
<li class="fields"><label for="subject">Subject</label></li>
<li class="fields"><input name="subject" type="text" maxlength=50 required=""></input></li>
<li class="fields"><label for="message">Message</label></li>
<li class="fields"><textarea id="message" name="message" maxlength=1000 required=""></textarea></li>
<li class="fields"><input class="button" type="submit" value="Send" name="submit"></input></li>
</ul>
</form>
</div>
</footer>
<p id="copy">© 2015 - Evan Dempsey</p>
</div>
<!-- Scripts down here -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="menu.js"></script>
<script type="text/javscript">
//This is supposed to be to fit the copyright thing underneath the contact form when the browser is ~ iPad size.
</script>
</body>
</html>
Help would be appreciated, I'd like to know why this does not apply. Also, the cursor: pointer; rule under the a selector doesn't seem to be working.
The problem is that some of the a parents have .hidden class and elements with .hidden class have property z-index: -5 as I see.
One way to fix the problem may be to change z-index property after the jQuery animation finishes
You have a problem with Z-indexes: don't use negative z-indexes unless you clearly understand what you are doing (this article from Philip Walton is really nice). And check how position and z-index are related.
Using this CSS stylesheet should be one way of solving your problem:
body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
background-image: url("background.jpeg");
background-attachment: fixed;
}
/* Menu elements */
.hidden {
top: -50px;
position: absolute;
z-index: 1;
}
#arrow {
margin-left: auto;
margin-right: auto;
height: 50px;
width: 50px;
display: block;
cursor: pointer;
}
#arrow-box {
background-color: white;
/* FOR NOW */
z-index: 10;
position: relative;
}
#banner {
background-color: #9CAD9D;
/* For now, until I get some pictures in */
width: 100%;
height: 200px;
margin: 0px;
padding: 0px;
top: 0px;
z-index: 10;
position: relative;
}
#banner-border {
width: 100%;
height: 20px;
top: 180px;
position: absolute;
text-align: center;
color: #245F27;
letter-spacing: 1px;
font-size: 10pt;
}
#dropdown {
height: 300px;
width: 100%;
}
#transground {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.menu {
float: left;
color: #006607;
margin: 15px;
z-index: 5;
font-size: 16pt;
letter-spacing: 3px;
}
.menu-item {
margin-bottom: 10px;
}
/* Fonts and such */
h1 {
color: white;
padding-top: 50px;
margin: 0px;
text-align: center;
}
ul {
margin: 0px;
}
.unstyled {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a:hover {
color: white;
}
/* General structural elements */
#content {
width: 75%;
height: 500px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding: 10px;
background-color: white;
}
#slide-wrapper {
z-index: 10;
}
/* Footer stuff: Contact form will need a media query to help it fit in the screen in mobile. Or maybe remove it? */
footer {
height: 400px;
background-color: #9CAD9D;
/* FOR NOW */
}
#footer-border {
background-color: #165413;
width: 100%;
height: 20px;
}
.right {
float: right;
padding: 10px;
padding-left: 0px;
padding-bottom: 0px;
width: 50%;
}
.left {
padding: 10px;
display: inline-block;
}
#media screen and (max-width: 410px) {
.left {
display: block;
}
.right {
float: none;
}
/* Still can't get the form to fit the screen -- it floats to the right. */
}
.fields {
float: left;
padding: 2px;
}
label {
padding-right: 5px;
}
#message {
height: 150px;
}
form {
margin-left: auto;
margin-right: auto;
width: 250px;
line-height: normal;
}
input,
textarea {
width: 200px;
padding: 0px;
margin: 0px;
float: right;
}
.button {
width: auto;
cursor: pointer;
}
#copy {
text-align: center;
background-color: #9CAD9D;
/* Same as footer */
margin: 0px;
padding-bottom: 20px;
display: block;
}
You need to add z-index:99 to your dropdown ID as the links are underneath another element.
Assume following html page:
<html>
<head></head>
<body>
<div id="wrapper">
<div id="header"/>
<div id="navigation"/>
<div id="leftcolumn"/>
<div id="content/>
<div id="footer"/>
</div>
</body>
</html>
What I'm trying to achieve is that the leftcolumn div and the content div always have the same height. Sometimes the leftcolumn div is higher than the content div because there is little content and vice versa: when there is a lot of content, the content div is higher than the leftcolumn div.
The situation as it is now produces some lay-out shenanigans because the body background, leftcolumn background and content background are all in a different colour.
This is my CSS as-is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #FFFEE9;
}
#wrapper {
margin: 0 auto;
width: 900px;
height: auto;
}
#content {
float: left;
color: #006350;
background: #DEE3DC;
height: 100%;
display: inline;
width: 730px;
}
#contents {
margin: 35px;
}
#contents h1, h2 {
padding-bottom: 15px;
}
#contents p {
padding-top: 5px;
padding-bottom: 5px;
}
#header {
color: black;
width: 900px;
float: left;
height: 160px;
background: #FFFEE9;
margin-top: 10px;
}
#navigation p {
padding: 3px;
}
#footer {
width: 900px;
height: 40px;
clear: both;
color: white;
background: #83422D;
font-size: 80%;
}
#footer a {
color: white;
text-decoration: none;
}
#footer p {
padding: 4px;
}
#navigation {
float: left;
width: 900px;
height: 25px;
color: white;
background: #83422D;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:hover {
text-decoration: underline;
}
#leftcolumn {
color: white;
background: #006350;
height: 100%;
width: 170px;
float: left;
}
#leftcolumn a {
text-decoration: none;
color: white;
}
#leftcolumn a:hover {
text-decoration: underline;
}
#leftcolumn li {
padding-bottom: 10px;
}
#leftcolumn ul {
margin-left: 20px;
margin-top: 20px;
list-style: none;
}
.centered {
text-align: center;
margin: auto;
display: block;
}
#gallery {
height: 300px;
width: 650px;
}
#gallery img {
margin-right: 50px;
margin-top: 50px;
}
#gallerytext {
width: 400px;
font-size: 75%;
color: black;
position: relative;
margin-left: 155px;
margin-top: -100px;
text-align: justify;
}
I've tried using a combination of CSS styles like height: 100%, height:inherit, height:auto,... on the different divs (wrapper, leftcolumn and content) but I can't seem to get the result I want. Bottom line: what CSS styles should I use if I want the leftcolumn and content div have the same height, regardless of which one is higher at that time. (And without using javascript please).
JsFiddle example where the leftcolumn is larger: http://jsfiddle.net/CQPnF/4/
Example where the content is larger: http://jsfiddle.net/BQkme/
You can get your desired results with the use of display:table-cell rather float in your left and right panels :-
I have removed float from your #content & #leftcolummn and gave them display:table-cell; and its working fine as per your requirement.
UPDATED CSS
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #FFFEE9;
}
#wrapper {
margin: 0 auto;
width: 900px;
overflow:hidden;
}
#content {
color: #006350;
background: #DEE3DC;
display:table-cell;
width: 730px;
}
#contents {
margin: 35px;
}
#contents h1, h2 {
padding-bottom: 15px;
}
#contents p {
padding-top: 5px;
padding-bottom: 5px;
}
#header {
color: black;
width: 900px;
float: left;
height: 160px;
background: #FFFEE9;
margin-top: 10px;
}
#navigation p {
padding: 3px;
}
#footer {
width: 900px;
height: 40px;
clear: both;
color: white;
background: #83422D;
font-size: 80%;
}
#footer a {
color: white;
text-decoration: none;
}
#footer p {
padding: 4px;
}
#navigation {
float: left;
width: 900px;
height: 25px;
color: white;
background: #83422D;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:hover {
text-decoration: underline;
}
#container {
border:1px solid red;
overflow:hidden;
}
#leftcolumn {
color: white;
background: #006350;
width: 170px;
display:table-cell;
}
#leftcolumn a {
text-decoration: none;
color: white;
}
#leftcolumn a:hover {
text-decoration: underline;
}
#leftcolumn li {
padding-bottom: 10px;
}
#leftcolumn ul {
margin-left: 20px;
margin-top: 20px;
list-style: none;
}
.centered {
text-align: center;
margin: auto;
display: block;
}
#gallery {
height: 300px;
width: 650px;
}
#gallery img {
margin-right: 50px;
margin-top: 50px;
}
#gallerytext {
width: 400px;
font-size: 75%;
color: black;
position: relative;
margin-left: 155px;
margin-top: -100px;
text-align: justify;
}
see the demo :- http://jsfiddle.net/BQkme/10/
This solution is a teensy bit hacky because you need some supporting markup, but it does work and I have used it before.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
The main issue I have with it is that you have to nest your content divs to a depth equaling the number of columns. In your case, it's not a huge problem because you'd only be nesting your content inside 2 container divs.
Your markup might end up looking something like the following:
<html>
<head></head>
<body>
<div id="wrapper">
<div id="header"/>
<div id="navigation"/>
<div id="container_content">
<div id="container_leftcolumn">
<div id="leftcolumn"/>
<div id="content/>
</div>
</div>
<div id="footer"/>
</div>
</body>
</html>
You need to use absolute positioning.
Here is a working Live Demo.
Hope this helps.