Solved

Positioning in html/css

Posted on 2011-02-18
4
262 Views
Last Modified: 2012-05-11
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.
0
Comment
Question by:manikandan689
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 

Author Comment

by:manikandan689
ID: 34927088
Problem in positioning of html-css
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 34927304
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
 

Author Comment

by:manikandan689
ID: 34928281
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34928338
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

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question