Crisium
09 May 2009, 02: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>
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>