CODEWITHSUNDEEP
csshtmlwidth
mcmwhfy
mcmwhfy

Reputation: 1686

div width is not working?

I have a problem with content from a div, for example if I put a table inside of a div and set a width (width:200px !important)for that div the table it will overwrite that div. So how is possible to keep all content inside that div?

fiddle example: http://jsfiddle.net/ebG9N/45/

Upvotes: 1

Views: 6598

Answers (4)

Shawn Taylor
Shawn Taylor

Reputation: 3969

There are two solutions.

i) IF you want to STRICTLY contain table WITHIN div then overflow:auto; is the way to go.

ii) BUT if you change your mind and want to WRAP div to the width of table then. display:table; is the way to go.

Generally its bad idea to contain wider element within explicitly known less wider element.

Upvotes: 2

Rohan Prabhu
Rohan Prabhu

Reputation: 7302

You can't just expect it to somehow fit within a div of any size you wish. What you can do is, at least allow the browser to scroll (overflow: scroll) it using:

div.divano{
    width:200px !important;
    border:2px solid yellow;
    background:#eaeaea;
    height:200px;
    overflow: scroll;
}

You may also use oveflow: hidden, but it would just hide the parts that are not visible. Also, overflow: scroll, will always show a scroll bar (with or without clipping). You can use overflow: auto to specify that the content should be scrolled only if clipping occurs.

Upvotes: 0

devOp
devOp

Reputation: 3180

Try using overflow:auto; in the css of the div.

Upvotes: 1

KARASZI István
KARASZI István

Reputation: 31477

You set the header to white-space: nowrap; therefore, the browser is unable to break the headers, so the width of the table will be bigger than the container div.

You can set, overflow: hidden; to cut the overflowing parts, or overflow: auto; to create a scrollbar, but without them it's the correct rendering.

Upvotes: 2

Related Questions