PDA

View Full Version : vertical align using css -> how?



Crisium
09 May 2009, 01:34 AM
Hi all,

I'm having problems vertically aligning the text in the div_left,
anyone know how one should go about this?

regards,
Peter


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv='Content-Type' content='text/html;charset=iso-8859-1' />
<title>Test</title>
<head>
<style type="text/css">

.div_box
{
border: 2px red solid;
width: auto;
}

.div_outer
{
width: 500px;
border: 1px solid Gray;
margin: auto;
padding: 2px;
padding-bottom: 2px;
}

.div_content
{
font-family: Verdana,Tahoma,Arial,Sans-Serif;
font-size: 10px;
width: auto;
border: 0;
margin: 0;
padding: 0;
background-color: lightblue;
}

.div_left
{
width: 100px;
height: 50px;
border: 0;
border-right: 1px white solid;
border-bottom: 1px white solid;
margin: 0;
padding: 0;
background-color: darkgray;
float: left;
}

.div_right
{
width: auto;
height: 50px;
border: 0;
border-bottom: 1px white solid;
margin: 0;
padding: 0;
background-color: yellow;
}



</style>

</head>
<body>

<!-- red box that surrounds the entire div_outer -->
<div class="div_box">

<!-- this is what we want to center at some point (not right now) -->
<div class="div_outer" >
<div class='div_content'>

<!-- left side stuff -->
<div class="div_left">
Left Side
</div>

<!-- right side stuff -->
<div class="div_right">
Right Side
</div>
</div>

<div class='div_content'>

<!-- left side stuff -->
<div class="div_left">
Left Side
</div>

<!-- right side stuff -->
<div class="div_right">
Right Side
</div>
</div>

</div>

</div>

</body>
</html>

luma-max
21 May 2009, 08:09 PM
There are a lot of different ways to pull this off and there are several good explantions available via google search... try "vertical align css".

For example, here is one:
http://phrogz.net/CSS/vertical-align/index.html