The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

If the photo is to go alongside the menu bar and nav and is never going to be any higher than the left side then you can just absolutely place it to the right and forget about it.

If however the photo is higher then the left side then it needs to be in the flow so you will have to float it so that it goes alongside and then clear it for following content. Remember that floats must come first in the html before the content they wrap around.

I notice you have made an error in your calculations and your menu should be 150px high and not 100px. Mozilla will crop the size to 100px whereas ie will let it expand.

If the photo is to go alongside the menu bar and nav and is never going to be any higher than the left side then you can just absolutely place it to the right and forget about it.

If however the photo is higher then the left side then it needs to be in the flow so you will have to float it so that it goes alongside and then clear it for following content. Remember that floats must come first in the html before the content they wrap around.

I notice you have made an error in your calculations and your menu should be 150px high and not 100px. Mozilla will crop the size to 100px whereas ie will let it expand.

The first is the border that you have given to each div which means the elements width will be increased by 2 pixels.

This means that in ie your nav gets pushed wider because its inner is 120px + 2px for the borders while its outer is also specifed at 120px. Moz on the other hand won't expand an element which is why the layout doesn' break in moz.

The second ie problem is that ie adds 3 pixels of space to content alongside a float and where space is tight there is nowhere to go so an element must drop.

The only solution is to cut off 3 pixels from the float using a negative margin which won't affect the size because ie adds it back on again to make the correct size.

well that makes perfect sense and it works great. thank you allot.
Does the book you guys have on tableless layouts get into semi-complex fluid layouts ? and some of these little fix's ?
agian you are the master.