I working on a two column page and have floated the "navbar" on the left. The text content does not react the same in FF and IE6 and I can't figure out where I went wrong and could use some guidance.

Here is the page... http://www.suzannericklin.com/biography.html

Thanks
pk

pk,

I think the issue is the way IE handles the box model. To get things to work, here is what I do.

Like you, I would float the first column left using float:left; and set the width as you did with width:200px; then I would also make #textcontainer have a float:left: and remove the margin-left:200px;

Now comes the fun.

#maincontainer {
width:700px;
margin-left:auto;
margin-right:auto;
}

You have everything in a container that is 700px wide, and you have a 200px and 500px column. For that to work, you need to set #maincontainer margin and padding to 0 and be sure your margins and paddings don't make your two columns wider than your maincontainer.

One trick I use is to add a background color to the maincontainer and different color for each column. That will give you a visual of the width.

Part of your problem is that you need to float both columns. So give that a run and let us know how it works out.

Thanks bill. I made the changes. I also reduced the size of the #textcontainer to make sure there was no overlap. Instead of background colors I used borders. I left these on the page for now

Thanks for your help
pk

pk,

Borders work great, just something to let you see what is happening. You did not say what version of IE was giving you a problem, so let me suggest you check with IE 6 as it will be more difficult to get correct than IE7. I have a site with three columns, and thought I was finished, when I got a call asking why the third column was below the other columns. I had to adjust the width of the three columns (they have to be the same width) until all three fit when viewed with IE6.

So I have to re-design the page so the nabar is the same width as the text?

thanks
pk

The problem is FF does show correctly. IE6 does.

pk

oops!

The problem is FF does show correctly. IE6 does show correctly

pk

pk,

position:relative;top:0px;
clear:both;

Try removing both of these from your #textcontainer. The position should be relative top without a specific style to do that. Clear:both clears your float.

The interesting thing is that the first time I looked with FF3, it looked correct.

Something else I noticed is about line 120 and reads:
<img src="abouttherapy-top.jpg" width="690" height="156" alt="Abouth Therapy birds on the shore" border="0" align="" /> Notice that the align="" is blank, and align is a depreciated code that may not continue to be supported by browsers. You may want to check the spelling in the alt tag.

The page looks nice.

Thanks bill. I took out the code you suggested and that did the trick! Someday I will be able to solve stuff like this but for now, I really appreciate your help and guidance.

Thanks
pk

pk,

I like your tag "... so much to learn!!"

I am always learning something new here and I just pass on what I have learned. Stick with it, and ask questions and very soon you will find that you know a lot, and of course, this is the information age.