Resolved! Thanks to #Shomz
Resolved by adding 100% height to html and body.
html, body, #background {
height: 100%;
}
Original Question
So I have a div containing a background-image, the image however does not cover the bottom of the screen, it seems to always follow the height of another div, here's an image of my problem (Colour Code: WHITE = div class="content",BLACK = div id="background",BLUE=What div id="background" should be covering.)
This is what I want to above image to look like
Also, sorry if it sounds confusing, I'm in a rush! Here's the source code;
HTML;
<!DOCTYPE html>
<html>
<head>
<title>PROJECT_SPACE</title>
<!--add the styling-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--change background script-->
<script>
$(switchBackground);
var oFReader = new FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function(oFREvent) {
localStorage.setItem('b', oFREvent.target.result);
switchBackground();
};
function switchBackground() {
var backgroundImage = localStorage.getItem('b');
if (backgroundImage) {
$('#background').css('background-image', 'url(' + backgroundImage + ')');
}
else {
$('#background').css('background-image', 'url("img/grass_side.png")');
}
}
function loadImageFile(testEl) {
if (! testEl.files.length) { return; }
var oFile = testEl.files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
function removeImageFile()
{
localStorage.removeItem('b');
switchBackground();
location.reload();
}
</script>
</head>
<body>
<!--navigation-->
<ul class="nav">
<li>Home</li>
<li>Projects</li>
<li>Skins</li>
<li>Packs</li>
<li>Servers</li>
<li>Forums</li>
</ul>
<!--end navigation-->
<div id="background">
<div class="content">
<input id="test" type="file" onchange="loadImageFile(this)" />
<button type="button" onclick="removeImageFile()">Clear background</button>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #82b2ff;
}
.logo {
width: 50px;
height: 50px;
background-color: #000;
}
/*fonts*/
#font-face { font-family: cool; src: url('../fonts/coolvetica.ttf'); }
/*background*/
#background {
height: 100%;
}
/*content -- where all site content will go */
.content {
background-color: #fff;
margin-left: auto;
margin-right: auto;
width: 80%;
height: 700px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
/*navigation*/
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
margin-top: 150px;
padding:0;
text-align:center;
list-style: none;
background-image: url('../img/sandstone_smooth.png');
background-repeat: repeat;
font-family: cool;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
text-decoration: none;
color: #fff;
font-size: 20px;
letter-spacing: 4px;
}
.nav a:hover {
color: #E0E0E0;
}
/*links*/
a:link {
color: #fff;
}
/* visited link */
a:visited {
color: #fff;
}
/* mouse over link */
a:hover {
color: #fff;
}
/* selected link */
a:active {
color: #fff;
}
The following rules should fix your background:
html, body, #background {
height: 100%;
}
Based on the screen layouts you've displayed above, I'd be tempted to simply declare the body background-color: black:
body {
background-color: rgba(0,0,0,1);
}
If you need to, you can also give the .nav a padding-top: and (possibly) a position: absolute;.
That seems to me the most straightforward way to reproduce your desired screen layout above.
Do you think that will work for you?
Related
Can anyone help me solve an issue with my css. What I want to do is display the entire document on the screen at once without having an inner window scroll bar.
Below is the code and I've opened up a collaborative room on plunker. Thank you
Plunker code
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title></title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<nav>
<ul>
<li>Test Links will go here</li>
</ul>
</nav>
<main>
<div id = "content">
<article>
<p><iframe style="width: 100%; min-height: 100vh; background-color: #f2f0ea; border: none;"
src="https://docs.google.com/document/d/1L3-ogIreQhm-aHutOfKjDI17buwCJRrkzmwvQGMafGw/pub?embedded=true"
width="300" height="150">
</iframe>
</p>
</article>
</div>
</main>
</body>
</html>
CSS
/* Styles go here */
html {
background : url("http://universitychessclub.org/ChessBackground.jpg") no-repeat center center fixed;
background-size : cover;
}
#welcome{
font-family: monospace;
text-align: center;
}
h1{
font-family: 'Fira Sans', sans-serif;
}
h2{
font-family: 'Fira Sans', sans-serif;
}
p{
font-family: 'Fira Sans', sans-serif;
}
body{
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
width: 80%;
height: 100%;
}
header h1{
margin-left:23%;
font-size:350%;
color: #f2f0ea;/* --off- yellow-white-- */
margin-bottom:5px;
font-family: 'Voltaire', sans-serif;
}
header h2{
margin-left:55%;
width:50%;
margin-top:0%;
color: #f2f0ea;/* --off- yellow-white-- */
font-family: 'Voltaire', sans-serif;
}
header h1 b img {
height:17%;
width:17%;
margin-bottom:-7%;
}
/*--Nav Section--*/
a:hover, a:active {
background-color: #1b1b1b;/*-light black-*/
opacity: 0.4;
}
nav {
background-color: #1b1b1b;/*-light black-*/
width: 100%;
padding:.002%;
border-radius:5px;
opacity: 0.9;
}
nav li {
display: inline;
}
nav ul a {
color: white;
margin: 1%;
text-decoration:none;
font-size:115%;
}
/* --footer section-- */
footer{
color:white;
font-size:larger;
font-style:italic;
text-align: center;
}
input, textarea{
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
.submit{
width: 40%;
margin-left: auto;
margin-right: auto;
}
/* --content area-- */
#content{
height: 100%;
min-height: 100vh;
color:#1b1b1b; /*-light black-*/
font-size: 1.1em;
background-color:#ffffff;/* --off- yellow-white-- */
padding:1%;
border-radius:5px;
}
/* --table-- */
table {
text-align:center;
border-collapse: collapse;
border-style: outset;
border-width:5px;
border-style: solid;
border-color:#1b1b1b; /*-light black-*/
background-color: #f2f0ea;/* --off- yellow-white-- */
}
table a:link{
text-decoration: none;
background-color:transparent;
}
td {
border-width:3px;
border-style: solid;
border-color:#1b1b1b; /*-light black-*/
color: #1b1b1b; /*-light black-*/
}
#tablerow1{
background-color:#898989/*-grey-*/
}
/* --unvisited link-- */
p a:link {
/*-light black-*/
text-decoration: none;
background-color:transparent;
}
/* --visited link-- */
p a:visited {
/* light black */
text-decoration: none;
background-color:transparent;
}
/* --mouse over link-- */
p a:hover {
text-decoration: none;
}
/*--Media Queries--*/
/*--Phone--*/
#media screen and (max-width: 600px) {
header img {display: none; }
header h1{margin-left:0px;}
header h2{padding-left:0px;}
nav{margin-left:0px;}
}
/*--Tablet--*/
#media screen and (max-width: 1024px) {
header h1{margin-left:0px;}
nav{margin-left:0px;}
}
#show{
text-align: center;
}
/*SET MAX SIZES FOR IMAGES*/
img{
max-width: 100%;
max-height: 100%;
}
table img{
max-width: none;
max-height: none;
}
Use the Follows
html, body { height: 100%; }
iframe {
height:400%;
width:100%;
}
I’m afraid this isn’t possible. You’ll have to settle for the inner scroll bar.
Jquery iframe crossdomain dynamic height
Yet Another cross-domain iframe resize Q&A
You might be able to do it if you have control over the iframe’s code, but since it’s a Google Doc that’s not possible.
https://css-tricks.com/cross-domain-iframe-resizing/
http://www.456bereastreet.com/archive/201112/how_to_adjust_an_iframe_elements_height_to_fit_its_content/
The quick way
Add some css for the iFrame like this: height: 2000px;
It's bad though. Because when iframe content changes so will height.
The proper dynamic way
I recently wrote an iframe height adjustment script that gleans iframe heights (this needs to be done from within the iframe). For this I used window.postMessage() to communicate between the iFrame and parent.
IFRAME
(function() {
'use strict';
var getHeight = function(e) {
if (e.data == "getHeight") {
e.source.postMessage("getHeight:" + (Number($("body").height()) + (Number($("body").height()) * 0.05)) + 10 + "px", "*");
}
}
window.addEventListener("message", getHeight, false);
}());
PARENT
var iframeCallback = function(e) {
if(typeof(e.data) == "string"){
var response = e.data.split(":");
switch (response[0]) {
case "getHeight":
IFRAME.height(response[1]);
break;
default:
console.log("Undefined method: " + response[0]);
break;
}
}
}
window.addEventListener("message", iframeCallback, false);
var getHeight = function(){
$("iframe")[0].contentWindow.postMessage("getHeight", "*");
}
$(window).resize(function() {
getHeight();
});
$("iframe")[0].on('load', function() {
getHeight();
}
I used a border to figure out that my wrapper is only wrapping my Header and I'm stumped as to why...I want to wrap the Header, all the way down to the footer... Anyone have any pointers?
I've seen a lot of articles say to specify a width and the height is set to auto if not stated, too, right?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Personal Transportation/Errands Services</title>
</head>
<body>
<header>
<div id="headleft">
<img src="images/new logo flattened.jpg" />
</div>
<div id="headright">
(717)***-****
<br />
********#yahoo.com
</div>
</header>
<nav>
Home
Contact
</nav>
<article>
Test
</article>
<aside>
<img src="images/car 1.png" id="car" />
</aside>
<footer>
Ftest
</footer>
</body>
</html>
/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}
/* Tell the browser to render HTML 5 elements as block */
footer, header, aside, nav, article {
display: block;
}
body{
width:940px;
height: 100%;
margin:0 auto;
border-style: solid;
border-width: 3px;
}
header {
background-color: #1a8cff;
}
nav {
width: 100%;
float: left;
text-align: right;
background-color: #ff7f00;
font-family: bold 'Oswald', sans-serif;
color: #ffffff;
letter-spacing: 1px;
}
a {
text-decoration: none;
}
/* unvisited link */
a:link {
color: #FFFFFF;
}
/* visited link */
a:visited {
color: #FFFFFF;
}
/* mouse over link */
a:hover {
color: #FFFF00;
}
/* selected link */
a:active {
color: #FFFF00;
}
#headleft {
display:inline;
background-color: #1a8cff;
width: 100%;
}
#headright {
height: 87px;
padding-top: 37.5px;
vertical-align: middle;
display: inline;
float: right;
background-color: #1a8cff;
border-style: solid;
border-width: 3px;
}
body {
margin: 0 auto;
width: 1000px;
font: 13px/22px Helvetica, Arial, sans-serif;
background-color: white;
background-size: 100%;
}
article{
float: left;
}
aside{
float: right;
}
footer{
float:left;
background-color: #1a8cff;
width: 100%;
}
you need to clear your floated elements, you can use a clearfix or an empty div set to clear:both.
FIDDLE
You could also use a wrapper inside the body that wraps every element on the page and set that to overflow: hidden
ALT FIDDLE
I am EXTREMELY new to CSS and HTML (beginners course at uni) so I'm not sure if this is a super basic issue or not.
I'm using CODA 2 on a mac.
I have 5 HTML pages and a separate stylesheet.css.
In Coda preview the CSS works on the HTML pages. If I manually save the .css the HTML pages don't display any CSS. If I slightly edit anything on the .CSS the HTML pages refresh in preview and display the CSS again.
If I open my HTML pages in the browser (chrome/firefox) they are displayed without any css.
The correct links to the .CSS page are on all my HTML pages (under the title).
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="ms.css" />
Any help would be MUCH appreciated as time is ticking away and I am completely lost.
Cheers
EDIT*
All the files are located within the same folder.
CSS code
`#charset "utf-8";
/* CSS Document */
header {
a:link color:white;
a:visited {color:white;
font-family: sans-serif;
background-color: #004292;
width: 640px;
}
header nav a {
color: white;
text-decoration: none;
font-family: sans-serif;
}
header > h1 > a {
color: white;
text-decoration: none;
font-family: fantasy;
font-size: large;
}
header nav a:hover {
background-color:white;
color: #004292;
border: 1px solid white;
}
body {
width: 1080px;
background-color: #004292;
padding-left: 0px;
border-bottom-left-radius: 0px;
}
nav > ul {
width 1080px;
}
nav > ul > li {
display: inline;
float: right;
}
nav > ul > li > a {
float: right;
padding: 0 15px;
transition: background-color 0.5s, border-color 1s;
}
.onion {
background-color: #004292;
font-family: sans-serif;
color: white;
float: left;
width: 640px;
margin-left: auto;
margin-right: right;
padding-top: 100px;
}
section {
background-color: #004292;
font-family: Arial, sans-serif;
color: white;
float: left;
width: 640px;
}
.lcol {
width: 100px;
float: left;
}
.lcol img {
width 200px;
}
.rcol {
width: 100px;
float: right;
}
.rcol img {
width 200px;
}
#wrap {
width: 640px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
font-family: Arial, sans-serif;
color: white;
float: left;
}
#beef img{
width: 512px;
height: 306px;
background-image: url(kingswood_text.jpg);
background-position: 0 0;
}
#beef img:hover {
background-position: 0 100%;
opacity: 0.1;
}
#wrap img:hover {
opacity: 0.1;
background-position: 0 0;
}
#wrap img {
margin: 10px;
border:2px solid white;
width: 512px;
height: 306px;
background-image: url(kingswood_text.jpg) bottom;
}
#yelp {
background-color: white;
color: white;
width: 1080px;
margin-top: 100px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
border-bottom-left-radius: 0px;
float: left
}
#yelp img {
margin-left: auto;
margin-right: auto;
}
footer {
width: 640px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
color: white;
background-color: #004292;
font-family: Arial, sans-serif;
clear: both;
display: block;
padding-top: 100px;
padding-left: 50px;
}
HTML for the index.html page.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>GTM Canberra</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="ms.css" />
</head>
<body>
<!-- Header -->
<header>
<div id="corn"
<h1>GTM </h1>
<nav>
<!-- nav links -->
<ul>
<li>About</li>
<li>FAQ</li>
<li>Event Info</li>
<li>Getting There</li>
<li>Lineup</li>
</ul>
</nav>
</div>
</header>
<!-- Logo/Image/PageID -->
<div id="yelp"
<section>
<img src="images/logo.jpg" alt="logo" width="647" height="358">
</section>
</div>
<!-- Content -->
<div id="wrap"
<section>
<div class="rcol">
<a id="beef">
<a href="lineup.html"><img src="images/steptones.jpg" alt="steptones" >
</a>
<a href="lineup.html"><img src="images/stone.jpg" alt="stone" >
</div>
<div class="lcol">
<a href="lineup.html"><img src="images/north.jpg" alt="north" >
<a href="lineup.html"><img src="images/kingswood.jpg" alt="kingswood" >
</div>
</section>
</div>
<!--Footer -->
<footer>
<p> Presented by Cattleyard Promotions and supported by triple j and Channel V </p>
</footer>
</body>
</html>
You have to close your opening div tags, from this
<div id="corn"
to this
<div id="corn">
Same with <div id="yelp"and <div id="wrap"
Also in your css you forgot to put colons in some parts, like
.lcol img {
width 200px;
}
instead of
.lcol img {
width: 200px;
}
In new projects, it's better to start with as little code as you can in both the HTML and CSS files (and js files too) just to see that all files are linked together.
Edit:
a:visited {color:white
In the CSS file, can you please remove the first line or at least remove the accent before #charset "utf-8";
`#charset "utf-8";
The banner image in the header is 130 pixels tall, but it says the header in total is 135 pixels. I can't find where this is happening. Where is this extra space coming from?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Taft Power Equipment</title>
<link rel="stylesheet" type="text/css" href="js\jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
<script type="text/javascript" language="Javascript" src="js\jquery.min.js"></script>
<script src="js/jquery.horizontalNav.js"></script>
<script src="js\jquery-migrate-1.2.1.js"></script>
<script>
// When document is ready...
$(document).ready(function() {
$('.full-width').horizontalNav({}); // Call horizontalNav on the navigations wrapping element
$("#main-content").load("home.html");
});
</script>
<script>
$(document).ready(function() {
$("#home").click(function() {
$("#main-content").load("home.html");
});
$("#work").click(function() {
$("#main-content").load("work.html");
});
$("#blog").click(function() {
$("#main-content").load("blog.html");
});
$("#about").click(function() {
$("#main-content").load("about.html");
});
$("#contact").click(function() {
$("#main-content").load("contact.html");
});
$("#parts").click(function() {
$("#main-content").load("parts.html");
});
$("#people").click(function() {
$("#main-content").load("people.html");
});
});
</script>
<script>
$(function() {
$("button").button()
.click(function(event) {
event.preventDefault();
});
});
</script>
<script>
function showParts(str) {
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "partsearch_2.php?q=" + str, true);
xmlhttp.send();
}
</script>
<script>
function showPeople(str) {
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "peoplesearch.php?q=" + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<img src="images/taft_banner_960_blackandwhite.png" />
</div>
<div id="menu">
<nav class="horizontal-nav full-width horizontalNav-notprocessed">
<ul>
<li>Home
</li>
<li>Work
</li>
<li>Blog
</li>
<li>About
</li>
<li>Contact
</li>
<li>Parts Look Up
</li>
<li>People
</li>
</ul>
</nav>
</div>
<div id="main-content"></div>
<div id="footer">
<p>© Copy Right Taft Power Equipment Corp</p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html, body {
margin:0;
padding-top:0;
height:100%;
}
p, li {
}
a {
}
b {
}
table {
border-collapse: collapse;
/* 'cellspacing' equivalent */
}
table th {
font: 1.5em Tahoma;
border: 3px solid #0e7079;
border-radius: 6px;
padding: 0em 1em 0em 1em;
}
table td {
font: 1.3em sans-serif;
border-radius: 1px;
border: 0px solid #0e7079;
padding: 0 1em 0 1em;
}
h1 {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}
ul {
margin-left: 0px;
}
img {
border: none;
}
/* ========================================================================================== */
#page-wrap {
!margin: 10px auto;
display: inline;
}
#inside {
width: 960px;
margin: 0 auto;
background: blue;
min-height:100%;
position:relative;
}
#searchbar {
width: 30%;
background: #747474;
border: 1px solid red;
display: inline-block;
}
#results {
background: #4c4c4c;
min-height: 100px;
width:50%;
display: inline-block;
border-radius: 6px;
border: 1px solid #0e7079;
}
#results b {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
#main-content {
margin-bottom: 10px;
padding:10px;
padding-bottom:30px;
/* Height of the footer */
}
#header {
}
#menu {
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #000000;
text-align: center;
padding-top: 0px;
color: white;
position:absolute;
bottom:0;
width:960px;
height:30px;
/* Height of the footer */
}
/* ========================================================================================== */
.horizontal-nav {
background: #efefef;
border-radius: 6px;
}
.horizontal-nav ul {
background: #ff4505;
float: left;
text-align: center;
border-radius: 6px;
border: 0px solid #0e7079;
margin-left: 0px;
}
.horizontal-nav ul li {
float: left;
border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
border-left: 0 none;
}
.horizontal-nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.25);
border-left: 1px solid rgba(255, 255, 255, 0.25);
text-decoration: none;
}
.horizontal-nav ul li:first-child a {
border-left: 0 none;
}
.horizontal-nav ul li a:hover {
background: #12808a;
}
.horizontal-nav ul li:first-child a {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
http://jsfiddle.net/5b48H/
Thank you!
Either add display:block or vertical-align:top to the img element.
jsFiddle example - display:block
#header img {
display:block;
}
jsFiddle example - vertical-align:top
#header img {
vertical-align:top;
}
Note - The default vertical-align property is baseline. Changing it to top, middle or bottom fixes the issue.
If you can set the image's display style to block that should solve the problem. Setting vertical-align to bottom or middle should also work. I think the problem comes about because Firefox tries to position inline images so their bottom edge is aligned with the baseline of the text, and so there is space below the image for the text descenders. source
header img
{
display: block;
margin: 0;
padding: 0;
}
I believe setting line-height: 1; on the image will also fix this problem, especially if it's in a block by itself.
source
As I am transitioning from using template layouts to writing my own css scripts, I have run into many issues, but there's one preventing me from continuing. I have successfully created a 3 column layout with floating divs, however upon browser re-size the right column overlays the middle div. I have imported the script found on Div sections shifts when i resize the window with no success. Basically I want the layout to behave like the current one, at http://www.allstarselectric.com , but using %. I am using % for cross resolution support, so is there a workaround/solution, or are pixels absolutely necessary? Any help would be greatly appreciated.
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background-color: #4a4d51;
background-image: url(images/templatemo_body.jpg);
background-repeat: repeat-x;
background-position: top
}
.content{
position: fixed;
width: 100%;
height: 100%;
background-image: url(images/templatemo_body.jpg);
}
.contentbody{
float: left;
width: 70%;
height: 100%;
}
.wrapper {
width:100%
}
.sidebar{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar li{
list-style-type:none;
margin:0;
padding:0;
}
.sidebar2{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar2 li{
list-style-type:none;
text-align: center;
margin:0;
padding:0;
}
.chromestyle{
width: 100%;
font-weight: bold;
}
.chromestyle:after{ /*Adds margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*Affects the background/menustyle*/
.chromestyle ul{
border: 0px solid #BBB;
width: 730px;
height: 45px;
background: url(imgs/navm.jpg) center center no-repeat; /*THEME CHANGE HERE*/
padding: 0 15px;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
/*Affects menu text*/
.chromestyle ul li a{
float: left;
display: block;
color: #000;
padding: 8px 20px;
margin: 0 1px 0 0;
text-decoration: none;
border: none;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
color: #fff;
background: #ff0011
center center repeat-x; /*THEME CHANGE HERE*/
}
.current { color: #fff; background: ; }
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #d5a30b;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
HTML:
<html>
<head>
<title>Allstars Electric</title>
<meta name="keywords" content="electricians," />
<meta name="description" content="Electrical Contractor DFW" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/drop.js">
</script>
<style type="text/css">
<!--
.style2 {color: #FFFF00}
.style3 {
font-size: 36px
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function JumpToIt(list) {
var newPage = list.options[list.selectedIndex].value
if (newPage != "None") {
location.href=newPage
}
}
//-->
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="sidebar" id="sidebar"><li>home</li></div>
<div class="contentbody">
<center>
<div class="chromestyle" id="chromemenu">
<ul>
<li>Home</li>
<li>Special Offers</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
<li>Themes</li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
1
2
3
4
5
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
Electrical
Heating & Air Conditioning
</div>
<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
Dark
Light
</div>
<!-- Dropdown End -->
<br><tr>text/other</br></tr>
</center>
</body>
</div>
</div>
<div class="sidebar2" id="sidebar2"><li>Home</li>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</div>
</body>
</html>
In your CSS, you have a fixed width set for .chromestyle ul. Change that width to a %, and that should fix your problem.
The first answer to the article you linked provides you with the most reasonable solution: "You can wrap around the two divs with another div of a minimum width you want the page to be viewed in." There isn't much point in trying to fit a page to a 320x240 browser; scroll bars can't be avoided in that kind of resolution.
Something like this
.foowrap { min-width: 550px; width: 100%; overflow:auto; }
.foo { width:30%; float:left; }
<div class="foowrap">
<div class="foo">bar</div>
<div class="foo">baz</div>
<div class="foo">bum</div>
</div>
Then make sure that the total minimum width of the divs inside (class foo in the example) is not more than the min-width you set. Watch out for borders especially.
By the way, you have two </body> and you're using <center>, both of which are things you should avoid. This bit doesn't make much sense either: <br><tr>text/other</br></tr>