Question

this is my first time on posting so if I have done anything please point it out to me 🙂

The image will show that the orange colored div does not extend to the entire page. I have no idea what’s wrong here.

Code for masterpage css:

<style type="text/css">

    .li
    {
        height: 180px;
    }

    .productlist li
    {
        display: inline;
        float: left;
    }
    #enlarge
    {
        height: 50px;
        width: 400px;
    }
    .newStyle1
    {
        text-align: center;
    }
</style>

Code for the div in question:

            <div style="height: 387px; background-color: #C0C0C0;">
<div style="width: 737px; padding-bottom: 10px;"><asp:Image ID="Image1" ImageUrl ="~/Images/Logo.png" 
        runat = "server" Width="137px" />
    <div style="float: right; width: 241px; position: absolute; top: 19px; left: 503px; bottom: 528px;">
        <img alt="" /> </div></div>
    <div style="height: 548px; float: left; width: 142px;">

        <asp:Menu ID="Menu1" runat="server">
            <Items>
                <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
                <asp:MenuItem Text="Online Selection" Value="Online Selection"></asp:MenuItem>
                <asp:MenuItem Text="Online Registration" Value="Online Registration">
                </asp:MenuItem>
                <asp:MenuItem Text="Change Request" Value="Change Request"></asp:MenuItem>
                <asp:MenuItem Text="Event Schedules" Value="Event Schedules"></asp:MenuItem>
                <asp:MenuItem Text="Diploma Plus" Value="Diploma Plus"></asp:MenuItem>
                <asp:MenuItem Text="Contacts" Value="Contacts"></asp:MenuItem>
            </Items>
        </asp:Menu>

        </div>
    <div style="height: 20px; width: 595px">


        <div id = "words" style="background-color: #FF9900;">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    </div>


</div>

Answer 1

There is most likely some element surrounding the <div id=”words” element that is constraining the width. Right-click, select ‘inspect-element’ in Google Chrome may shed some light.