Question

I have a two column layout page with a Validation Summary (VS) control above the 2 columns. The VS is centered in the container above the columns, which is what I want, but I also want the different bullet points to be vertically aligned, if possible. I have tried several things, including placing the VS inside a div (inside the container div that is center aligned) with text-align:left;, but that moves the entire div to the side of the container. I have also tried making the div text-align:center; and the VS text-align:left;, but that also moves the entire block all the way to the left. I’ve also tried the same thing with a table, but no luck.
This is in Firefox by the way. I haven’t tested in other browsers, but it needs to work in FF.
Here is pic to show the messed up vertical alignment:

And here is the code for my VS control, without my alignment attempts (if more code is needed, let me know):

<div id="container">
  <asp:Label ID="lblStatus" runat="server" ForeColor="Red"></asp:Label>
  <asp:ValidationSummary ID="VS1" runat="server" CssClass="validator" ValidationGroup="theform" />
  <div id="leftCol">

Could somebody help me vertically align those bullet points in the center of the page?

Answer 1

Since bullet points are part of the list items I don’t think you will be able to align them. Why not try something like having a top column with 3 divs and place your validationsummary control in the middle one. Try this

HTML Code

<div id="container" class="container">
    <div id="top" class="top">
        <div id="topLeft" class="topLeft">
            &nbsp;
        </div>
        <div id="topMiddle" class="topMiddle">
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
        </div>
        <div id="topRight" class="topRight">
            &nbsp;
        </div>
    </div>
    <div id="bottom" class="bottom">
        <div id="bottomLeft" class="bottomLeft">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="input value" ControlToValidate="TextBox1" Text="*"></asp:RequiredFieldValidator><br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Need come input for this" ControlToValidate="TextBox2" Text="*"></asp:RequiredFieldValidator><br />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
        <div id="bottomRight" class="bottomRight">
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="please input text" ControlToValidate="TextBox3" Text="*"></asp:RequiredFieldValidator><br />
            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Where is the text?" ControlToValidate="TextBox4" Text="*"></asp:RequiredFieldValidator><br />
            <asp:Button ID="Button2" runat="server" Text="Button" />
        </div>
    </div>
</div>

CSS

.container
{
    display: block;
    width:800px;
    margin:0px;
    padding:0px;
}

.top
{
    display:inline-block;
    width:800px;
}

.bottom
{
    display:inline-block;
}

.topMiddle
{
    display:inline;
    background-color:Yellow;
    float:left; 
    width:300px;   
}

.topLeft
{
    display:inline;   
    float:left;     
    width:250px; 
}

.topRight
{
    display:inline;    
    float:left; 
    width:250px;     
}

.bottomLeft
{
    display:inline;
    width:400px;
    float:left;
    background-color:Orange;
}

.bottomRight
{
    display:inline;
    width:400px;
    float:left;
    background-color:Lime;
}