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

Code:

<!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

Thread: vertical align using css -> how?

Thread Tools

vertical align using css -> how?

Similar Threads

Align images to cell corners using CSS

Posting Permissions