tags:

views:

105

answers:

1

There is a div element I have complete control over, including its contents, associated JS event handlers and style options. This div will be inserted into some web page template I don't know anything about, i.e. it may be inserted into a table cell, or into complex div-based markup, etc. I need to be able to build this div in such a way that would allow it to occupy a predictable area inside the parent elements it's being inserted into.

  • How many positioning schemes for do I need to support for different use cases?
  • Are there any restrictions on the web page templates I'd better set so that my div construction subroutine doesn't turn into an unmaintainable mess?
  • What would be more natural, expanding the div to take 100% of available area, or resizing to the given width and height?
A: 

Personally, I would simply set it to fill the parent container (which can be a task in itself in CSS2).

This way, whomever is controlling the template can decide the eventual size of your div by influencing the parent container. If they want it to fill the container, they just leave is as-is - if they want to restrict it or position it in some way, they can place it in a block element and dictate the size/shape/positioning of the block.

CJM
Okay, thanks! Could you please also recommend a resource for solving the problem of filling the parent container with the div?
David Parunakian
Styling the DIV with width and height of 100% should fill the container, I would have thought, though you need to be wary of box model problems if you have margins and padding. Try it and log a specific question if you have problems.
CJM