Forum Moderators: not2easy
The example page here has two DIVs. The left div is for navigation and is floated left. The right div is a wide image I am trying to view. The image is wider than the screen and will overflow. I am using overflow:visible to specify I want to use the bottom scrollbar to adjust the view.
When viewing wide images in IE6 or Firefox 2, the image shifts downwards and underneath my left navigation. However, it works fine IE7 and Firefox 3 beta.
I've stripped down my page to the bare bones as a demonstration of this problem. I'll post the small snippet of CSS here:
#left {
width: 20%;
float: left;
}
#right {
width: 80%;
overflow: visible;
}
I am fairly new to CSS, so I apologize in advance if this is an obvious or common issue, but I can't seem to figure it out. I am using the transitional doctype. Thank you all for your help!
Quick thought - since you are using percentages to establish widths of the divisions and the image, I assume, is fixed width in pixels, there probably is a conflict. Your divisions would have to be fixed width too. The other factor is while 20% and 80% add up to 100%, they are actually wider when you add in the default setting of the division's margins, borders and padding. This varies from browser to browser. You can either reduce the widths to say 18% and 78%, or make sure you set their margins to zero.
Marshall
Thank you for the welcome and the reply!
I tried explicitly setting the width of both divs. The left div is now set to 200px width and floated left. The right div is now set to 1300px for an image that is 1286 pixels wide. I have set the margins for both to be all 0s. However, I'm still seeing the same behavior. The image on the right is displayed underneath my left navigation.
Do you happen to have any other ideas?
Thanks!
David
Marshall
ha,I always warry about that my poor English couldn't help u,haha
I'm very happy to see that its helpful.
