floating setting affected by the structure

        <p>
        We all want to express our document in a semantic way, but some time the structure of the document does affect the css. For example,
        </p>


        <pre data-sub="prettyprint:_">

        <div id="nav" style="float:left;width:200px">

        </div>
        <div id="content" style="margin-left:200px">
        ...
        </div>

        </pre>


        <p>
        If we change the structure of the document, we put nav beind content, we need to do more styling. And it is not straight forward. like you need to float both element, and you need to use negative margin for the nav item. I think the performance is slower. The only questionable benifit, it put more emphasis on the content element.
        <p>


        <pre data-sub="prettyprint:_">
        <div id="content" style="float:left;margin-left:200px;">

        </div>

        <div id="nav" style="float:left;width:200px;margin-left:-100%">

        </div>




        </pre>