CSS help and a grey box

[Ohnozes]

On my comic page I have a grey box created with CSS, but it will not extend to the divs that are contained in it. How do I get the grey box to extend farther down???

Oh Nozes

[C.w.]

Code: Select all

overflow: auto;

Add that to the div's styling. I cant' say for sure, because i can't figure out which div you're referring to.

[Dr Neo Lao]

I had the same problem (trying to figure out the offending div).

Here's something that may or may not be the problem:

You have div id="wrap" as a container for three div's, one with the comic information, one with the calendar and one with the contact/links links. The div that marks the end of the calendar is on the far right instead of on the left.

In Firefox / Mozilla, your page renders with the background ending beneath the calendar but above the links. In IE, it renders with the background all the way down to the bottom of the newsbox (but with the links sitting below the calendar, and the calendar on the right instead of the middle).

Initially I thought that you had more /div's than div's, but a recount showed that they are in pairs. The one that's on the end seems to be the only one that may be out of place.

[Ohnozes]

Well, I am now partially fixed. The overflow command worked. The grey box is now going down as far as I would like, but I have two problems.

1. The links for CONTACT and LINKS sit part way down the div box, and not at the top like my text on the left.

2. In IE, the divs are not aligned properly like in Firefox (although I am using IE6).

Any suggestions there?

[Dr Neo Lao]

Sorry, I should have pointed this out earlier: three-column css div's are order-dependant. You need to put the left and right side first, then the middle.

So move the stuff in div id="info_comment_right" up above the stuff in div id="center_arch_banner" and it should display properly.

Another thing: it may help to document your code slightly. Refer this example:

Code: Select all

<div id="first">
   Stuff
   Stuff
        <div id="second">
              Stuff
        </div> <!-- end second -->
   Stuff
</div> <!-- end first -->

The comments stating which div is ending will make it easier to determine what's what.

Read more about div layout here.

[C.w.]

Make your column container bigger, or your columns smaller - the last column is getting pushed down by the other columns. I'd reccomend the former. Just leave a few pixels unaccounted for - no one will notice the difference.

For IE6, on your column container, add:

Code: Select all

text-align: center;

then re-align the text to the left or right for each div underneath.

Also - make sure you specify units for all your measurements (200px, not 200) and make sure you end every declaration with a semicolon (overflow: auto ; ). That's the sort of thing that comes back to bite your later.

edit -

Sorry, I should have pointed this out earlier: three-column css div's are order-dependant. You need to put the left and right side first, then the middle.

Acutally, they aren't. At least not the way he has them set up. Whatever you want to show up on the left you float: left; and the right gets floated right. There are a bunch of different ways to do it though, some of which are order dependant. Technically, you'd want to put the column with the content first. So, on a blog you put the post at the top, and the stuff for the nav columns below.

[Ohnozes]

Well, we will see how it turns out. I still can't get logged into comicgenesis to get a whole site post. I hope they fix that soon.

Ill report back in, when things post.