I am trying to setup a system of nested DIV tags and I get a strange problem. When loaded in the browser (Tested in Safari, Chrome & FF on OS X) the two innermost divs are rendered inside one another.
See this fiddle: http://jsfiddle.net/m48wG/
The DIVs in question are the lightest gray ones, with the class "l4". In the sourcecode they look like this:
<div class="box box-horizontal l4" style="width:100px;height:100px;"></dix>
<div class="box box-horizontal l4" style="width:100px;height:100px;margin-left:3px;"></dix>
But inspecting the elements in the browser inspectors gives this:
<div class="box box-horizontal l4" style="width:100px;height:100px;">
<div class="box box-horizontal l4" style="width:100px;height:100px;margin-left:3px;"></dix>
</dix>
Any ideas what is causing this and how it can be fixed?
Thanks
EDIT: HAHA.. Sorry, my bad! Thank you guys, I totally didn't see that one.. Might need to go see an eyedoctor ;)