Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Problem in html positioning

Posted on 2011-02-21
7
Medium Priority
?
235 Views
Last Modified: 2012-05-11
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.

0
Comment
Question by:manikandan689
  • 5
  • 2
7 Comments
 
LVL 4

Expert Comment

by:andreizz
ID: 34942806
<!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
 
LVL 4

Expert Comment

by:andreizz
ID: 34942809
if that's not what you want just draw a picture in Paint with what you want.
0
 

Author Comment

by:manikandan689
ID: 34943810
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 4

Accepted Solution

by:
andreizz earned 2000 total points
ID: 34945316
so you want 3 columns?
post your code again or should i continue from the one i just gave you?
0
 
LVL 4

Expert Comment

by:andreizz
ID: 34945455
http://matthewjamestaylor.com/blog/perfect-3-column.htm
check this out, it's free and it's very good.
0
 

Author Comment

by:manikandan689
ID: 34945592
yes you can continue with the one that you gave me!
0
 
LVL 4

Expert Comment

by:andreizz
ID: 34945836
<!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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

580 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