Member Avatar for drewpark88

Hey Guys,

I am having issues in ie7 and I am not sure why. I have attached two screenshots, one in ie7 (messed up) and one in ie8 (working). My images aren't floating properly next to my text in ie7....I have even created two classes "alignleft" and "alignright" which utilize margins. Check out my screenshots that are attached.

Oh and here is sample css code I am using:

alignleft, img.alignleft {float:left; margin:0 10px 5px 0}

It's weird, it works in all new major browsers.

ie7screenshot.JPG 73.03 KB IE8Screenshot.JPG 93.52 KB
  • 2 Contributors
  • 2 Replies
  • 103 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by drewpark88

Dani AI

Generated

The fix reported by (thanks to 's clearing approach) is a common pattern: older IE deviates from modern browsers when floated elements are not properly contained by their parent. The engine can let floats overlap subsequent content unless the parent establishes its own layout context. That explains why the same HTML/CSS appears correct in newer browsers but breaks in IE7.

Quick diagnostics and things to confirm:

  • Standards mode is active (a proper DOCTYPE prevents quirks-mode layout differences). See the DOCTYPE note on MDN: DOCTYPE.
  • HTML is valid and has no unclosed tags—broken markup often produces weird float behavior.
  • The floated images are inside a block-level parent that can contain them; if not, the floats may “escape.” Read about block formatting contexts: .
  • Use dev tools or a validator to inspect computed box sizes and whether floats are being taken out of normal flow.

Alternative containment techniques (besides the pseudo-element clear approach already used here):

  • Create a block formatting context on the parent via overflow (works in most browsers and is simple):
.container {
  overflow: auto;
}
  • For older IE double-margin or float quirks, forcing the floated element to behave as inline-level can remove the doubled margin behavior:
.myfloat { display: inline; }
  • As a long-term approach, consider switching layout to flexbox/grid for modern browsers while keeping a float-based fallback for legacy UAs.

Notes and cautions: overflow can clip content or introduce scrollbars if dimensions are tight; validate changes across target browsers. When supporting IE7 specifically, test in an actual IE7 environment or a reliable emulator to confirm the chosen containment method behaves as expected. For background on floats and containment, see MDN’s float reference: float.

Recommended Answers

All 2 Replies

Member Avatar for scrappedcola

Is your text floated as well? If you could show your HTML for the image and the text (as well as the css for the text if any) you might get more help on the issue. In any case you might try either placing a div or <br> tag with style="clear:both" after floated elements. This sometimes clears up IE7's confusion with floated elements. Other soluctions include a class such as:

.clearfix {
    zoom: 1;     /* triggers hasLayout */
    } 
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

to the containing element of the floated content. The class based solution is the one I find works better and I don't have to add extraneous html. For more info check out this blog

Member Avatar for drewpark88

Nice. Thank you scrappedcola this helped a lot. It is working now : )

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.