Text positioning issues

[Darkmatter5]

Here's my page with my divs.

<div id="main">
  <div id="header"></div>
  <div id="subheader">
    <div class="main_text" id="banner">
      <span class="main_text"><a href="index.php">MAIN</a> | <a href="forums.php">FORUMS</a></span>
    </div>
    <div id="login">
      <div style="text-align:center; background-color: #660000;"><strong>ACCOUNT LOGIN</strong></div>
      <div style="text-align:center; margin:2px;">
      	<form action="login.php?try=true" method="post">
          <input name="username" type="text" class="text_boxes" tabindex="1" size="10" maxlength="20" />
          <input name="password" type="password" class="text_boxes" tabindex="2" size="10" maxlength="20" />
          <input name="login" type="submit" class="button" tabindex="3" value="SUBMIT" />          
        </form>
      </div>
      <div class="text_boxes" style="text-align:center;"><a href="register.php" tabindex="4">Register</a> | <a href="logout.php" tabindex="5">Logout</a> | <a href="passrecover.php">Lost Password</a> | Help</div>
    </div>
  </div>
  <div id="content-main">
    <div id="content">test</div>
    <div id="tools-and-menus">
      <div id="tool_logged-in-users">
        <div style="text-align:center; background-color: #660000;"><strong>CURRENTLY LOGGED IN USERS</strong></div>
        <div class="text_boxes" style="text-align:center;"><?php $ec->logged_in_users(); ?></div>
      </div>
    </div>
  </div>
  <div id="footer"></div>
</div>

 

Here's the CSS file

table {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
background-color: #993333;
border: 0;
empty-cells: show;
}
table.test {
background-color:#630C0E
}

link {
color: #CCCC00;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #2F0F0F;
}
input.button
{
   font-size:9px;
   font-weight:bold;
   border-style:solid;
   border-color:#669999;
   border-width:1px;
}
.text_boxes {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

.main_text {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
.style1 {
font-size: 14px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
.style2 {
font-size: 12px;
font-weight: bold;
}
.style7 {color: #FF2222}



a:link {
color: #00CCCC;
text-decoration: none;
}

a:visited {
color: #3333CC;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
#main {
left: 20px;
height: 620px;
width: 950px;
z-index: 1;
margin: 0px auto;
}
#header {
height: 25px;
width: inherit;
z-index: 2;

}
#subheader {
height: 75px;
width: inherit;
z-index: 2;

}
#content-main {
height: 494px;
width: inherit;
z-index: 2;

}
#footer {
height: 25px;
width: inherit;
z-index: 2;

}
#banner {
height: 75px;
width: 720px;
z-index: 3;
float: left;
vertical-align: bottom;
background-color: #CC9933;
text-indent: 4px;
}
#login {
height: 73px;
width: 230px;
z-index: 3;
float: left;
border-bottom: 2px #000000 solid;
}
#content {
height: 493px;
width: 720px;
z-index: 3;
float: left;
}
#tools-and-menus {
height: 493px;
width: 230px;
z-index: 3;
float: left;
}
#tool_logged-in-users {
height: 80px;
width: 230px;
z-index: 4;
float: left;
}

 

As you can see in #banner I have vertical-align set to bottom and it doesn't render on the bottom of the div.  It still puts the text and the top left corner.

 

Help please!

[rhodesa]

you can't do vertical-align on a DIV (that i know of)...i think it's restricted to TD tags.

 

instead, try using a padding-top of 60px or so on the #banner

[haku]

That's correct. vertical align only works with td tags.

[TheFilmGod]

instead, try using a padding-top of 60px or so on the #banner

 

Agreed. OR you can use margin-top: 60px; ----> which I encourage. This way you can still specify a height without having to recalculate it!

[rhodesa]

instead, try using a padding-top of 60px or so on the #banner

 

Agreed. OR you can use margin-top: 60px; ----> which I encourage. This way you can still specify a height without having to recalculate it!

 

what he said