By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,574 Members | 2,966 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,574 IT Pros & Developers. It's quick & easy.

vertical align with not specified height

P: 3
I am trying to put together an login page my problem is getting the three items aligned to the middle verticaly without specifing a height to anything on the page.

CSS

html{
height:100%;
min-height:100%;
}
body{
vertical-align:middle;
background-color: #FFFFFF;
text-align: center;
height:100%;
min-height:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.loginHeader{
background-color:#4F4F4F;
text-align:center;
vertical-align:middle;
font-family:Verdana;
font-size:14px;
color:White;
font-weight:bold;
position:relative;
}
.loginFooter{
background-color: #4F4F4F;
height: 20%;
text-align: center;
vertical-align: middle;
position: relative;
}
.loginMain{
background-color: #E4E0DF;
height: 60%;
text-align: center;
vertical-align: middle;
position: relative;
}
.loginBox{
text-align:center;
border: solid 1px #4F4F4F;
width: 250px;
height: 200px;
display: table-cell;
margin-right: auto;
margin-left: auto;
vertical-align: middle;
}
.vertAlign{
left: 0px;
top: 50%;
display: table-cell;
vertical-align: middle;
}


.alpha1{
background-color:#4F4F4F;
max-height:30%;
min-height:10%;
}
.alpha2{
background-color:#E4E0DF;
max-height:30%;
min-height:10%;
}
.alpha3{
max-height:60%;
min-height:40%;
}

.bravo1{
height: 20%;
background-color: #4F4F4F;
text-align: center;
vertical-align: middle;
}
.bravo2{
height: 60%;
background-color: #E4E0DF;
text-align: center;
vertical-align: middle;
}

original code

<body>
<div class="loginHeader">Verve Records<br />www.celebrateella.com</div>
<div class="loginMain">
<div class="loginBox">test</div>
</div>
<div class="loginFooter">
<div class="vertAlign"><a href="http://www.default.com" target="_blank"><img src="Images/Logos/default.gif" alt="default" width="127" height="39" style="border: 0px; position: relative;" /></a></div>
</div>
</body>

my code

<body>
<div align="center" class="bravo1">
<div align="center" class="alpha1"></div>
<div align="center" class="alpha3">
<div align="center" class="loginHeader">Verve Records<br />www.celebrateella.com</div>
</div>
<div align="center" class="alpha1"></div>
</div>
<div align="center" class="bravo2">
<div align="center" class="alpha2"></div>
<div align="center" class="alpha3">
<div class="loginBox">test</div>
</div>
<div align="center" class="alpha2"></div>
</div>
<div align="center" class="bravo1">
<div align="center" class="alpha1"></div>
<div align="center" class="alpha3">
<div align="center" class="vertAlign"><a href="http://www.default.com" target="_blank"><img src="Images/Logos/default.gif" alt="default" width="127" height="39" style="border: 0px; position: relative;" /></a></div>
</div>
<div align="center" class="alpha1"></div>
</div>
</body>

I got it to sort of work right in my code but the boss wants it in as few lines an styles as possiable so is there a way to align the three items to the center verticaly while useing a %height and not a hard pxheight. The idea is that the items stay in the middle horizontaly and verticaly no matter the size of the browser.

Any help is much apreceated

ps this is my first post here
Jun 1 '07 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Could you be a little more specific about "the three items". I see the text and I guess you maybe use some divs with borders. I'm not sure what I'm looking at though I haven't studied the code.

Divs are for structure and not presentational elements themselves. Once I know exactly what the three items are supposed to be then this should be easy.
Jun 1 '07 #2

P: 3
the graphic at the top is just two lines of text the box that goes in the middle will be made into a log in box later down the road and the in the bottem is a company graphic /link
Jun 3 '07 #3

P: 3
it does not have to be done entirly in divs but it can not use any tables at all.
Jun 4 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.