?
Solved

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

Posted on 2005-02-24
9
Medium Priority
?
327 Views
Last Modified: 2008-11-26
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.  
 
0
Comment
Question by:alpineer
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
9 Comments
 
LVL 25

Expert Comment

by:InteractiveMind
ID: 13393431
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
0
 
LVL 25

Expert Comment

by:InteractiveMind
ID: 13393539
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.
0
 

Author Comment

by:alpineer
ID: 13394057
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.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Expert Comment

by:InteractiveMind
ID: 13394292
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
0
 
LVL 25

Expert Comment

by:InteractiveMind
ID: 13394310
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.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 13394915
You will find the gamut of approaches to three column layout here:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Cd&
0
 

Author Comment

by:alpineer
ID: 13395067
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.
0
 

Author Comment

by:alpineer
ID: 13395234
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?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13395415
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&
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month8 days, 10 hours left to enroll

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question