Dynamic height 1

[d0nny]

I currently have my layout for my pages set through my CSS (and thanks for the previous help on this as I now think I understand layout in CSS!).
Here's my CSS

.main {
width:                  1024px;
margin:                 0 auto;
}
.topbar, .menubar {
position:               relative;
}
.logo {
width:                  720px;
height:                 150px;
background-image:       url(header.jpg);
}
.basket {
width:                  298px;
height:                 150px;
position:               absolute;
top:                    0px;
left:                   726px;
background-color:       #999999;
color:                  #FFFFFF;
}
.basket div {
margin-top:             25%;
padding:                5px 5px;
}
.menubar {
height:                 40px;
}
.menubar ul {
list-style-image:       none;
list-style-position:    outside;
list-style-type:        none;
margin:                 0px;
padding:                0px;
margin-top:             5px;
}
.menubar ul li {
font-family:            arial;
font-size:              1.5em;
color:                  #FFFFFF;
width:                  13.7%;
height:                 40px;
line-height:            40px;
background-color:       #999999;
text-align:             center;
float:                  left;
margin:                 3px 3px;
}
.menubar li:hover {
background-color:       black;
}
.workarea {
clear:                both;
width:                1024px;
height:               100%;
position:             relative;
margin:               10px 0px;
background-color:     #FFFFFF;
}
.pagenav {
float:              left;
width:              225px;
background-color:   #AAAAAA;
height:             590px;
font-family:        arial;
font-size:          1.5em;
padding-left:       10px;
padding-top:        10px;
color:              #FFFFFF;
}
.pagecontentimage {
width:         100%;
height:        200px;
background-color:   #123456;
}
.pagecontent {
width:              759px;
background-color:   #FFFFFF;
height:             400px;
margin:            10px 10px;
}
.copyright {
font-family:            arial;
font-size:              14px;
text-align:             center;
clear:                  both;
color:                  #FFFFFF;
background-color:       #999999;
padding:                5px 5px;
}

And here's my HTML code:

<div class="main">

<div class="topbar">
  <div class="logo"></div>
     <div class="basket">
        <div>Basket</div>
     </div>
  </div>
     
  <div class="menubar">
  </div>

  <div class="workarea">
    <div class="pagenav"></div>
    <div class="productcontent">
      <div class="pagecontentimage"></div>
      <div class="pagecontent"></div>
    </div>
  </div>
     
  <div class="copyright">footer</div>
    
</div>

Its a bit of a long way round for a shortcut, but I want to know how I can have the middle section height to be dynamic?
So that's the 'workarea' div and the divs contained within that. Obviously the 'pagenav' div is a left hand div that I want to extend to the full length of the 'workarea'.
The 'pagecontentimage' is fixed height/width but the 'pagecontent' div needs to be dynamic depending on the content. Is that possible?
So if I have a little peice of content (text) in this div I would like a minimum height but if this contains a lot of content I want this to expand to show everything and also for the 'pagenav' to expand to the height as well. Does that sound clear?
The content is pulled from a database so I have no idea (to a certain extent) how much data I will put into these divs.

At the moment, the 'workarea' is a fixed height as are the other divs in that div.

 

[Vragabond]

Omitting the height, your divs will do what you ask -- they will grow/shrink depending on the amount of content within them. However, they cannot react to each other's lengths, so if productcontent is long and pagenav is short, workarea will be expanded to fit productcontent, but pagenav will end earlier. The same will be true if the lengths are reversed.

The only way to combat that (without using javascript to calculate the height of a longer column) is to use faux columns.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[d0nny]

What is slightly frustrating is that if I had used tables (which is what I was brought up on), then I wouldn't have this problem!

So why have we made a simple problem a hard one to fix!?

Ho hum. Thanks.

 

[Vragabond]

Because this is one of the problems that is more complex using CSS positioning techniques versus the tables. A myriad of other problems can be solved much simpler with CSS than they were with tables. And finally, because tables should contain tabular data, not page structure.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[d0nny]

I know. That's the usual response I get when I talk about tables, but tables were used for years before CSS came along and there wasn't any debate then about "tables should only contain tabular data".

I do understand your argument, but it seems that through the introduction of CSS, there are a number of problems with layout, which is what CSS was designed to do.

Anyway, its all done now and I'm not going to change that, but thanks agains for your advice.

 

[BillyRayPreachersSon]

tables were used for years before CSS came along and there wasn't any debate then about "tables should only contain tabular data".

Obviously - because there wasn't a better way back then!



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[d0nny]

Yes, but my point is that there is supposedly a 'better' way of laying out pages now but you have to do a myriad of workarounds to get it to do what you want it to.
Whereas with tables, it was easy(ier).

Anyway, who's says its better?
I'm sure this is not the right forum to start a debate on that and I bet this has been done to death anyway. I'm just saying nobody complained about laying out a page in tables way back then but now there seems to be a 'better' way, even though it isn't better cos I've now got to write loads of other bits and pieces just to fix it the way I want it.

Oh well... I'll take you're word for it that its 'better', but it certainly doesn't feel that way.