laying out controls - width issues

[kotinkarwak]

In laying out a page, I am struggling to understand how to force a child to be within the boundary of a parent.
The parent is a title panel control whose width is set as 98%. The child a table control has its width at 100%. If I have data that is larger, then the table expands to fit and "overflows the limits of the parent.

In the image, the parent's boundary is marked by dotted green line and table is overflowing.
http://screencast.com/t/6th5BXJs

[Jon]

A browser will try and respect your width settings but there are some things that will force it to overflow. In your case, there just isn't room to fit the data within the space. Another thing that frequently causes problems (not in your case) is data entry fields or table columns - the length of these is honoured by the browser at the expense of the overall width. You can also use the CSS white-space rule to change the default for text wrapping. But this only allows the browser to wrap when it comes across a space in a sentence - which you don't have in your example.

In your case, there just isn't enough room for the data, so you need to do one or more of these:

• increase the available width
  display less data
  reduce the number of columns
  reduce the font size
  display the data differently e.g. in a Repeater Control on multiple lines
  use CSS overflow to constrain the total width and then allow the user to scroll

[kotinkarwak]

Thanks Jon,
Used repeater control which achieves a better layout as suggested.

Repeater Control

[kotinkarwak]

Just appending to this thread since issue is related.
I have a container marked with a height of 360px, in the image, its the one with <b>orange</b> border.
The child which is a tab control is overflowing the parent but assumed a scroll bar would have kicked in at this point. No height settings is implemented for the tab control or its parent container. The red marker is for the container panel

structure is
Panel (360px height)
Panel (No settings)
Tab control (No settings)


Please see image
http://screencast.com/t/X5BdO4dxi6

[Jon]

Sounds like you need to specify a height, or perhaps a max-height on the tab control and also add overflow. You won't see a browser scroll bar unless you specify overlow: scroll.