Forum Moderators: not2easy
The page is setup to be 750px wide, and centered on the screen. In my content area, I'm basically trying to align three elements. One is an image that is supposed to fill the left side of the content area. This image will be different on different pages, so I don't want to code any specific widths, because that will change. The image will always be 368px high, however. I want the right edge of the image to be padded by 10px so it's not too close to the text to the right of the image.
To the right of the image are two areas, one for text, which will always be 342px high, and should fill the rest of the width. (750px document - width of image - 10px padding.) Below this, aligned with the bottom of the image, should be another area that has a quarter-circle image on the right that rounds the box's edges.
Here are the styles:
#main {
width: 750px;
margin: 0px auto;
text-align: left;
border: none;
padding: 0;
}
#container {
margin: 0;
background-color: #FFFFFF;
}
#content {
height: 342px;
}
#curves {
height: 26px;
float: right;
}
Here is the code:
<div id="main">
<div id="container">
<img src="image.jpg" alt="main image" width="349" height="368" align="left">
<div id="content">
Content Here.
</div>
<div id="curves">
<img src="curve-right.gif" width="29" height="26">
</div>
</div>
</div>
Opera 7 & Netscape 7 display the above differently than IE 6. Opera puts the image on the left, but the #content box fills the entire 750x342 space (going behind the image), which means any padding I try to do doesn't work. (I don't think setting margins will work, because on a different page, the image might be 250 pixels wide, not 349.)
IE 6 displays it like a table, with the image spanning two rows, and the content and curves boxes being cells to the right of the image. IE introduces a weird space to the left of the image and between the image and the boxes on the right, though.
Does what I'm trying to do and what's happening make sense?
Thanks!
