[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?
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?
Here is example code that illustrates this. In my example, the inner div is
set to a fixed width, but for the web site I am developing, I will not know
the width of the inner div.
!DOCTYPE html
htmlheadtitleTest/title
style type=text/css
#wrap {
background:#CCC;
border:2px solid blue;
}
#contents {
width: 800px;
background:#99F;
border:2px solid yellow;
}
/style
/head
body
div id=wrap
Test
div id=contentstest/div
Test
/div
/body
/html
Thanks,
Stephen
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Content div sticking out the side of container div
Outer Div has a fixed width.
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Stevio
Sent: Friday, December 02, 2011 6:42 PM
To: Web Standards Group
Subject: [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?
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?
Here is example code that illustrates this. In my example, the inner div is
set to a fixed width, but for the web site I am developing, I will not know
the width of the inner div.
!DOCTYPE html
htmlheadtitleTest/title
style type=text/css
#wrap {
background:#CCC;
border:2px solid blue;
}
#contents {
width: 800px;
background:#99F;
border:2px solid yellow;
}
/style
/head
body
div id=wrap
Test
div id=contentstest/div
Test
/div
/body
/html
Thanks,
Stephen
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Content div sticking out the side of container div
On 12/3/2011 1:42 PM, Stevio wrote:
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?
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?
Here is example code that illustrates this. In my example, the inner
div is set to a fixed width, but for the web site I am developing, I
will not know the width of the inner div.
!DOCTYPE html
htmlheadtitleTest/title
style type=text/css
#wrap {
background:#CCC;
border:2px solid blue;
}
#contents {
width: 800px;
That is the problem right there, use either % or em units for defining
the widths of stuff a part from images and borders and that problem
should go away.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] Not near the computer... Re: WSG Digest
I'm away for family business. If I get a chance, I'll reply to your email. Most likely, though, it's gonna have to wait till I'm back. Pat -- Pat Ramsey Code that works,... Beautifully slash25.com @pat_ramsey 512.736.6227 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] I am currently out of the office Re: WSG Digest
I am currently out of the office on annual leave and will return on Monday, 12 December. If you have an urgent query, please contact the office on (02) 9319 7901 or email Catherine Grenfell on cather...@steptwo.com.au. Otherwise, I will respond to your email on my return. Kind regards Rebecca *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
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... HTH Russ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Re: WSG Digest
On Sat 03 Dec 2011 01:54:38 PM PST, wsg@webstandardsgroup.org wrote:
*
WEB STANDARDS GROUP MAIL LIST DIGEST
*
From: Stevioredea...@freeuk.com
Date: Sat, 3 Dec 2011 02:42:02 -
Subject: 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?
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?
Here is example code that illustrates this. In my example, the inner div is
set to a fixed width, but for the web site I am developing, I will not know
the width of the inner div.
!DOCTYPE html
htmlheadtitleTest/title
style type=text/css
#wrap {
background:#CCC;
border:2px solid blue;
}
#contents {
width: 800px;
background:#99F;
border:2px solid yellow;
}
/style
/head
body
div id=wrap
Test
div id=contentstest/div
Test
/div
/body
/html
Thanks,
Stephen
*
From: Greg Gamblegsga...@comcast.net
Date: Fri, 2 Dec 2011 18:51:15 -0800
Subject: RE: [WSG] Content div sticking out the side of container div
Outer Div has a fixed width.
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Stevio
Sent: Friday, December 02, 2011 6:42 PM
To: Web Standards Group
Subject: [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?
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?
Here is example code that illustrates this. In my example, the inner div is
set to a fixed width, but for the web site I am developing, I will not know
the width of the inner div.
!DOCTYPE html
htmlheadtitleTest/title
style type=text/css
#wrap {
background:#CCC;
border:2px solid blue;
}
#contents {
width: 800px;
background:#99F;
border:2px solid yellow;
}
/style
/head
body
div id=wrap
Test
div id=contentstest/div
Test
/div
/body
/html
Thanks,
Stephen
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
**
Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
**
Try using overflow, or perhaps max-width.
--
Regards
Alan C Whiteman | Visualis Web Design
(562) 305-2862 | http://visualiswebdesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Content div sticking out the side of container div
I have found a solution and that is to use display:table-cell.
I don't think table-cell is supported in IE7 and below. You may want to try
max-width *instead of* setting width on the inner container as was suggested
earlier. This works even in IE7. The underscore version of width is the
fallback for IE6:
#contents {
max-width: 800px;
_width: 800px;
background:#99F;
border:2px solid yellow;
}
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
