PDA

Click to See Complete Forum and Search --> : I am trying to make growing div-s

tolisoft
08-09-2008, 07:26 AM
Hi Guys,
I tried to do something maybe it is generally wrong I am not sure. The idea was one old site to be rewritten with div tags without any tables.

The site contains several columns. Currently they have different height and look bad. My idea was to make one big <div> and all other columns, they also are <div></div> will be placed into it. Well the main external div should extend its height as longest div from the internal bundle. At the same time all internal div-s should change their height to cover 100% of the main div height.

The issue is isolated here:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {
width: 200px;
height: auto;
background: #a5a5a5;
position: absolute;
}

#div2 {
width: 100px;
height: 100%-auto;
background: #ff0000;
position: absolute;
top: 0;
left: 0;
}

#div3 {
width: 100px;
height: 100%-auto;
background: #00ff00;
position: absolute;
top: 0;
left: 100px;
}
</style>

</head>

<body>
<div id="div1">
<div id="div2">
some text
</div>
<div id="div3">
some text<br />
some text<br />
some text<br />
</div>
</div>
</body>
</html>



And currently the problems are:
1. main div does not want to extend its height with longest internal div
2. smaller internal div cannot grow to cover 100% height of main div.


I hope I will find some help here.

All the best
Toli
WebJoel
08-09-2008, 10:24 AM
I don't have enough time this morning to explain, but mainly:

1) Abandon the use of "position:absolute;" (it'll just cause problems, would be better using "margins" and all inside of an all-unifying 'wrapper' as you have now as "div1". Naming 'semantically' makes things easier. "wrapper" tells me something. "div1" is rather non-descriptive), and:

2) "faux columns". 'Google' this term. It probably is what you are trying to do.

height: 100%-auto; is invalid, by the way.
Centauri
08-10-2008, 10:52 AM
An element cannot be forced to be the same height as an unrelated element, nor can it be made 100% of the height of a parent element is that parent does not have a height explicitly set. You have to fake it, and as WebJoel has said, faux columns (http://alistapart.com/articles/fauxcolumns) are a popular method of doing this.