Topic: CSS Box Model help (Page 1 of 1)

Howdy,

I'm doing my first site using css for positioning. Unfortunately, I've hit a wall. Take a look at what I've got so far:
http://www.flavored-air.com/dave/

The problem is, I want the left column and the right column to stay the same length, no matter how much or how little data is in each side. I also want to keep the CSS valid. Can anyone help?

Thanks!

Dave

I've never seen a successful CSS solution to the 'make these columns equal length' problem.

As an alternative (and one I think is just outstanding), consider using a background image. If you know your columns are going to be a certain width, simply make a solid color image of the appropriate width and use that as the background image of your body.

Check out Faux Columns at A List Apart for an excellent explanation. Come back and show us what you got or if you have any more questions.

Thanks for the suggestion, mobrul.

I just implenented the faux fix, the results are at:
http://www.flavored-air.com/dave/index2.html

I've tested it in IE6 Win, Mozilla 1.5 Win, and Opera 7.23, and will check it with Safari and IE 5 Mac tonight.

The hack works for IE and Opera, but not with Mozilla. Any ideas about how to fix that particular snag?

Thanks!

Perhaps the writer of that article did not properly explain the concept.
Your example does not reflect what I got out of the article.

Do not think small (that thin gray line down your page...) think BIG!
The body background should be that gray color while the body background image should be the two white columns with a thin transparent section in the middle(to let the bg gray shine through). The bg image should be 790px wide!

Get rid of the wrapper div. Make the two content divs transparent.

Don't worry about that header trouble just yet. Let's start simple. Just get those two columns working this weekend and then come back. We'll fix up your header on Monday.



[This message has been edited by mobrul (edited 02-28-2004).]

I've had lots of alignment issues with using that method as it's not pixel perfect (at least not in IE6). Here's what I do:

Create a containing <div> to hold both the columns. Foat one of them however you fancy, left/right dun really matter much, the choice here is usualy made based on how the page renders without CSS as one column will render above or below the other. But don't float both of them, that can lead to issues.

Inside that containing <div>, create a footer element (be it a <div> or some other block level element) , you can leave this blank but 9 times out of 10 you'll have something you'll want to put in here anyways. I use the term "footer" loosly here, as any block level element appearing under the columns but insider the containing <div> will do.

This forces the backgorund of the containing <div> to stretch past both columns to the bottom of the footer (you don't need this in IE, but in Mozilla and Opera the backgorund of the containing div will be cut way short withough it), so you can easily set a background image or color here (on the containing div), instead of setting it on the body, which is what can cause alignment issues if you need pixel perfect control.

I also think this is also a slightly more semantic way of doing things, unless you aren't putting any information in that 'footer' element.

See if this discussion helps any with getting the columns to line up..........

Later,

C:\


~Binary is best~

Okay. Whew. After going through all of your suggestions, going through the other threads here, and at a few other places, I've finally got it to work.
http://www.flavored-air.com/dave/new.html

It works in IE 6 win, Mozilla 1.5 win, and Opera 7 win. I haven't tested it in Safari or IE Mac yet, but I'm pretty sure it'll work.

My only issue is that on the IE 6 win version, the text in the "rightside" is odd. It's pushed down a bit and seems to be padded more on the left. But only the first paragraph of it. Any thoughts?