Main field wont save his position

Question

I am actually doin a wiki page and try to make the view perfect.

My problem is the following. When i'm in editing mode everything looks fine. My menue on the left and my main on the right are on the same height, looks beautiful and SharePoint like to be my friend…

Right at the moment I click "Stop editing" SharePoint won't be my friend and change the position of my main…

As you can see on the picture I have done this width with Script Editor. This is my Script code:

<style type="text/css"> 

.ms-quicklaunchouter{ display: none; } 
.ms-core-listMenu-separatorLine{ display: none; }

</style>

<style type="text/css">
/*increase quick launch width */
#sideNavBox
{
  width:350px;
}

/*Middle Content */

#contentbox
{
width:350px
}
#MSOZone
 {
        width: 900px;      
 }
</style>

How can I fix the position of my windows?

Thanks for help:-)

Answer 1

It is because when you publish the page your java script is not getting loaded.

add below code in your script tag.

>  <script type="text/javascript">     $(document).ready(function() {
> SP.SOD.executeFunc('sp.js', 'SP.ClientContext', myDesign); });  
> function myDesign(){      // your code goes here  }  </script>

Write your logic inside the SetDesign function.

Refer to below link to add css using javascript.

add css using javascript

Answer 2

I found a second solution for this problem.

Use Inspector from Firefox (click F12) & inspect your page like this:

Now you have the div variable of this field. On my SharePoint it is called DeltaPlaceHolderMain.

The DeltaPlaceHolderMain just needs to be placed correctly. My sideNavBox has 350px width:

#sideNavBox
{
  width:350px;
}

And my DeltaPlaceHolderMain starts 200px right from my sideNavBox:

#DeltaPlaceHolderMain
{
    text-align: left;
    margin-left: 200px;
}    

Pretty cool now! :-) Thanks to you @dhruvil29 !