Member Avatar for cloudedvision

I'm designing a website for a school project, and I'm having some trouble with IE7. Here's the site:

It shows fine in FF and Opera, but in IE7 the sidebar doesn't work. I can't figure it out. This project is due tomorrow, so please help me. Thanks!

Here's the coding highlights:

<div id="content">
<div id="sidebar">
<!-- Bit o' content -->
</div>
<div id="main" class="with_sidebar">
<!-- Bit o' content -->
</div>
</div>
#content {
	padding-top:100px;
}

#content #main {
}

#content #main.with_sidebar {
	margin-right:220px;
}

#sidebar {
	float:right;
	width:200px;
}
  • 1 Contributor
  • 1 Reply
  • 103 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by cloudedvision

Dani AI

Generated

IE7 often trips on float containment and Internet Explorer's old "hasLayout" behaviour. Common, reliable fixes that resolve a right-hand sidebar dropping or appearing outside its container are: ensure the page is in standards mode, validate for unclosed tags, and force the parent to contain floats (either by a clearfix or by creating a block formatting context).

Quick checklist:

  • Validate HTML and confirm a standards DOCTYPE (fixes many mysterious IE-only layout problems).
  • Look for unclosed tags or stray markup; IE is less forgiving than modern browsers.
  • Try forcing the parent container to establish a block formatting context (BFC) or give it "layout" in IE. That will usually keep a floated sidebar where it belongs.

A practical, battle-tested clearfix (adds no extra markup) is the micro clearfix. Apply the class to the container that wraps the floated columns.

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
/* IE6/7 trigger */
.clearfix {
    *zoom: 1;
}

Alternatives: setting overflow: auto (or hidden) on the parent will also contain floats but can clip visible overflow; zoom:1 is an IE-only way to trigger hasLayout and often fixes IE7 issues without affecting other browsers.

Further reading and reference material:

As later reported the issue was fixed, these steps are the usual remedies when IE7 behaves differently from Firefox/Opera.

Member Avatar for cloudedvision

Got it fixed.

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.