PDA

View Full Version : CSS DIV vertical align to bottom



xraverx
25 Oct 2010, 04:40 AM
Hi, need help with my example. I need "green" divs to be aligned to the bottom of row. "Blue" div has dynamic height according to the length of text inside. Please help. Thanks


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style>
.row{
width:700px;
border:1px black solid;
height:auto;
color:white;
}
.item{
border:1px black solid;
width:200px;
float:left;

}
.top{
height:100px;
border:3px black solid;
background-color:red;
}
.middle{
border:3px black solid;
background-color:blue;
}
.bottom{
height:50px;
border:3px black solid;
background-color:green;
}
.clear{
clear:both;
}
</style>
</head>

<body>
<div class="row">
<div class="item">
<div class="top"> fixed height div
</div>
<div class="middle"> dynamic height div
</div>
<div class="bottom"> fixed height div
</div>
</div>
<div class="item">
<div class="top"> fixed height div
</div>
<div class="middle"> Lorem ipsum dolor sit amet consectetuer auctor In ac ipsum consequat. Nibh adipiscing sed Cras arcu nunc ligula vitae senectus consequat wisi. Nam Vestibulum ni
</div>
<div class="bottom"> fixed height div
</div>
</div>
<div class="item">
<div class="top"> fixed height div
</div>
<div class="middle"> dynamic height div
</div>
<div class="bottom"> fixed height div
</div>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</div>
<div class="row">
<div class="item">
<div class="top"> fixed height div
</div>
<div class="middle"> dynamic height div
</div>
<div class="bottom"> fixed height div
</div>
</div>
<div class="item">
<div class="top"> fixed height div
</div>
<div class="middle"> Lorem ipsum dolor sit amet consectetuer auctor In ac ipsum consequat. Nibh adipiscing sed Cras arcu nunc ligula vitae senectus consequat wisi. Nam Vestibulum ni
</div>
<div class="bottom"> fixed height div
</div>
</div>
<div class="item">
<div class="top"> fixed height div
</div>
<div class="middle"> dynamic height div
</div>
<div class="bottom"> fixed height div
</div>
<div class="clear">
</div>
</div>
<div class="clear">
</div>
</div>

</body>
</html>