how can I make this right bar bg go all the way down the page?

[charlie019]

The background of this sidebar is not going all the way down the page. I have tried height: 100% and nothing. Anyone ever have this problem, how can I fix it. Here is the link:http://www.mdoneonone.com

Thanks

PS: how do you like my site design.

[MikeHopley]

What you want is for the two columns to match heights, as cells in a <table> would. Unfortunately, since <div>s don't use the same rendering rules as <table> cells, you have to hack it.

The most popular hack is faux columns, and this is probably the best choice for you. Personally I don't like it, because I prefer elastic layouts, and faux columns won't work when your columns change widths.

The correct solution would be to set the <div>s to display: table-cell; using CSS. This will make them render exactly as though they were cells in a <table>, so equal heights are automatic.

But Internet Explorer (IE) does not support this incredibly useful, standard CSS display type. I use javascript to fix IE's bad rendering.

[cullinanweb]

wrap the whole thing in a div and set the background of that dive to the color you want so say

<div id="contentwrapper">
<div id="left">content for left</div>
<div id="right">content for right</div>
</div>

content wrapper and right would have the same background colors and left would be the other color.

you will also need to add a clear both fixing div

need any further help let me know.

[MikeHopley]

That's a good, simple solution; but it will only work if the left column is always longer than the right.

Originally Posted by cullinanweb

wrap the whole thing in a div and set the background of that dive to the color you want so say

<div id="contentwrapper">
<div id="left">content for left</div>
<div id="right">content for right</div>
</div>

content wrapper and right would have the same background colors and left would be the other color.

you will also need to add a clear both fixing div

need any further help let me know.

[charlie019]

Originally Posted by cullinanweb

wrap the whole thing in a div and set the background of that dive to the color you want so say

<div id="contentwrapper">
<div id="left">content for left</div>
<div id="right">content for right</div>
</div>

content wrapper and right would have the same background colors and left would be the other color.

you will also need to add a clear both fixing div

need any further help let me know.

I tried that its not working? What did I do wrong? Here is my css:

Code: Select all

#contentandbar {
    background-color: #FFD8A5;
    clear:both;
}

[pa007]

Mike, you really shouldn't be using JavaScript for presentation. JS should be for behaviour only. I refuse point blank to blur the lines. There are three common layers that make up a page or document. Structure/content, presentation and behaviour and I am very strict about keeping them separate.

Pete.

[Lchad]

Do you have a link? You didn't post enough of you code to know what you did wrong.

[charlie019]

Originally Posted by Lchad

Do you have a link? You didn't post enough of you code to know what you did wrong.

I put the link in my first post: http://www.mdoneonone.com

[Lchad]

My apologies.. I didn't see the link.

Cullinanweb wanted you to put both the left and right columns in a wrapper div.

You do not currently have those columns in a wrapper.

Faux columns is the only way I know how to do this.
You make a background image that will repeat-y. Apply it as the background to the wrapper div.

Then you nest the left and right columns in the wrapper- No colored backgrounds on the left or right.

Without faux columns you will never get the two columns to appear to match in length.

[charlie019]

Originally Posted by Lchad

My apologies.. I didn't see the link.

Cullinanweb wanted you to put both the left and right columns in a wrapper div.

You do not currently have those columns in a wrapper.

Faux columns is the only way I know how to do this.
You make a background image that will repeat-y. Apply it as the background to the wrapper div.

Then you nest the left and right columns in the wrapper- No colored backgrounds on the left or right.

Without faux columns you will never get the two columns to appear to match in length.

How would I go about using the faux columns? Where should I put the bg code?

[karinne]

Either in the body { } or in a #wrapper div.

Click the link MikeHopley gave you at the beginning ... it should explain it there. Or do a google search for Faux Columns ... you should get A LOT of results

[Lchad]

Take a look at this tutorial it will explain it all!

[karinne]

Hmmm yes ... that's the link I was talking about

[MikeHopley]

Originally Posted by pa007

Mike, you really shouldn't be using JavaScript for presentation. JS should be for behaviour only. I refuse point blank to blur the lines. There are three common layers that make up a page or document. Structure/content, presentation and behaviour and I am very strict about keeping them separate.

Why, unless out of sheer religious zeal?

(X)HTML, CSS, and javascript are tools. Their purpose is to enable you to make accessible, interoperable, attractive, usable websites. They are not religious objects.

The separation of style, content, and behaviour makes for easier coding, with less maintenance; it's more logical and organised. It also makes pages smaller in file size. That's all it does.

Besides, how do you define behavior? Response to a user's actions? Then CSS link hover states should be handled by javascript! The partition is not quite as neat as you might think. You are perhaps suffering from "ontologist's delight" -- a wilful state of delighting in artificially perfect taxonomy.

CSS is good at some things; javascript is good at others. For the most part, the boundaries are quite clear. But there are areas of significant overlap.

In this particular case, I don't like using javascript. It's not as elegant. But I see no problem using a javascript work-around for IE, which fails to support such a basic part of the CSS standard. If javascript is off, then IE users just get a slightly inferior page presentation. So what?

Here's another example: to make rounded corners, we need extra markup. Okay, so this should be done in CSS; but CSS 3 is a long way off. But extra markup is annoying for me when I'm editing, so I use javascript to generate the extra presentational <div>s.

What you ask is nigh-on impossible. If you completely separated style and content, for example, then you would never use a single <div> in your markup (because its only possible purpose is as a presentational or behavioural hook). Your lines are already blurred; you just can't see it!

[MikeHopley]

In case anyone is interested, here's where I got my method from:

http://www.projectseven.com/tutorial...umns/index.htm

I think I edited their javascript to remove some strict errors; if you want my version, just ask.

[pa007]

Come now, Mike, you should know what I am like by now. Almost everything I do is on principle rather than for any practical reason. It all works, I just make my life extremely difficult. I think I am simply a glutton for punishment and one of those unrelenting purists.


Pete.

[MikeHopley]

Originally Posted by pa007

Come now, Mike, you should know what I am like by now. Almost everything I do is on principle rather than for any practical reason. It all works, I just make my life extremely difficult. I think I am simply a glutton for punishment and one of those unrelenting purists.

Ha!

My point is that your principles may not be quite as principled as you think. If your idealism doesn't quite hold up to philosophical scrutiny, then why not give it up? It would make life easier.

Then again, maybe you're the addictive, immoderate type who would go on a blinding binge as soon as he relaxed the self-imposed strictures. One day, you're using javascript for an IE presentation hack; the next, you're back to tables and tag soup.

They do say a little alcohol is good for your health, but not, perhaps, if you're a reformed alcoholic.

[charlie019]

nothing has worked

[Lchad]

Charlie, seach google for faux columns. There must be a bunch of tutorials. Sometimes one tutorial doesn't make sense to me so I'll just keep trying them until I find one I understand.

[cullinanweb]

I have put together a simple emaple to see if you can work through it. Thgere is no tutorial included but it is what the others are getting at.
code:note: i have put the css in the html file which is not advised but done for quickness...


edit the image is included below too but is really small in the tumbnail so http://www.webforumz.com/attachment....7&d=1186468395

Code: Select all

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Faux Coulms Example</title>
<style type="text/css">
<!--
#wrapper {
    height: auto;
    width: 944px;
    margin: 0 auto;
}
#header {
}
#navigation {
}
#main {
    background-image: url(faux-column.jpg);
    background-repeat: repeat-y;
}
#content {
    background-color: #EFDEB3;
    padding: 5px;
    height: auto;
    width: 655px;
    float: left;
}
#rightbar {
    background-color: #EFCD86;
    padding: 5px;
    float: right;
    height: auto;
    width: 260px;
}
#footer {
    clear: both;
}
.clearboth {
    clear: both;
    height: 1px;
    width: 100%;
}
p {
    margin-bottom: 10px;
}
* {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}
-->
</style>
</head>

<body>
<div id="wrapper">
  <div id="header">
    <h1>Page Header</h1>
  </div>
  <div id="navigation">Navigation here</div>
  <div id="main">
    <div id="content">
        <p>Sed pretium urna. Nunc congue nunc quis dolor. Donec pharetra, ante in  molestie varius, dolor justo rhoncus mauris, non vestibulum leo velit  nec mauris. Duis risus. Nulla interdum porta odio. Curabitur venenatis  aliquam leo. Nulla facilisi. Vivamus lacinia scelerisque tellus. Proin  a felis. Ut vitae turpis non ipsum pulvinar ultrices. Donec in orci.  Vestibulum pellentesque leo. Suspendisse egestas, metus id interdum  tempor, nisi diam mollis lectus, eget scelerisque odio libero non  lorem. </p>
        <p>Nulla facilisi. Duis ipsum. Phasellus semper nonummy tellus. Fusce  pretium magna id dolor. Mauris elementum tellus et metus. Proin  vulputate leo sed est pellentesque commodo. Suspendisse semper  ultricies nunc. Aenean posuere est ac lacus. Suspendisse potenti. Proin  luctus, nisl a accumsan scelerisque, nisl erat aliquet magna, in mattis  urna lacus nec tellus. Maecenas sit amet dolor. Phasellus imperdiet,  urna vitae ullamcorper facilisis, enim ligula bibendum pede, sed luctus  nulla urna id leo. </p>
        <p>Aliquam pharetra. Vestibulum varius diam nec purus rutrum commodo.  Nullam in nisl. Suspendisse tellus lectus, sagittis nec, rutrum  lacinia, rhoncus at, leo. Sed enim. Nunc suscipit, ligula et elementum  faucibus, turpis sapien convallis odio, a pulvinar dui leo eu dolor.  Duis tempus varius pede. Vestibulum imperdiet, dui eget tincidunt  rhoncus, nunc erat laoreet nulla, pretium tristique sapien arcu vitae  lectus. Ut pellentesque rutrum nunc. Praesent at est. Curabitur quis  diam. Nam faucibus, ante at pretium vulputate, arcu ipsum tempus  lectus, ac rutrum turpis nunc pellentesque nibh. Mauris ac libero sed  risus facilisis sodales. Donec scelerisque, dolor sed eleifend  porttitor, nulla nibh pretium nibh, vitae dictum felis pede sit amet  sem. </p>
        <p>Cras viverra imperdiet ante. Curabitur tellus nisi, consectetuer sit  amet, auctor consectetuer, rhoncus in, sem. Mauris ante est, pretium  at, auctor nec, malesuada in, elit. In hac habitasse platea dictumst.  Sed massa eros, molestie non, tempus eu, fermentum vitae, neque. Aenean  tincidunt magna quis mauris. Sed porta, metus et tempus ornare, urna  ante iaculis erat, at congue lectus risus id ipsum. Vivamus at diam.  Etiam hendrerit luctus pede. Donec dictum sapien quis risus. Maecenas  mattis, nunc mattis convallis tristique, sem ligula tincidunt diam, at  gravida eros massa eu orci. Suspendisse ullamcorper leo a libero. Nulla  non elit. Sed rhoncus eros id nisl. Mauris tortor nibh, ultrices nec,  placerat sed, congue facilisis, enim. Vivamus odio tortor, blandit sit  amet, pharetra at, lacinia vel, risus. Morbi faucibus. Vivamus  fringilla mattis sem. Donec ut metus eget ante fringilla varius. Duis  quis diam. </p>
        <p>Sed pulvinar lacinia diam. Vestibulum commodo metus vitae lorem.  Cras non diam et orci porttitor congue. Pellentesque habitant morbi  tristique senectus et netus et malesuada fames ac turpis egestas.  Aliquam rutrum. Sed nulla quam, ornare vel, tincidunt ac, rutrum ac,  magna. Ut ut mi vel nisl vulputate aliquam. Phasellus tempus pede sed  urna. Fusce aliquet purus a risus. Mauris dui dui, laoreet sit amet,  tempor bibendum, sagittis ut, tellus. Pellentesque tempor feugiat ante.  Suspendisse vestibulum purus ut ipsum. </p>
    </div>
    <div id="rightbar">Right bar content goes here</div>
    <div class="clearboth"><!--x--></div>
  </div>
  <div id="footer">Your footer here</div>
</div>
</body>
</html>