Member Avatar for FBG

I'm stuck with this problem for a few hours now and I'm not able to solve it.
When I view my website in google chrome everything is just as I want it: the elements in the two floating sidebars left and right are on exactly the same height and respond to margin, padding and other commands.

When I view my page with Internet Explorer, the elements in the floating sidebars are no longer on the same height. The left element is below the main column and the right sidebar and doesn't respond to any command: margin-top, padding, etc. doesn't work. I even tried to copy the layout from the right sidebar to the left one, but still the problem remains. After that, I changed the margins in the elements in the sidebars, but still nothing! The element in the left floating sidebar just remains below the elements in the main column and the right floating sidebar and I can't change it.

This problem only occurs in Internet Explorer. I already looked up the solutions against specefic IE problems, but I wasn't able to find a solution. I hope someone can help me with this very annoying problem. Thank you in advance!

sidebars.jpg 7.11 KB
  • 2 Contributors
  • 3 Replies
  • 128 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by FBG

Dani AI

Generated

This is a fairly common IE symptom: the browser is reacting to a small difference in markup or a legacy CSS rule (often left in by templating tools like Dreamweaver) and rendering the floats differently. ’s fix — removing the premade layout — is a good confirmation that the problem was coming from hidden markup or CSS the template added. ’s absolute-position idea will force alignment, but it takes elements out of the normal flow and usually breaks flexible/responsive layouts, so prefer the fixes below.

Quick checklist to isolate the cause:

  • Confirm a standards DOCTYPE so IE isn’t in quirks mode.
  • Validate HTML to catch unclosed tags or stray elements that shift flow.
  • Inspect computed styles in IE Dev Tools for unexpected clear, position, top, margin or display values.
  • Search the template CSS for IE-only rules or conditional-commented CSS that affect the left column.
  • Test by removing the template wrapper, then reintroduce pieces one at a time to find the culprit.

Small, commonly useful CSS fixes to try (apply to the floated element or its parent):

/* fixes IE6/7 double-margin on floated elements */
.sidebar { float:left; display:inline; }
/* gives many buggy IE elements a proper layout context */
.sidebar { zoom:1; }
/* creates a block formatting context (can prevent some collapse/float issues) */
.container { overflow:auto; } /* beware: can clip content if size is tight */

Practical debugging flow: strip the premade template until you have only the three columns, then add template CSS rules back one at a time. Use temporary borders/backgrounds to see exact box sizes. If supporting modern browsers only, redesigning the layout with flexbox or grid eliminates most float quirks.

Recommended Answers

All 3 Replies

Member Avatar for ciint

Use absolute position and avoid floating position at that your problem situation.

Member Avatar for FBG

I don't want to use absolute positions, because it ruins my layout. It should be possible to align the floating sidebars. I just can't explain it: how can it be, that when the code for the right sidebar is exactly the same, the content in the left sidebar remains a few px lower in Internet Explorer (see the picture I added). It's just a little difference, but I can't fix it.

Member Avatar for FBG

Solved the problem myself. I used a basic 2 column layout from dreamweaver and later added a third. Their was nothing in the basic code that should have influenced the height of the columns, but it did in Internet Explorer. After I removed all the elements from the premade layout, the problem was solved :)

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.