override Master Page CSS div width in Child Page

Question

I've set a specific width to the body div in my Master Page and I want to change that in a Child Page that belongs to the Master Page. Is this possible? I've been searching and I think what I need is javascript.

I haven't used javascript before though, but here's what I've tried:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

    <script type="text/javascript">
      {
            document.getElementById("pagediv").style.width = "200px";
        }
    </script>

</asp:Content>

Answer 1

You don't have to use JavaScript. You can also use CSS and have this in your content placeholder.

<style>
    #pagediv { width: 200px !important; }
</style>

Answer 2

Create a property in your masterpage called BodyWidth

Then in your output use that for the div width

<div style="width:<%= BodyWidth %>">

Then in any child page you can override this width using something like the following in Page_Load.

((MyMaster)Page.MasterPage).BodyWidth = "300px";

Avoids using javascript then for overriding the value.

Alternatively you could use the same code but to set a style class, which would be a better way - but this depends how different your widths are on each page.