Centering Content and Footer Problems

HTML & CSS
1

Hello everyone and thanks for your help in advance. I’m developing a login page and am having two problems. First, I have a user name and password textboxes inside of a <ul> that I want to horizontally and vertically align within a center panel. Second, I have a footer div that displays at the bottom of the page in IE/Edge, but drifts upward in Firefox. The HTML looks like:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="/Styles/KidsMedicalCareFlex.css" rel="stylesheet" type="text/css" /> 
    
</head>
<body>
    <div class="pagewrap">
        <!-- Begin Header -->
        <div class="header">
            <img src="/images/kids_logo_110.jpg" class="logo" />
            <h1>
                Diana McLaughlin, M.D., F.A.A.P.<br />
                Kids' Medical Care
                <span class="address"><br />2336 Immokalee Road, Naples, FL  34110</span>
            </h1>
            <p>
                Phone:  <a href="tel:12395918481" class="telephone">(239) 591-8481</a><br>
                Fax:  (239) 596-0212
            </p>
        </div>
        <!-- End Header -->
        <div class="main">
            

    <form action="/auth/userlogin" method="post">
        <input id="ReturnUrl" name="ReturnUrl" type="hidden" value=/ />
        <div id="divmain">
            <div id="divlogin" style="height:  100%; vertical-align:  middle; margin: 0 auto; width:  100%;">
                <ul id="uluserlogin">
                    <li>
                        <label id="lblusername" for="txtusername">User Name:</label>
                        <input id="Email" name="Email" type="text" autocomplete="off" />
                    </li>
                    <li>
                        <label id="lblpassword" for="txtpassword">Password:</label>
                        <input id="Password" name="Password" type="password" autocomplete="off" />
                    </li>
                    <li>
                        <input type="submit" value="Log In" />
                    </li>
                </ul>
            </div>            
        </div>
    </form>


        </div>
        <!-- Begin Footer -->
        <div id="divfooter" class="divfooter" itemscope itemtype="http://schema.org/Physician">
            <div id="divfootername" itemprop="name">Diana McLaughlin, M.D., P.A. - Kids' Medical Care</div>
            <div itemprop="description"> Pediatrics and Adolescent Medicine</div>
            <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                <div itemprop="streetAddress">2336 Immokalee Road</div>
                <div>
                    <span itemprop="addressLocality">Naples,</span>
                    <span itemprop="addressRegion">FL</span>
                    <span itemprop="postalCode">34110</span>
                </div>
                <div itemprop="telephone">Phone:  239-591-8481</div>
            </div>
        </div>
        <!-- End Footer -->
    </div>
</body>
</html>

Stylesheet looks like:

h1, h2, p {
	margin:0 0 1em;
    font-size:  2em;
    display:  inline-block;
}
html, body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	background:  #DE6700 url(../images/bg.jpg) repeat-y scroll 50% top;
	margin: 0 auto;
}
.pagewrap {
	margin: 0 10px;
	max-width:  1020px;
	background-color:  white;
	min-height:100%;
}
.header, .main {
	padding:10px;
}
.telephone{
    color: #0000EE;
}
.telephone:visited{
    color: #0000EE;
}

@media only screen and (max-width: 768px) {

    h1, h2, p {
	margin:0 0 1em;
    font-size:  1em;
}
    /*begin header*/
    .header h1 {
	    font-family:  'Comic Sans MS';
	    color:  teal;
	    font-size: 1em;
	    margin:0 1em 1em 0;
    }
    .header p {
	    font-family:  'Comic Sans MS';
	    color:  teal;
	    font-size: 1em;
	    margin:0 0 1em;
        text-align:  right;
    }
    .logo{
        width:  50px;
        height:  46px;
        padding-right:  1px;

    }
    .address{
        font-family:  'Comic Sans MS';
	    color:  teal;
	    font-size: .7em;
    }
    /* Start Navigation */
    #nav 
    {
	    float: left;
	    width: 100%;
	    margin:  0 0 0 4px;
	    padding: 10px 0 0 0;
	    list-style: none;
        padding-bottom:  10px;
	    /*
	    background: #FFCB2D url(images/nav_bg.gif) repeat-x bottom left;
    */
    }
    #nav li 
    {
	    float: left;
	    margin: 0 1px 0 0;
	    padding: 0;
	    font-family: "Lucida Grande", sans-serif;
	    font-size: 80%;
    }
    #nav a 
    {
	    float: left;
	    display: block;
	    margin: 0;
	    padding: 4px 8px;
	    color: #333;
	    text-decoration: none;
	    border: 1px solid #9B8748;
	    background: #F9E9A9 url(images/off_bg.gif) repeat-x top left;
    }
    
    #nav a:hover, body#intro #t-intro a 
    {
	    color: #333;	
	    padding-bottom: 5px;
	    border-color: #727377;	
	    background: #fff url(images/on_bg.gif) repeat-x top left;
    }
    /* End Navigation */
    .main{
        margin:  auto;
        width:  90%;
        min-height:  70%;
        vertical-align:  middle;
    }
    .divfooter{
        text-align: center;
        font-weight:  bold;
    }
   #divfootername{
       font-weight:  bold;
   }
   .centerpanel{
       font-size:  1em;
   }
   #frmpatientmessage label{
        display: inline-block;
        vertical-align: baseline;
        color:  teal;
        width:  150px;
        font-size:  1.2em;
    }
   #frmpatientmessage input[type=text]{
        display: inline-block;
        vertical-align: baseline;
        width:  150px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        font-size:  1.2em;
    }
    #frmpatientmessage input[type="text"]:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

   #frmpatientmessage input[type=submit]{
        background-color:  teal;
        text-decoration:  none;
        color:  white;
        border:0 none;
        cursor:pointer;
        -webkit-border-radius: 5px;
        border-radius: 5px; 
        font-size:  1.2em;
    }
    #frmpatientmessage p {
        font-size: 1em;
    }
    #frmpatientmessage ul{
        list-style:  none;
    }
    #frmpatientmessage li{
        padding-bottom:  .2em;
    }
    .medicalhomeheading{
        font-size:  1.0em;
        font-weight:  bold;
        padding-top:  1em;
    }
    .medicalhome{
        font-size:  1.0em;
    }
    .mapcanvas{
        width:  90%;
        height: 500px;
    }
    .directions{
        font-size:  1.0em;
        color:  teal;
    }
    #divhoursofoperation{
    width:  90%;
    }
    #divourproviders ul{

        list-style-type:  none;

    }
    #divourproviders span{
        font:  arial;
        font-size:  1.3em;
        font-weight:  bold;
    }
    #divhoursofoperation ul{
        list-style-type:  none;
        margin:  .3em;
        padding:  .3em;
    }
    #divhoursofoperation li{
        font:  arial;
        font-size:  .7em;
        color:  teal;
    }
    #divannouncement {
        font:  arial;
        font-size:  1.0em;
        color:  teal;
        padding-bottom:  1.2em;
    }
    #tblhoursofoperation{
        width:  100%;
        font:  arial;
        font-size:  .7em;
        color:  teal;
    }
    #tblhoursofoperation td{
        padding:  .5em;
    }
    .tblhoursofoperationday{
        font-weight:  bold;
    }
}
@media only screen and (min-width: 768px) {
	.pagewrap {
		margin: 0 auto;
		width:100%;/* needed for display:table*/
		display:table;
		height:100%;/* treated as a minimum for table display*/
	}
	.header {
		display:flex;
		flex-wrap:wrap;
		justify-content:  space-between;
		margin:0 0 1em;
	}
    .logo{
        width:  110px;
        height:  99px;
        padding-right:  8px;

    }
    /*address information*/
    .header h1 {
	font-family:  'Comic Sans MS';
	color:  teal;
	font-size: 1.5em;
	margin:0 1em 1em 0;
    margin-right: auto;
    }
    .header p {
	    font-family:  'Comic Sans MS';
	    color:  teal;
	    font-size: 1em;
	    margin:0 0 1em;
        text-align:  right;
    }
    .address{
        font-family:  'Comic Sans MS';
	    color:  teal;
	    font-size: .7em;
    }
    /* Start Navigation */
    #nav 
    {
	    float: left;
	    width: 100%;
	    margin:  0 0 0 4px;
	    padding: 10px 0 0 0;
	    list-style: none;
        padding-bottom:  10px;
	    /*
	    background: #FFCB2D url(images/nav_bg.gif) repeat-x bottom left;
    */
    }
    #nav li 
    {
	    float: left;
	    margin: 0 1px 0 0;
	    padding: 0;
	    font-family: "Lucida Grande", sans-serif;
	    font-size: 80%;
    }
    #nav a 
    {
	    float: left;
	    display: block;
	    margin: 0;
	    padding: 4px 8px;
	    color: #333;
	    text-decoration: none;
	    border: 1px solid #9B8748;
	    background: #F9E9A9 url(images/off_bg.gif) repeat-x top left;
    }
    
    #nav a:hover, body#intro #t-intro a 
    {
	    color: #333;	
	    padding-bottom: 5px;
	    border-color: #727377;	
	    background: #fff url(images/on_bg.gif) repeat-x top left;
    }
    /* End Navigation */
    .main{
        margin:  auto;
        width:  90%;
        min-height:  70%;
    }
    .divfooter{
        text-align: center;
        font-weight:  bold;
    }
   #divfootername{
       font-weight:  bold;       
   }
   .centerpanel{
       font-size:  2em;
   }
   #frmpatientmessage label{
        display: inline-block;
        vertical-align: baseline;
        color:  teal;
        width:  150px;
        font-size:  1.2em;
    }
   #frmpatientmessage input[type=text]{
        display: inline-block;
        vertical-align: baseline;
        width:  150px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        font-size:  1.2em;
    }
    #frmpatientmessage input[type="text"]:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

   #frmpatientmessage input[type=submit]{
        background-color:  teal;
        text-decoration:  none;
        color:  white;
        border:0 none;
        cursor:pointer;
        -webkit-border-radius: 5px;
        border-radius: 5px; 
        font-size:  1.2em;
        padding:  10px;
    }
    #frmpatientmessage p {
        font-size: 1.5em;
    }
    #frmpatientmessage ul{
        list-style:  none;
    }
    #frmpatientmessage li{
        padding-bottom:  .2em;
    }
    .medicalhomeheading{
        font-size:  1.5em;
        font-weight:  bold;
        padding-top:  1em;
    }
    .medicalhome{
        font-size:  1.5em;
    }
    .mapcanvas{
        width:  90%;
        height: 500px;
    }
    .directions{
        font-size:  1.5em;
        color:  teal;
    }
    #divhoursofoperation{
    width:  90%;
    }
    #divourproviders ul{
        list-style-type:  none;
    }
    #divourproviders li{
        
    }
    #divourproviders span{
        font:  arial;
        font-size:  1.3em;
        font-weight:  bold;
        
    }
    #divourproviders p{
        font-size:  1.0em;
        color:  teal;
        padding-top:  .8em;
    }
    #divhoursofoperation ul{
        list-style-type:  none;
        margin:  .4em;
        padding:  .4em;
    }
    #divhoursofoperation li{
        font:  arial;
        font-size:  1.3em;
        color:  teal;
    }
    #divannouncement {
        font:  arial;
        font-size:  1.5em;
        color:  teal;
        padding-bottom:  1.2em;
    }
    #tblhoursofoperation{
        font:  arial;
        font-size:  1.5em;
        color:  teal;
    }
    #tblhoursofoperation td{
        padding:  .5em;
    }
    .tblhoursofoperationday{
        font-weight:  bold;
    }
    #ulformlist{
        list-style-type:  none;
    }
    #ulformlist li{
        padding-bottom:  .4em;
    }
    #ulformlist a{
        text-decoration:  none;
        color: #0000EE;
        padding-left:  .3em;
    }
    #ulformlist a:visited{
        text-decoration:  none;
        color: #0000EE;
    }
    #ulpartnerlist{
        list-style-type:  none;
    }
    #ulpartnerlist li{
        padding-bottom:  1.5em;
    }
    #ulpartnerlist a{
        text-decoration:  none;
        color: #0000EE;
        padding-left:  0em;
    }
    #ulpartnerlist a:visited{
        text-decoration:  none;
        color: #0000EE;
    }
    #tblformslist a{
        text-decoration:  none;
        color: #0000EE;
    }
    #tblformslist a:visited{
        text-decoration:  none;
        color: #0000EE;
    } 
    #uluserlogin{
        list-style:  none;
    }
    #uluserlogin li{
        padding-bottom:  1em;
    }
    #uluserlogin label {
        display:  block;
        padding-bottom:  .5em;
    }   
}

Any help would be appreciated.

2

Hi,
To do that, try this

    #uluserlogin li{
        display:block;
        padding-bottom:  1em;
        text-align:center
    }
    #uluserlogin label, 
    #uluserlogin input {
        display: inline-block;
        padding-bottom:  .5em;
    }

Then add a line <br> in the html to stack the ‘now’ inline-block label and input

<div id="divmain">
    <div id="divlogin" style="height:  100%; vertical-align:  middle; margin: 0 auto; width:  100%;">
        <ul id="uluserlogin">
            <li>
                <label id="lblusername" for="txtusername">User Name:</label>
                <br>
                <input id="Email" name="Email" type="text" autocomplete="off" />
            </li>
            <li>
                <label id="lblpassword" for="txtpassword">Password:</label>
                <br>
                <input id="Password" name="Password" type="password" autocomplete="off" />
            </li>
            <li>
                <input type="submit" value="Log In" />
            </li>
        </ul>
    </div>
</div>
3

<div id="divlogin" style="height: 100%; vertical-align: middle; margin: 0 auto; width: 100%;">

That div is only going to be as tall as the content in it.

The height:100%; will not work since it looks to it’s parent for a height to base 100% from.
There is no height on <div id="divmain"> so height:100% is ignored

4

I think I know what you are wanting to do now.

A sticky footer type layout with your… “user name and password textboxes inside of a <ul> that I want to horizontally and vertically align within a center panel”

The following code should give you a starting point to work from and you can read up on CSS Flexible Box Layout

To stack the <ul> items at all times you just need to change the flex-flow to column wrap

main ul {
	display: flex;
	flex-flow: column wrap;/* flex-direction and wrap */
	justify-content: center;
	align-content: center;
	flex: auto;
	list-style: none;
}

Try this example and see if it does what your after.
If you need support for older browsers see the link to Paul’s display-table version in the footer

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer - 1 column flexbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
	margin: 0;
	padding: 0;
	background: #DE6700;
}
.wrap {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	max-width: 1020px;
	margin: auto;
	background: #fff;
}
main {
	display: flex;
	flex: 1;
}
footer, header {
	background: lime;
	padding: 2em;
	text-align: center;
}
main ul {
	display: flex;
	flex-flow: row wrap;/* flex-direction and wrap */
	justify-content: center;
	align-content: center;
	flex: auto;
	list-style: none;
}
main li {
	margin: 1em;
	padding: .25em 3em;
	background: greenyellow;
	text-align: center;
}
</style>
</head>
<body>

<div class="wrap">
    <header>Header Stuff</header>
    <main>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </main>
    <footer>
        Footer Stuff - <a target="blank"  href="https://codepen.io/paulobrien/full/FKAxH/">See display table version of sticky footer</a>
    </footer>
</div>

</body>
</html>
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.