Computer Science Canada

Headache: 3 cols; 3rd col not complying.
Author:  Craige [ Thu Jan 11, 2007 2:42 pm ]
Post subject:  Headache: 3 cols; 3rd col not complying.
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.
Author:  md [ Thu Jan 11, 2007 5:11 pm ]
Post subject:  RE:Headache: 3 cols; 3rd col not complying.
make all three float: left; then put then in your source in the correct order. They should then display properly.
Author:  Amailer [ Thu Jan 11, 2007 5:17 pm ]
Post subject:  RE:Headache: 3 cols; 3rd col not complying.
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)
Author:  Craige [ Fri Jan 12, 2007 1:11 pm ]
Post subject:  Re: RE:Headache: 3 cols; 3rd col not complying.
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 Sad


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.

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy