asked on

best way to have 3 boxes (divs) within fixed width div

Hi,

I am working on my first attemp to go tableless. Actually it is my second attempt but the first was a really easy layout.

I got code from a variety of sites with all the hacks and fixes (this is all very scary to me).

For one layout, I have a header that is liquid, but below I have a fixed with div of 780px, centered. Inside this div, I want to have boxes for various "featured products". I'd like to have a couple of rows with 3 boxes across, evenly spaced, same width. And it need to be as cross browser as possible.

What's the best way to do this? It seems that three columns create a number of problems with various browsers.

I am so tempted to just throw a table in there!

Thanks for any help.

InteractiveMind

Hey Alpineer, :-)

Creating columns without tables is normally the first brick wall that CSS learners hit. I am still no pro, but I create all my sites tableless -- something which at one point, I never thought would happen. ;-)

The method that I use for columns, with div elements, is as follows (for example):

<div style="margin:0px auto 0px auto; width:600px;">
<div style="margin:0px; width:200px; background-color:red; float:left;">
Red
</div>
<div style="margin:0px; width:200px; background-color:blue; float:left;">
Blue
</div>
<div style="margin:0px; width:200px; background-color:green; float:right;">
Green
</div>
</div>

You simply create a container like element around the columns, and use the float tag.. This also allows you to center the columns - which many people have difficulty doing. ^_^

I hope that helps mate.

Good luck,
>> IM

InteractiveMind

So, give this HTML code a go - just as a demonstration:

<html>
<head>
<title>CSS Example - Columns</title>
</head>
<body>
<center>
<div style="margin:0px auto 0px auto; width:600px;">
<div style="margin:0px; width:200px; background-color:red; float:left; color:#ffffff;">
Red
</div>
<div style="margin:0px; width:200px; background-color:blue; float:left; color:#ffffff;">
Blue
</div>
<div style="margin:0px; width:200px; background-color:green; float:right; color:#ffffff;">
Green
</div>
</div>
</center>
</body>
</html>

You could then, obviously, just create a container through a style sheet, and use that.. e.g:

/** Inside CSS Stylesheet **/

div#container
{
margin:0px auto 0px auto;
}

Then you'd just use a div id tag as a container. But don't forget to add the "float:left/right;" bit to the columns (it doesn't really matter which way, as long as the container is the same width as the sum of all the columns width). Also, you need to declare a width for the container - but seeing as you'll probably use the container a lot in your code, you may as well declare it in the tag, rather than loads of CSS elements. So, an example:

<div id="container" style="width:400px;">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>

Obviously, you'd need to declare "left" and "right" in some CSS source.. e.g. Stylesheet.

alpineer

ASKER

Thanks.

So is that really cross browser. I thought you had to put in a bunch of strange "fixes" for older nn, opera, the mac, etc.

InteractiveMind

I've seen very similar code used many times before, by pros.. and I have failed to yet find a browser that it does not work on. What you must remember however, is that not *all* browsers 'being used'/'in existance', support *any* CSS at all! lol.
So, target the most popularly used browsers - such as IE 5+ and NN #+, etc..

I'm confident that that's the most compatible, yet easy, method of using only CSS to create columns. I actually recall seeing the number 2 CSS expert use the tags used - and I know that he's the man, when it comes to compatibility ^_^

HTH
>> IM

InteractiveMind

Another note: In most cases, anyone that is going to go to your site - will have a modern browser. And I'm confident that all of the latest browsers support that method.
For example, if you're creating an IT website, then 99.9% of your visitors will be into computers, and thus, almost certainly have a modern browser.

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

alpineer

ASKER

Dinosaur!

you are the winner. That's what I was looking for. I knew it wasn't so easy. I had actually come across some of those sites today but it is great to have an entire list to compare techniques.

I think I will try the flanking method. That should work for my layout, and without creating havoc on what I have already done.

Thanks.

InteractiveMind - I don't think it is just a problem with older browsers, it is all the flavors for various platforms and some newer browsers too. I do understand that it doesn't seem worth the trouble when you look at browser stats, but since someone has gone to the trouble of figuring out all the hacks and fixes, we might as well use them.

Thanks to both of you.

alpineer

ASKER

Can I sneak in just one question, or rather a clarification?

Are all those fixes necessary because there are 3 columns? I mean, is it all much simpler with just 2 columns?

COBOLdinosaur

The hacks, workaround and tweaks, are not because of any given layout format, but because of differences in how the browser manufactures have support and/or implement the parts of the CSS specifications. Mozilla and Firefox have a very high level of compliance, but IE is defective in many ways. Opera is quirky, and the browsers on a Mac sometimes seem to be from another universe. One way to reduce the differences is to use a strict doctype. I normally use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

which is the most robust in the current enviroment.

Glad we could help. Thanks for the A. :^)

Cd&