Solved

Problem in html positioning

Posted on 2011-02-21
7
199 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 4

Accepted Solution

by:
andreizz earned 500 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
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 learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

786 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