Forum Moderators: not2easy
Im novice in world of DIV-s and CSS. Ill try to made something, but I dont know hot to think.
#############################################
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
<!--
#main_container {
position:relative;
left:0px;
top:0px;
width:600px;
height:auto;
z-index:100;
border: solid 1px black;
}
#second_container {
position:relative;
left:0px;
top:0px;
width:481px;
height:100%;
z-index:99;
border: solid 1px black;
}
#Layer2 {
position:relative;
left:0px;
top:0px;
width:336px;
height:auto;
z-index:1;
border: solid 1px red;
}
#Layer3 {
position:absolute;
left:346px;
top:0px;
width:120px;
height:auto;
z-index:5;
border: solid 1px blue;
}
#Layer4 {
position:relative;
left:0px;
bottom:0px;
width:100%;
height:31px;
z-index:4;
border: solid 1px green;
}
#Layer50 {
position:absolute;
left:480px;
top:0px;
width:110px;
height: 100%;
z-index:101;
border: solid 1px pink;
}
-->
</style>
</head>
<body>
<div id="main_container"><!-- main_container -->
<div class="second_container">
<div id="Layer2">
<p>tgeargergergearg eag ea ae</p>
<p>ear g</p>
<p>aerg </p>
<p>erg </p>
<p>erg </p>
<p>aerg </p>
<p>aerg earg </p>
<p> </p>
<p> fgdfg </p>
<p>fg </p>
<p>ege</p>
<p>g g </p>
</div>
<div id="Layer3">
<p>egeargeargearwgae rgearg earg eargaerg erg</p>
<p>aerg</p>
<p>aergae rg</p>
<p>earg </p>
<p>eawrg </p>
<p>aewrg</p>
<p>earg</p>
<p>ear gaerg </p>
<p>awrg</p>
<p>a g </p>
</div>
<div id="Layer50"></div>
</div><!-- 3 second_container # -->
<div id="Layer4">
<p> </p>
<p> </p>
<p> </p>
</div>
</div><!-- # main_container # -->
</body>
</html>
###########################################################
So what can I do to a "blue" (Layer3) and "pink" (Layer50) container have a same height as a "red" (Layer2) container. all the containers maybe will have the img in background (repeat).
I want to contaners change the height as text come in.
thnxs
Here's how to fix your overlay problem:
p{margin:1.12em 0;line-height:1.2em} /* MOST BROWSERS DEFAULT TO THESE, BUT MAKE IT EXPLICIT TO BE SURE
#Layer2,#Layer3,#Layer4,#Layer50{height: ...SET THIS TO <NUMBER-OF-LINES-IN-TALLEST-LAYER>*(1.2+1.12)'em'... }
