Customize Page layout in Edit Mode

sometimes you want to hide certain aesthetic elements on your page when it's in Edit mode, for example i have an absolutely transparent grid that really clutters up my interface and has nothing to do with content, so i want to hide it when an editor is modify the page.

also i have two panels that are floated next to each other creating more clutter, and I'd like them to appear vertically in edit mode, well what i can do is use a Publishing web control EditModePanel To create an edit mode only script that would make my changes for me.

<PublishingWebControls:EditModePanel runat="server" >
    <script type="text/javascript">
 
            document.getElementById("grid").style.display = "none";
            document.getElementById("ctp-leftPanel").style.float ="none";
            document.getElementById("ctp-leftPanel").style.width ="100%";
            document.getElementById("ctp-rightPanel").style.float ="none";
            document.getElementById("ctp-rightPanel").style.width ="100%";
    </script>
</PublishingWebControls:EditModePanel>