manikandan689
asked on
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/><b r/><br/><b r/><br/><b r/><br/><b r/><br/><b r/><br/><b r/><br/><b r/>dynamic ally generated content with increasing height</p></div>
<div class="midright"><p>conten t 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.
<!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/
<div class="midleft"><p><br/><b
<div class="midright"><p>conten
<div id="footer"><p>footer</p><
</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.
if that's not what you want just draw a picture in Paint with what you want.
ASKER
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://matthewjamestaylor.com/blog/perfect-3-column.htm
check this out, it's free and it's very good.
check this out, it's free and it's very good.
ASKER
yes you can continue with the one that you gave me!
<!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>
i am not sure this looks good in ie6, if you want that also use the link above.
Good luck!
Open in new window