Home/ Questions/Q 908913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T16:47:33+00:00

Please note, I am a beginner when it comes to web page coding so

  • 0

Please note, I am a beginner when it comes to web page coding so please go easy on me!

I have a simple master page that contains a banner at the top and an ASP menu control down the left hand side. I want the page to be be centre justified and so I have div “outer_div” with the CSS attributes: text-align:center margin-left:auto, margin-right:auto.

This “outer_div” contains the “menu” div (containing the ASP menu control) which has CSS attributes: text-align:left. However I cannot get the menu control to position at the left of the outer div, I only seem to be able to get it at the extreme left of the screen or bang in the centre.

I’ve pasted the .master and the CSS believe. I guess that I’ve made a simple mistake – but it’s not proving simple to find it! Any help greatly appreciated,

Rob…

<body>
<div id="outer_div" class="bxcen cenx">
    <form id="form1" runat="server">
    <div id="header">
        <asp:Label ID="lblHeader" runat="server" CssClass="header_image" Width="1024px" Height="121px"></asp:Label>
        <div id="branding">
            <span id="companyName" class="redText">Arcadia</span>&nbsp;<br />
            <span id="slogan">Reference Data Load Manager</span>
        </div>
    </div>
    <div id="divTopPanel">
        <asp:Label ID="lblPageName" runat="server" CssClass="top_panel" Width="1024" Height="30"></asp:Label>
    </div>
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    <div id="holder">
        <div id="menu" class="left_align">
            <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2"
                Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" Orientation="Vertical"
                StaticSubMenuIndent="10px" StaticDisplayLevels="5">
                <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
                <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <DynamicMenuStyle BackColor="#B5C7DE" />
                <DynamicSelectedStyle BackColor="#507CD1" />
                <StaticHoverStyle BackColor="#284E98" ForeColor="White" />
                <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
                <StaticSelectedStyle BackColor="#507CD1" />
            </asp:Menu>
        </div>
        <div id="content" align="left">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</div>

and now the css…

body
{
    font-family: Verdana;
    font-size: small;
    background-color: #808080;
}

#standard
{
    font-family: Verdana;
    font-size: small;
    background-color: #FFCC99;
}


#menu {
    background-color: #FDA343;
    position:relative;
    left:0px;
    top:0;
    width: 161px;
}

#content
{
    width: 600px;
    float: left;
    text-align: left;
}

.button
{
    font-family: Verdana;
    font-size: small;
    background-color: #6699FF;
    color: #FFFFFF;
}

.top_panel
{
    background-color: #FDA343;
    font-family: Tahoma;
    font-size: large;
    text-align: center;
}

.header_image
{
    background-color: #B5C7DE;
    font-family: Tahoma;
    font-size: large;
    text-align: left;
    vertical-align: middle;
    background-image: url('Images/SmallOrangeRig.jpg');
    color: #FFFFFF;
}

.cenx
{
    text-align: center;
}
.ceni
{
    clear: both;
}
.bxcen
{
    margin-left: auto;
    margin-right: auto;
    border: none;
    padding: 0;
}

.left_align
{
    text-align:left;
}


#branding {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1000;
    text-align: left;
    color: #9f0f0e;
    font-family: "Arial", Courier, monospace;
}

#companyName {
    color: #FFF9E9;
    font-size: 40px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    My CSS was way over complicated. I picked up a great book called “Getting StartED with CSS” by David Powers. Chapter 11 gives a sample CSS for a simple two column layout page. From this, I was able to build just what I needed.

    The basic css is:

    #wrapper {
  width: 760px;
  margin: 0 auto;
}
#sidebar {
  width: 220px;
  padding: 10px;
  float: left;
}
#mainContent {
  margin-left: 240px;
}

    The thing that makes the real difference for my problem is float.

    • 0