Auto Expend Div To Bottom?

Hello guys, i have this code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="en-us" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Tutim.Co.IL</title>
<style type="text/css">
html {
	direction:rtl;
	margin: 0;
	padding: 0;
	cursor:default;
}

body {
	padding: 0;
	margin:0;
	cursor:default;
}

#Header {
	padding: 0px 5px 0px 0px;
	margin: 8px auto 8px auto;
	border: 1px solid #A2A2A2;
	width: 990px;
	background-color: #F4F4F4;
	overflow:hidden;
}

#HeaderLeft {
	width: 200px;
	height:100%;
	margin: 0px;
	padding: 0px 5px 0px 5px;
	float: right;
	background-color: #D3E3ED;
	text-align: center;
	font-size: 11pt;
	direction: rtl;
	color: #3A6187;
}

#HeaderRight {
	width: 770px;
	margin: 0px;
	padding: 0px 5px 0px 5px;
	float: right;
	text-align: right;
	font-size: 10pt;
	direction: rtl;
	color: #000000;
}
</style>
</head>
<body>
<div id="Header">
	<div id="HeaderRight">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</div>
	<div id="HeaderLeft">Text</div>
</div>
</body>
</html>

as you can see, i have 2 divs inside a wrapper div.
my goal is to make the left div expend to bottom according to the right div’s height… meaning, if the right div gets deeper, so does the left one…

how can it be done ?

Check this two column equal height layout here http://www.cosmocentral.com/2010/01/two-cloumn-equal-height-layout-with-css/

his example seems not to be working
or is it just me?

Using your code something like this should work:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="en-us" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Tutim.Co.IL</title>
<style type="text/css">
html {
    direction:rtl;
    margin: 0;
    padding: 0;
    cursor:default;
}
body {
    padding: 0;
    margin:0;
    cursor:default;
}
#outer {
    margin: 8px auto 8px auto;
    border: 1px solid #A2A2A2;
    width: 990px;
    overflow:hidden;
}
#Header {
    width: 775px;
    background-color: #F4F4F4;
    border-left:210px solid #D3E3ED;
    float:left;
    padding:0px 5px 0px 0px;
}
#HeaderLeft {
    width: 200px;
    margin: 0 0 0 -210px;
    position:relative;
    padding: 0px 5px 0px 5px;
    float: left;
    background-color: #D3E3ED;
    text-align: center;
    font-size: 11pt;
    direction: rtl;
    color: #3A6187;
}
#HeaderRight {
    width: 770px;
    margin: 0px;
    padding: 0px 5px 0px 5px;
    float: right;
    text-align: right;
    font-size: 10pt;
    direction: rtl;
    color: #000000;
}
</style>
</head>
<body>
<div id="outer">
    <div id="Header">
        <div id="HeaderRight">Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text</div>
        <div id="HeaderLeft">Text </div>
    </div>
</div>
</body>
</html>


superb solution…
i have few questions since i’m trying to learn.
why did you use position relative?
and… as far as i understand correctly, you added 210px border to the header…
if that’s the case, why not to the right div? or have i missed the general point. if possible, please describe the theory on how did you accomplish they main idea :slight_smile:

thanks for help :slight_smile:

one last thing… what happens incase we would like to put a background picture that will repeat-y… can it be done ? (since i see it’s border)

once again, thanks =]

On the left header he added the left margin of -210px and on the actual header he added a 210px left border that way the left border will always be there, and the right will never overlap it.

IE6 needs the position:relative or else it won’t display the text :). It will be hidden because when in IE6 you move stuff with margins out of hte parent, it will be hidden unless you use position:Relative

http://ryanreese.net/articles/IE6-expanding-example.php

If you place the background iamge on the parent and repeat-y it will repeat the image vertically until the height of hte parent is met. Borders won’t conflict with it :).

Ok :slight_smile:

First thing to understand is that CSS will never base the height of an element on another unrelated element unless you are using the display:table properties (which are not supported in IE7 and under).

Therefore everything else is a trick to achieve the look that you want.

To get two columns to match height the above code uses a 200px left border on a div to give the illusion of a full length column. Then from inside this div you drag a 200px wide float from the middle of the div and into the 200px wide border of that div using negative margins. The floated column (which has no height) now sits on top of the border which will always have the same height as the div.

The position:relative is for IE6 because it will often display negative margin content underneath instead of on top of the element you have dragged it across and the position:relative just sets the stacking context and allows the element to be on top.

Now because the border is part of the div itself then you have the appearance of two columns that will always match height.

i.e. The divs 200px wide border is one column and then the background colour of the div is the other column. they will always match in height because they are the same element.

Read the faq on 100% height to understand why you cannot use 100% height to achieve this effect.

There are other tricks to imitate equal columns and there are some described in the 3 col sticky thread at the top of the forum (or google css faux columns).

Hope that helps :slight_smile:

[edit]
Ryan beat me :)[/edit]

one last thing… what happens incase we would like to put a background picture that will repeat-y… can it be done ? (since i see it’s border)

once again, thanks =]

If you mean you want a full length (100%) background image on the left column then you would be better doing away with the method shown and simply repeat the image and the border at the same time using the faux column background image method.

See this for more information.

i thank you all for helping out.
have a nice day!