CSS Vertical Alignment Issues

Hi everyone,

Ok so here's the deal: I've basically got 2 columns inside of a container <div> that is centering the page. Thing is, when I add a large amount of content to one column (in this case the main content column) the other column is placed really low on the page instead of at the top where I want it.

Take a look at www.dougkeeling.com/new/web.html

I want it to look like the main homepage www.dougkeeling.com/new (This page is having the same issue, but there's not enough content to mess it up yet.)

As of right now I'm using one CSS file that's pretty jumbled, but I think it's decipherable. They may not be there now , but I've tried putting

Code: Select all

vertical-align:top;

about every where I could think of and it still won't work.

Any idea what I'm doing wrong?

I have to say this is a little embarassing, since I build sites for others, but the truth is, I hate CSS. Tables are bulky, but at least I always know where my stuff will be. Anyway, I thought I'd take the difficult route this time and I'm failing.

Never mind. I'm using a combination of CSS and one table. It may not be proper, but I truly believe that there was no way of doing what I was trying to accomplish otherwise.

First thing I noticed is that your header div is 587 pixels high. This causes everything underneath the header to start at least 587 pixels from the top of the page. So, right outta the gate you have to position things either absolutely or relatively. Try to shorten that up a bit. Your header image is quite bit larger than the image for the body of the page. If you have the resources to re-slice your images, I would make the header image shorter and the image for the body background taller.

Item number 2.... your body content div is only 480 pixels wide while your page is 800px(I believe). That leads to a clearing issue forcing the right side content way down the page.

Here's the solution. Create a div to hold the contents of body content and column content making sure it is inside your container div and then setting the width to 100%.Then set the 2 divs inside that div setting their height to 100%, and floating them left. That will make them side by side at the same height.

Code: Select all

#content-holder {
width: 100%;
}

#content-holder #body-content {
width: 50%;
height: 100%;
float: left;
}

#content-holder #column-content {
height: 100%;
float: left;
}

Addressing those things will help you position items in your site the way you want.

Good Luck,
Scott

Thanks Scott!

For some reason, I didn't realize you could float both columns left or right. I guess it never occurred to me. Maybe I'll give this another try now.

Your welcome.

Good Luck