Headache: 3 cols; 3rd col not complying.

[Craige]

It seems that every time I turn around, I'm running into a XHTML/CSS bug in the sites I code. This time, the problem is with a three column site, (Nav - Content - Right Ad Bar). I can get the content to float to the right of the Nav, but I can't get the right ad bar to float next to the content. It simply wont go.

I have a wrapper, appropriately called #Wraper, and I currently have it's width set to 1100px, which is above what space is required by all three elements, so I know it's not just getting pushed down due to size restrictions. I have things set like such:

css:

#Nav {   width:145px;   padding: 10px 15px 10px 15px;   float:left;   background:#b4b4b4 url(http://rpmsound.on.ca/grad-block.jpg) repeat-x; } #Content {   width:545px;   padding: 10px 15px 10px 15px;   float:left;   background: url(http://rpmsound.on.ca/corner-block.jpg) no-repeat; } #Right {   width:215px;   text-align:center; }

Any ideas as to why I can't get the right bar to float up beside the content? I originally had it absolutely positioned, however when I saw it on a larger monitor, I realized that it's position was constant with the window, and not the wrapper. I've done this before with several other layouts, but it seems every time I start a new one, I wind up with the same problems, this being one of them. And, when I go back to look at previous layouts, I can't see what I did there that I wasn't doing on the current project.

If you can help it is greatly appreciated. This is kind of a high rush situation. I'm doing this at work(well, Co-Op), and this site needs to be complete A.S.A.P for a client. This is one of the last things that needs to be fixed.

Thanks.

[md]

make all three float: left; then put then in your source in the correct order. They should then display properly.

[Amailer]

Well, i think if you arrange it as:

HTML:

<div id="Right">asd</div> <div id="Nav">asd</div> <div id="Content">asd</div>

And add

css:

float:right;

to #Right

It should work, except on smaller layouts it will get messed :/ (since the 500+ width in the center)

[Craige]

md @ Thu Jan 11, 2007 5:11 pm wrote:

make all three float: left; then put then in your source in the correct order. They should then display properly.

Already tried that. Didn't work

Amailer @ Thu Jan 11, 2007 5:17 pm wrote:

Well, i think if you arrange it as:

HTML:

<div id="Right">asd</div> <div id="Nav">asd</div> <div id="Content">asd</div>

And add

css:

float:right;

to #Right

I'll try it.

Edit:
Yep, that worked. Thanks for that.