dynamically positioning 3 columns.

[james438]

I have a centered div of width 66% of browser width. Inside this div are three divs labeled column 1, column 2, and column 3.

I would like the first column to float left.
The third column should float right.
The middle column should be centered between the two. All of the columns are 32% in width. That is 32% of the 66%. This should give the illusion of 2% wide space between column 1 and column 2 and another 2% wide space between column 2 and column 3.

Here is the overly complicated demo I have. As you can see it is close, but still not quite right.

[djr33]

There are other ways to line up the three divs. I don't know what's best, but you could play with a few combinations. For example, create three divs that are all float:left. The first and last are 32%, and the middle one is 36%. Then inside that middle one you can center a div that has a small border (whatever that math is) on both sides.
Or you could just use float:left on all of them and add a left-margin to two of them.

[james438]

Good thought, however you then run into the problem in half the browsers where an aggregate width of 100% is not always 100%.

[djr33]

If you want a small border between the sections, it seems like you have some room to play with it. Not sure how much that helps. Otherwise, I'm not sure what's wrong the CSS. Sorry I can't be of more help.

[james438]

No worries. This project is just a "passing the time" activity for me. traq mentioned that different browsers handle percentages differently and round values up or down or differently hence the problem we have here.

I figure that the best way to handle it is to float the right div to the right and the left div to the left and then relatively position the middle div to give the illusion that it is centered as opposed to being actually centered. If it is actually centered then the three divs which are all positioned differently seem to interact with each other poorly.

In the demo page I gave the border that peeks out to the right. I am hoping to get that missing width to be shared between the margins to the left and right of the middle div. I am sure I am not making the best sense in this paragraph.

I wish this error was not noticeable in its current format. At first I thought it was a bug in the Opera browser, but then I was convinced otherwise.

[traq]

have a look at some of the fluid layouts here on DD - this one, for example: the left and right columns are floated, and the center column has no defined width: just left and right margins that match the widths of the left and right columns.

[james438]

I think that may be the solution traq. The idea of using negative margins in percentages is somewhat foreign to me. Using negative margins in conjunction with positive widths for a total value of positive 20% just doesn't add up for me, but it does work in DD's example.

[james438]

I understand the negative margins now a little better. The middle column is actually behind the other two columns and stretches the entire width of the parent div as opposed to 65%. When I saw that I set the right and left margins of the "middle" column to 35% to create the illusion of a buffer between the three columns.

[traq]

I understand the negative margins now a little better. The middle column is actually behind the other two columns and stretches the entire width of the parent div...

exactly right.