Min-Height and Align Text to Bottom

I have a <div> which holds a user’s comments, and I would like to add a survey question at he bottom (e.g. Useful Comment? __Yes __No)

However,

1.) The box should have a minimum height so if the Comment is just a few words, it doesn’t look cramped

2.) The Survey Question should be bottom-aligned

For example, let’s say the Comment Box has a minimum height of 10 lines…

If the Comment is 20 lines, the box expands and the Question is beneath the Comment.

If the Comment is 1 line, the box is still 10 lines high, and the Question is at the bottom of the box.

How can I make this happen across all - or most - browsers using CSS?

Sincerely,

Debbie

Hi Debbie,

If I understand correctly then just set a min-height to the top section.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.comment-box {
	width:500px;
	margin:auto;
}
.top {min-height:150px;}
.foot {border-top:1px solid #000;}
</style>
</head>

<body>
<div class="comment-box">
		<div class="top">
				<h1>Min-height comment section</h1>
				<p>content goes here</p>
		</div>
		<div class="foot">Footer comments go here</div>
</div>
</body>
</html>


Yes, I did add min-height to my User Comment <div>, but was also looking for a way to “bottom-align” the Survey Question which is inside of the User Comment <div>.

What you proposed seems rather obvious now, i.e. make the Survey Question a separate <div> beneath the User Comment <div>.

I am not in front of my code right now, so I’m not sure how that would work.

Even if your way works, for my own knowledge, is there a way to “bottom-align” an object with respect to a “parent” container like I was asking about in my OP?

Hope that makes sense?

Sincerely,

Debbie

Even if your way works, for my own knowledge, is there a way to “bottom-align” an object with respect to a “parent” container like I was asking about in my OP?

When you say bottom-align that assumes that there is a bottom of something on which to align. A container is only as tall as its content so the last line of the content will always effectively be bottom aligned. :slight_smile: If you give the container a height or min-height then you have a bottom on which to align something but you need that bottom content to be contained in a suitable element and thus you end up with a structure as in my example.

You can also use table-cells or display:table/cell but you still end up with much the same structure.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.comment-box {
	width:500px;
	height:300px;
	display:table;
}
.top {display:table-row;vertical-align:top}
.foot {
	display:table-cell;
	vertical-align:bottom;
	border-top:1px solid #000;
	height:1px;/* height is treated as a minimum in tables so this forces footer to the bottom*/
}
</style>
</head>

<body>
<div class="comment-box">
		<div class="top">top</div>
		<div class="foot">Footer comments go here</div>
</div>
</body>
</html>

That would no real difference from my first example using min-height.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.comment-box {
	width:500px;
}
.top {min-height:300px}
.foot {border-top:1px solid #000;}
</style>
</head>

<body>
<div class="comment-box">
		<div class="top">top</div>
		<div class="foot">Footer comments go here</div>
</div>
</body>
</html>