making div to inherit height

**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:

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:

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

<!--[if IE 6]>
  <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
  <![endif]-->
<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.

Code:

<!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.

Thread: making div to inherit height

Thread Tools

Search Thread

making div to inherit height

Bookmarks

Bookmarks

Posting Permissions