right column wont float right in firefox 2.0!

Hi.

I am in the progress of making a 2 column website. The right column is the main content of my page. All my pages are working perfectly besides my index page. The right column jumps down under the left column no matter what I do. I have tried widths, margins, paddings, everything! Nothing will work. Please help!


the main content of the page is basically 2 columns within a container div. the column to the left has 2 graphics one right next to the other, and the column to the right is enclosed in the column to the left and has two graphics, one on top of the other.


This is my html: It is part of a template, if you need more code please let me know.

<div id="rightcolumn">


<!-- InstanceBeginEditable name="body" -->
<div id="indexcontainer">
<div id="indexgraphics">
<img src="http://www.thejefonline.com/site/images/links400x100.gif" />
<img src="http://www.thejefonline.com/site/images/JEF_index_image_300x400_V2.gif" /> </div>
<div id="eventsindex">
<a href="http://www.thejefonline.com/site/events.html#study"> <img src="http://www.thejefonline.com/site/images/study-index.gif" border="o" /> </a>
<div id="challah">
<a href="http://www.thejefonline.com/site/events.html#challah"><img src="http://www.thejefonline.com/site/images/challah-index.gif" border="0" /></a> </div>
</div>

</div>
<!-- InstanceEndEditable -->

</div>

This is my CSS:
#wrapper {
width: 865px;
border: 0px solid #000033;
margin-left:auto;
margin-right:auto;
}


#header {
width: 800px;
float: left;
padding: 10px;
padding-bottom:0;
border: 0px solid #ccc;
height: 150px;
margin: 10px 0px 5px 0px;
clear: both;
}


#indexcontainer

{
margin-left:0px;
padding-left:0px;
padding-right:0px;
float: right;
}

#indexgraphics
{
float:left;
}

#challah
{
padding-top:3px;
}

#eventsindex
{
padding-bottom: 2px;
padding-left:2px;
float:right;
border:0px;
}

 

I don't see the code for rightcolumn? It would be much better if you can provide a link to the page.

 

the link to my page is http://thejefonline.com/site/index.html

My right column is my main content, which is the code i inserted.

Thanks for your help!

 

Your code should be like this:

#rightcolumn {
	float:right;
        [B]width: 620px;[/B]
	padding-top: 10px;
 }

Code (markup):

also your menu doesn't display well in IE6 there are a lot of gaps, I suggest you just use this code:

#navcontainer li{
font-family:Trebuchet MS, Arial, sans-serif;}

Code (markup):

You don't really need the other code because you're mainly styling #navcontainer a.

 

Thank you so much! both things worked!
I still don't understand why I had to make the width wider. Originally it was 610 pixels, which I thought was to wide, and I kept making it narrower until I just tried taking out the width. That was when you saw it. I would love to understand, I'm still new at this, and always trying to learn.

I also have one more question, my image at the top of my left nav has a space between the image and the navigation buttons. I originally had a div there that took care of this problem, but when I validated my code it said I was not allowed to have a div in an li. Is there any way to get that space to go away without having a div?


Thank you again!
RB

 

I didn't see the original code, but off-hand I couldn't say why a width fixed it (since you had one earlier). I do know that when you have no width on a float, what's supposed to happen is the float is supposed to shrink-wrap its contents. Every browser seems to do this differently. IE makes the float very wide-- likely too wide in your case. Other browsers aren't sure what to do with long lines of text-- sometimes they just let the text get as wide as possible, but then wraps it if something stops it (the left float on your page). If a width had been set on the text inside the right float then in the modern browsers that should have been the largest possible width for the float. If smaller widths made it not work, then I wonder if there was a typo??

The image:
It looks a little big for it, but possibly that space is the default extra space browsers give images on the bottom. Inlines have space at the bottom because they're expected to have text, and text has dangly thingies (decenders).

You could try
li img {
vertical-align: bottom;
}

Setting the image to a display: block would also work (if this was the problem).

I better idea, I think, is to not use an LI to hold an HTML image (since the image is purely decorational and is not a menu choice or anything). Instead, have a class on the top and bottom li's (you have id's on them now, not sure if that's for something else?) and give the top one some top padding and the bottom one some bottom padding and set the images as backgrounds.

<ul id="navlist">
<li [b]class="top"[/b]><a href="http://www.thejefonline.com/site/events.html#bbq">BBQ and Game Show</a></li>
<li><a href="http://www.thejefonline.com/site/events.html#wine">Wine and Cheese Event</a></li>

<li><a href="http://www.thejefonline.com/site/events.html#lunch">Lunch and Learn</a></li>
<li><a href="http://www.thejefonline.com/site/events.html#sushi">Sushi-Champagne Event</a></li>
<li><a href="http://www.thejefonline.com/site/events.html#challah">Challah Baking &amp; Tzitzit Making </a></li>
<li><a href="http://www.thejefonline.com/site/events.html#kumzitz">Kumzitz</a></li>
<li><a href="http://www.thejefonline.com/site/events.html#study">Personalized Study Sessions</a></li>
<li><a href="http://www.thejefonline.com/site/events.html#bagels">Bagels, Lox, and Learning</a></li>
<li><a href="http://www.thejefonline.com/site/events.html#ipod">Free Ipod! </a></li>
<li><a href="http://www.thejefonline.com/site/events.html#dougies">Dougie's Learning Program</a></li>

<li><a href="http://www.thejefonline.com/site/events.html#carlebach">Carlebach Kabbalat Shabbat</a></li>
<li [b]class="bottom"[/b]><a href="http://www.thejefonline.com/site/esplanade.html">@ The Esplanade</a></li>
</ul>

Code (markup):

Glorie I have a quesiton:

#navcontainer li{
font-family:Trebuchet MS, Arial, sans-serif;}

Code (markup):

This was for IE6? Not IE7?

I ask because when IE7 came out, lots of people trying to make menus got a staircase effect in IE7. deathshadow started saying by default
li {
display: inline;
}

just to say something to IE7, which seemed to do the trick. The a's were usually floated so it didn't matter. I use this to this day, but I never thought of using it for IE6. (sorry I didn't see his site before he changed it in IE6) so, what does your declaration do?

 

display:inline actually does the trick when IE gets the extra paddings/margins on <li> but in this case, the one causing the problem was the padding specified by rb317 for <li> which wasn't really needed. Just taking those off fixed it for IE. The bug wasn't really there, it was just his code messing it up for IE6 (so I just removed those). Btw, didn't get a chance to see this in IE7.

 

Ah okay. The display: inline thing I'm talking about is more like, just say something, anything harmless, and IE goes back to normal.

Like, when trying to get a hover even to make a span appear that's been pushed off-screen, IE6 needs a "trigger" all by itself:
/*for IE6 but not hidden from others*/
thing:hover {
ummm, something, uh, visibility: visible! or uh, font-weight: bold!
}
thing:hover {
actual hover stuff to happen for all the other browsers;
}

 

Thanks for the help about the left nav bar. All is good now .

RB