Title: How can I get a CSS table DIV to be constrained inside another DIV?
Tags: html;css
Question: I have an outer DIV as follows. When I check in the browser the outer DIV given the class colx2-right is the correct size of almost half of the area it's inside of.
.colx2-right {
float: right;
margin-bottom: 0;
width: 48%;
Inside of the above DIV I have a CSS table defined with:
div.container {
display: table;
If there is a lot of data in one of the columns then text overflows the edges of the colx2-right DIV. Is there some way I could get it to stay within the boundry of the colx2-right DIV?
I created a fiddle that shows the problem. Here you can see the color of the yellow and red backgrounds is just less than 50% but the red background does not constrain the table inside of it.
fiddle

Here is the accepted answer: I would say setting a width 100% on the div.container should make it work the way you want.
If that is not the case, I am probably not understanding your question correctly. It would help if you tossed an example in http://www.jsfiddle.net so there can be no confusion.
Another thought (though i've never used display: table on a div): since you used display: table, we might asume the div is in fact a table. That would also mean the table-layout properties apply.
Try setting table-layout:fixed; and setting the 100% width.
Comment for this answer: I tried width: 100% as an inline style but it did nothing. Seems like the inside DIV stretched as much as it wanted and took no account of the outer DIV. I am wondering if this is because I am using CSS tables (display: table).
Comment for this answer: Is it okay to use table-layout: fixed when I am using CSS tables? Hope the fiddle I uploaded better shows my problem. I did try table-layout and this does work for the table itself but then the text inside the right hand cells goes outside of the boundry of the table.
Comment for this answer: Well put your code up on jsfiddle. That way people can take a look at exactly what you have and try to fix it online.
Comment for this answer: Thats because you have `white-space: nowrap;`. Fixed in fiddle:http://jsfiddle.net/cK48u/1/


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2012:00:11/30/12', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css>', 'Title': 'How can I get a CSS table DIV to be constrained inside another DIV?', 'ViewCount': 2022, 'id': 13640894, 'user_AboutMe': None, 'user_AccountId': None, 'user_DisplayName': None, 'user_Reputation': None, 'user_Views': None, 'user_id': None}}