Forum Moderators: not2easy
I'm new here, I registered here because i noticed a lot of helpful advice coming from these boards. But enough flattery and kissing up.
A few weeks ago I was contracted to build a website for some girls and their class project (its going to be a business with shares and sponsors and what have you,...eventually). Now being the cockey kind of guy I am, I accepted to build them a free website with only my limited knowledge of html to back me up.
I did a little research and found that CSS would be the best way to build it, considering the fact that most of them don't understand tabbed browsing, so with alot of tutoring I hope to be able to teach them how to alter the content on their page's by opening the HTML in notepad. Ofcoarse then having the actual layout in a separate file (layout.css ironically enough) would make this easier for them.
Enough back story, the site I have built them (with no help so far :D ) has one issue in FireFox. You will likely be able to see this by opening this link in FF: <snip> That darned sidebar thingy doesn't want to stay inside that black box thingy!
Here is the site: <snip>
Please help.
[edited by: swa66 at 8:12 am (utc) on May 31, 2009]
[edit reason] No personal URLs post relavant minimal code instead [/edit]
So here is the css.
.bound {
height: 100%;
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 2px double #000000;
background-image: url(images/header2.png);
background-repeat: no-repeat;
background-position: top right;
}
.side {
background-position: right;
background-image:url('images/sideright.png');
background-repeat:repeat-y;
padding: 2px;
height: 100%;
text-align: left;
font-family: Tahoma, Arial, sans-serif;
font-size: 14pt;
width: 15%;
float: left;
}
My problem is that this displays the .side and .bound at exactly the same height (in pixels), however I have positioned .side about 210 pixels down the page which means the bottom of it is 210 pixels below the .bound box.
I hope you guys understand, I'm not really up with the play on the terms and expressions.
I am working to a deadline and cant find a solution myself.
Setting height needs to take into account what happens if the height is going to be insufficient.
A solution to have a child fill from x pixels down into a parent element to the bottom of said parent lies within absolute positioning.
This will fail in IE6, but that can be fixed with IE7.js to teach it that top and bottom can be set at the same time.
E.g.:
<!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>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
background-color: yellow;
}
#side {
position: absolute;
top: 210px;
bottom: 0; /* set it on the bottom */
right: 0;
width: 15%;
background-color: red;
}
#wrapper {
position: relative; /* gain position */
width: 75%;
min-height: 100%;
background-color: orange;
margin: 0 auto; /* centering */
padding-right: 15%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="side">sidebar</div>
yada yada
</div>
</body>
</html>
You'll need to add IE7.js for IE6 to have any chance of showing this properly.
You'll also need to deal with content that's too large for what's left in space in the containers.
@swa66: Thank you,..I gleaned what I could and fixed the problem in FireFox, however it now doesn't wrap the content, only the viewport. I will try to figure out a work around.
@superds: I am very sorry, I am quite new to CSS and alot of what has been said so far made little sense to me. I really don't know what you mean. Please expand or provide an example.
it now doesn't wrap the content, only the viewport
I am guessing that is caused by something else though.
Trip it back to height:100% for IE6 (in a conditional comment) IE6 just is broken by design in this.
