Home/ Questions/Q 8926841
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T08:04:54+00:00

I have an outer DIV as follows. When I check in the browser the

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0