Positioning in html/css

hi

in css i have a division tag that can vary in size(accepts input dynamically).

now i want the outside division tag to also expand according to the inner division tag.

for example:

<div id="body">
<div id="content1"></div>
<div id="content2"></div>
</div>





now if the height of the content1 division tag expands(by giving height as auto) i want content2 to go down according to the height of content1 and also the body division tag to expand according to the height of content1.


Thanks in advance.
manikandan689Asked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		#body
		{
			min-height:100px;
			height:auto;
			width:200px;
		}
		#content1, #content2
		{
			min-height:50px;
			height:auto;
			border:1px solid red;
			width:200px;
		}
	</style>
</HEAD>

<BODY>
	<div id="body">
		<div id="content1">
			Content 1 <br>
			Content 1 <br>
			Content 1 <br>
		</div>
		<div id="content2">
			Content 2
		</div>
	</div>
</BODY>
</HTML>

Open in new window

0
 
manikandan689Author Commented:
Problem in positioning of html-css
0
 
manikandan689Author Commented:
hi

i need to position the content1 from top 50px(from body division tag)
 and content 2 from bottom 0px(from body division tag)
and do the previously mentioned functionalities

i.e
if the height of the content1 division tag expands(by giving height as auto) i want content2 to go down according to the height of content1 and also the body division tag to expand according to the height of content1.
0
 
Gurvinder Pal SinghCommented:
then try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		#body
		{
			min-height:100px;
			height:auto;
			width:200px;
		}
		#content1
		{
			min-height:50px;
			height:auto;
			border:1px solid red;
			width:200px;
			position:absolute;
			top:50px;
		}
		#content2
		{
			position:absolute;
			height:auto;
			bottom:0px;
			border:1px solid red;
			width:200px;
		}
	</style>
</HEAD>

<BODY>
	<div id="body">
		<div id="content1">
			Content 1 <br>
			Content 1 <br>
			Content 1 <br>
		</div>
		<div id="content2">
			Content 2
		</div>
	</div>
</BODY>
</HTML>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.