Hi

 

I am a complete novice to web design and have a problem with a web site I am trying to create. The home page appears to work fine until I reduce the size of it - using Ctrl and the mouse scroll key. When it gets under a certain size, the right-hand column jumps under the left-hand column, which is pretty annoying. Any solutions/fixes or advice on coding improvements would be gratefully received.

 

Many thanks, Mark.

 

http://www.thefunkypiglets.com

I think you've fixed it.

 

Your #leftcolumn , #content and #rightcolumn divs are all floated, so when the window width isn't enough for them all, one or two would go down to a lower line if they were without a fixed width wrapper.

 

You have a #wrapper with a fixed width: 922px which seems to be enough to contain all three, so none goes down to a lower line in my browsers.

I thought the same as Wickham, but I gave it a go and sure enough the right column does jump down eventually. (At different times in Chrome and Firefox).

 

Strange. I tried setting overflow:hidden to #wrapper but that had no effect. I did try other things - without success though.

 

Edit: One thing you do need to do is put:

<div class="clear"></div>

Right before:

</div> <!-- End Wrapper -->

I forgot to mention this earlier whilst I was trying to fix the issue. You already have a .clear class.

I can't make the right column drop.

 

I checked your total widths:-

195+5+10+10+2 +456+5+10+10+2 +195+10+10+2 = 922px, same as wrapper.

 

To be safe, allow 1px spare so adjust width of wrapper to 923 or reduce one of the three divs. That may help.

Thanks Wickham for explaining why the problem occurs. The only way I can temporarily solve the problem in IE8, is to adjust the #wrapper to 980px, which obviously throws things off-centre. Firefox is, as usual, much more tolerant.

 

Thanks Andy for the advice regarding the "clear" tag.

 

If you have any other ideas, I would be really grateful as I have not got a clue!

You've made the temporary fix now using 936px width wrapper. Narrow that width as far as possible without the bug occurring would be my only suggestion.

You've made the temporary fix now using 936px width wrapper. Narrow that width as far as possible without the bug occurring would be my only suggestion.

 

Thanks Andyl. I played with the width settings and although 936px still causes the problem in IE when the wrapper is made really small, I found this was the optimum size. However, the wrapper appears to be slightly off-centre now. Sure no one will notice though.