making div to inherit height [Archive]

genia

07-27-2008, 08:21 PM

for some reason i cant figure out how to make the div "row4r_sub"
to have the same height of it's container "row4" which should be in the height of row4l that contains the text.

http://sgulasujok.com/genia/taf.new3/
or

the css code:

/
body{
margin:0;padding: 0;
background-color: #96b1cc;;
}
a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}
#warpper{
width:885px;
margin:0 auto;
}
#row1{/*out links*/
width:855px;
height: 20px;
padding-top: 10px;
margin: 0 auto;
}
#row1 ul{
list-style: none;
margin:0;padding: 0;
}
#row1 li{
display:inline;
margin:0;padding: 0;
color: #fff;
}
#row2{/*top frame*/
width:885px;
height:46px;
background-image: url('../images/top.jpg');
background-repeat: no-repeat;
}
#row3{float:left;}
#row3l{
margin:0;padding: 0;
width: 599px;
height: 262px;
background-image:url('../images/flashBG.jpg') ;
float:left;
}
#row3l_title{
width:599px;
height: 37px;
display:block;margin:0;padding: 0;
clear:both;

}
#nav{/*inside links*/
margin:0 auto;
display: inherit;
width:400px;
}

#nav ul{
list-style: none;
margin:0 auto;padding: 0;

}
#nav li{display: inline;margin-left: 3px;}
#nav li a{
display:inline;
margin-left:5px;
color: #fff;
float: right;
color: #234471;
text-align: center;
direction: rtl;
font-family: Arial;
font-weight: bold;
font-size: small;
margin-top:7px;
margin-bottom:5px;
}
#flash{
margin:0 auto;
width:480px;
height:220px;
}

#row3r{
margin:0;padding: 0;
width: 286px;
height: 299px;
background-image:url('../images/logoBG.jpg') ;
float:right;
}
#row4 {width:885px;}
#row4l{margin:0;padding: 0;/*content*/
background-image:url('../images/textBG.jpg') ;
background-repeat: repeat-y;
float:left;
width:599px;
}
#row4r{
margin:0;padding: 0;
background-image:url('../images/subBG.jpg') ;
background-repeat: repeat-y;
float:right;
width:286px;
height: 140px;
}
#row4r_pic{
margin:0;padding: 0;
float:right;
width:286px;
height: 261px;
}
#row4r_sub{
float:right;
background-image:url('../images/shadowBG.jpg') ;
background-repeat: repeat-y;
width:286px;
height:inherit;
}
#row5{
margin:0;padding: 0;
background-image:url('../images/bot.jpg') ;
background-repeat: no-repeat;
width:910px;
height: 46px;
}
#copyr{
float:right;
font-family: Arial;
font-size: 10pt;
color: #5c7fc1;
direction: rtl;
text-align: right;
text-decoration: none;
}
.copyl{
float:left;
color: #5c7fc1;
font-family: Arial;
font-size: 10pt;
direction: rtl;
text-align: right;
text-decoration: none;
}
.copyl:hover{
float:left;
font-family: Arial;
font-size: 10pt;
color: #fff;
direction: rtl;
text-align: right;
text-decoration: none;
}

and the html:

<!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" />
<link rel="stylesheet" type="text/css" href="css/style.css" />


<script type="text/javascript" src="js/objecty.js"></script>

</head>
<body>
<div id="row1">
<ul><li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>
<div id="warpper">

<div id='row2'>
</div>
<div id="row3">
<div id='row3l'>
<div id="nav">
<ul>
<li><a href="">אודותינו</a></li>
<li><a href="">התפתחות הילד</a></li>
<li><a href="">מעונות</a></li>
<li><a href="">גנים</a></li>
<li><a href="">שירותים נוספים</a></li>
<li><a href="">שאלות ותשובות</a></li>
</ul>
</div>
<div id='flash'><object class="ObjectyMe" uri="swf/akdama.swf" width="480" height="220"></object></div>

</div>
<div id="row3l_title"><img src="images/titles/titleBG.jpg" alt="מעונות"></div>
</div>
<div id='row3r'>
</div>
<div id="row4">
<div id='row4l'>
Lorem ipsum dolor....
</div>
<div id='row4r'>
side nav links
</div>
<div id='row4r_pic'>
<img src="images/pict.jpg">
</div>
<div id="row4r_sub">row4sub</div>
</div>
<div style="clear:both;"></div>
<div id='row5'>jklj</div>
</div>

</body>
</html>

Medyman

07-28-2008, 01:38 PM

Your code seems overly complicated, so I didn't delve too far into it.

Maybe a look at this basic example will help out.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inherited Height</title>
<style type="text/css">
#container {
width:800px;
height:500px;
background:#eee;
margin:0 auto;
}
#left-column {
float:left;
width:300px;
height:100%;
background:#ee0000;
}
</style>
</head>
<body>

<div id="container">
<div id="left-column"><h1 style="margin:10px; padding:0; color:#fff;">I'M JUST AS TALL</h1></div>
</div>

</body>
</html>

The most important thing is that the container has a specified height. I don't see a height for row4, that might be your issue.

genia

07-28-2008, 03:16 PM

First of all thank you for replaying
tell u the truth dont think the code is very complicated.
you can relate just to the row4 code.
anyway..the height of row 4 is dynamically changes by the height of row4l that holds the text.
is there a way to make row4r_sub(which is there to create the right shadow for the text column)
to be in the same height of row4l or i need to use JS?

Medyman

07-28-2008, 03:58 PM

Do you have a link to your page, so that I can see the code in action (including the pictures).

Maybe "complicated" isn't the right word, but your code is overly verbose. If I understand your intentions right, you should be able to do what you want with less divs, therefore cleaning up your code. The use of class names such as row4r_sub made it look more complicated than it was.

What is row4r_sub putting a shadow on? row4? or just row4l?

genia

07-28-2008, 05:23 PM

sure,i gave it:
http://sgulasujok.com/genia/taf.new3/
row4r_sub is there only to create shadow on row4l

see the code in action and you'll understand.

and i'll be happy to see how to improve my code.
thanks again.