Thanks for the suggestions. I am trying to develop a flexible layout (so I
do not want to set a width for the parent element) for web sites that will
be used in conjunction with a content management system. The width of child
element will therefore be unknown as well depending on what content and
images have been entered.
I would much rather that the browser's horizontal scrollbar appear for the
page than have the content stick out the side which looks very ugly and
messy.
Even if I specify a % for the child element, the contents of the child
element may be greater in width.
I have found a solution and that is to use display:table-cell. Even in 2011,
there are still situations where the use of tables in one form or another
still trumps other display options lol. If you want something that expands
and contracts to fit its contents, tables (the CSS variety) still seem to be
the best option.
----- Original Message -----
From: "Russ Weakley" <r...@maxdesign.com.au>
To: <wsg@webstandardsgroup.org>
Sent: Saturday, December 03, 2011 3:02 AM
Subject: Re: [WSG] Content div sticking out the side of container div
Somehow I do not seem to have come across this problem before. I have two
divs, one contained within the other. If the viewport of the browser is
resized to be smaller than the contents of the inner div, the inner div
sticks out the side of the outer container div, which continues to resize
with the browser.
Surely the outer div should stop shrinking when it reaches the width of
its inner div, even if the viewport continues to be shrunk?
This is actually normal behaviour (apart from earlier IE browsers).
Containers that are not given a set width will collapse based on the width
of the viewport (or based on any containing box.
However, if you have a parent element with no width defined, and a child
element with a width defined, the child element may poke out the sides (or
remain "visible") of the parent element. This is because the default
overflow behaviour of the DIV element is "visible".
How can I fix this so that the outer div will not become any smaller than
the width of its inner div, when the width of the inner div will be
unknown?
Well, there are all sorts of options here, depending on your need.
1. You could set the parent container to a size that is equal or larger than
the child element.
2. You could set the child element to a percentage width so that it would
never become larger than the parent.
3. You could sent the parent with some sort of overflow - such as hidden or
auto - to hide aspects of the child element (the aspects that appear outside
the parent element).
A lot comes down to what you want to achieve...
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
