user3204017 user3204017 - 4 years ago 126
HTML Question

CSS behaving differently in IE and Chrome

I'm trying to create a small navigation menu, however IE seems to render it differently, completely messing it up.

Here's what html/css I'm using (jsfiddle renders it correctly, as does chrome):

However IE renders it like this (I omitted the bootstrap in the jsfiddle):

EDIT: I'm using IE 11

Answer Source

This is one reason why it's important to declare a width on floated elements.

Try adding width: 330px to the #navigation container.

Revised Demo 1

Of course, you can use relative units, like percentages or ems, for the width, as well. The point is you should specify a width on floated elements. Otherwise, the result may be unpredictable.


Also specify a width for the two floated child elements:

#navbar li { width: 49.5%; }

Widths by default only include the content box. Make them also account for padding and border with box-sizing: border-box:

html {  box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit;}

Adjust the spacing between top row boxes:

#projects { margin-left: .5%; }
#about { margin-right: .5%; }

Revised Demo 2

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download