Problem in html positioning

please solve my problem: here is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
</head>
<body>

<div id="header2"><p>Header<br/><br/><br/></p></div>

<div  class="midleft"><p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dynamically generated content with increasing height</p></div>
<div  class="midright"><p>content 2</p></div>
<div id="footer"><p>footer</p></div>


</body>
</html>



CSS FILE.

html,body
{
      height:100%;
      
}


#header2{
      
      background-image:repeat-x;
      height:25%;
      background-color:#DDDD44;
      width:100%;
      border:groove;
}      


.midleft
{
       position:absolute;
      top:28%;
      min-height:30%;
      height:auto;
      width:50%;
      border:groove;
      padding-left:10px;
      right:32%;
}
.midright
{
 position:absolute;
      background-color:#FFF;
      width:30%;
      padding-left:20px;
      border:groove;
      height:29%;
      top: 28%;
      right:0%;
      
}


#footer {
      position:absolute;
    bottom:0%;
      min-height:50px;
    height:auto;
      width:100%;
      padding-top: 20px;
      padding-bottom: 10px;
      border:groove;
      
        }


I want the division tag  of dynamically generated content to be in center position(as i have placed already) and the footer to go down as the height of the division tag  of dynamically generated content expands(which is not happening as you can see it clashes with the footer) and the remaining thing to be as it is.

manikandan689Asked:
Who is Participating?
 
andreizzConnect With a Mentor Commented:
so you want 3 columns?
post your code again or should i continue from the one i just gave you?
0
 
andreizzCommented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{
	margin: 0px;
	padding: 0px;      
}
#header{      
      background-image:repeat-x;
      height:25%;
      background-color:#DDDD44;
      width:100%;
	  clear: both;
	  border: 1px solid #000000;
}  
#content{
	width: 100%;
	clear: both;
}
.midleft, .midright{
	display: inline-table;
}    
.midleft{
      min-height:30%;
      width:50%;
	  border: 1px solid #000000;
}
.midright{
      background-color:#FFF;
      width:49%;
      height:29%;      
	  border: 1px solid #000000;
}
#footer{
    min-height: 50px;
	clear: both;
	width: 100%;
	  border: 1px solid #000000;
}
</style>
</head>
<body>

<div id="header"><p>Header<br/><br/><br/></p></div>
<div id="content">
	<div class="midleft"><p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dynamically generated content with increasing height</p></div>
	<div class="midright"><p>content 2</p></div>
</div>
<div id="footer"><p>footer</p></div>


</body>
</html>

Open in new window

0
 
andreizzCommented:
if that's not what you want just draw a picture in Paint with what you want.
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
manikandan689Author Commented:
hi
      first of all THANK YOU!  for spending some time for me.

you have corrected my problem 75% the only thing i wanted is to move that dynamically generated content to some where around 150px right so that i can insert an another division tag at the left.
0
 
andreizzCommented:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
check this out, it's free and it's very good.
0
 
manikandan689Author Commented:
yes you can continue with the one that you gave me!
0
 
andreizzCommented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{
	margin: 0px;
	padding: 0px;      
}
#header{      
      background-image:repeat-x;
      height:25%;
      background-color:#DDDD44;
      width:100%;
	  clear: both;
	  border: 1px solid #000000;
}  
#content{
	width: 100%;
	clear: both;
}
.midleft, .midmid .midright{
	display: inline-table;
}    
.midleft{
	width: 20%; /*if you change this change below also*/
	float: left;
	position: relative;
	min-height: 30px;
	border: 1px solid #000000;
}
.midmid{
      min-height:30%;
      width:80%;
	  margin-left: 20.1%;  /*change this also*/
	  border: 1px solid #000000;
	position: relative;
}
#col12{
	width: 80%;
	float: left;
	height:29%;      	
}
.midright{
	width: 20%;
	margin-left: 80.2%;
	height:29%;      
	border: 1px solid #000000;
}
#footer{
    min-height: 50px;
	clear: both;
	width: 100%;
	border: 1px solid #000000;
}
</style>
</head>
<body>

<div id="header"><p>Header<br/><br/><br/></p></div>
<div id="content">
	<div id="col12">
		<div class="midleft"><p>content 1</p></div>
		<div class="midmid"><p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dynamically generated content with increasing height</p></div>
	</div>
	<div class="midright"><p>content 2</p></div>
</div>
<div id="footer"><p>footer</p></div>


</body>
</html>

Open in new window


i am not sure this looks good in ie6, if you want that also use the link above.

Good luck!
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.