2 replies [Last post]
ltrowbri
Offline
newbie
Last seen: 15 years 22 weeks ago
Joined: 2005-12-07
Posts: 5
Points: 0

Hi,

I'm working on a 2-column layout with an image. When I resize the browser window the image drops in IE. See www.ltrowbridge.com/normal/index3.htm

I want the layout to be flexible, but the image seems to be giving me problems. Any suggestions would be most helpful.

Many thanks,
ltrowbri

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 23 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Is the image floated by any

Is the image floated by any chance?

IE incorrectly encloses floated children. This is why if you look in Firefox you will see the image break out the right side of the box if you resize the window enough.

Verschwindende wrote:
  • CSS doesn't make pies

ltrowbri
Offline
newbie
Last seen: 15 years 22 weeks ago
Joined: 2005-12-07
Posts: 5
Points: 0

No, the image isn't

No, the image isn't floated.
It will do this weird drop in IE. See code below

body { margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; }

#container
{
width: 95%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 130px;
margin: 0;
border: 1px solid red;
}

#content
{
margin-left: 150px;
border-left: 1px solid gray;
padding: .3em;
}

Here's the HTML:

Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.

Subheading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

mod edit/<code> tags added/tph