Solved

Problem in html positioning

Posted on 2011-02-21
7
222 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
[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
  • 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 Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
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 different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

627 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