Here is a jsfiddle where you can see cells expanding outside of their container(or extending the size of a table when this happens with tables) because:
of a long word even if "word-wrap: break-word" is set
of a large div even if "overflow: hidden" is set
http://jsfiddle.net/NUHTk/166/
<div class="container">
<div class="leftBlock">
Too-much-text-ъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъъ
</div>
<div class="rightBlock">
Right block content
</div>
</div>
<div class="container">
<div class="leftBlock">
<div style="width: 1200px; height: 200px;">
Huge element
</div>
</div>
<div class="rightBlock">
Right block content
</div>
</div>
CSS
.container
{
width: 500px;
padding: 10px;
margin: 20px auto;
background: rgb(255,240,240);
}
.leftBlock, .rightBlock
{
display: table-cell;
vertical-align: top;
}
.leftBlock
{
width: 100%;
//max-width: 0;
word-wrap: break-word;
overflow: hidden;
background: rgb(240,255,255);
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
background: rgb(200,200,200);
}
This issue can be fixed by adding a "max-width: 0" to .leftBlock, result of which can be seen here:
http://jsfiddle.net/CyberAP/NUHTk/103/
This same problem and fix can occur when dealing with tables.
This feels like a hack. My questions are:
why does max-width: 0 solve the problem.
Why and how does it change the behavior of the cell sizing.
I guess, why isn't this the default behavior?
You can add display:table; and table-layout:fixed to container class. Hope this is solve your issue.
Related
it looks that textarea don't respect the css max-width when is setted to 100% and it is ok when setted to fixed pixels
<textarea cols="80">text here</textarea>
and
max-width: 100%;
or
max-width: 100px;
See the snippet code for max-width: 100%:
.table {
width: 100%;
display:table;
}
.table-cell {
display: table-cell;
padding: 10px;
width: 300px;
background: #DAC082;
}
textarea {
max-width: 100%;
}
<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
and see the snippet code for max-width: 100px:
.table {
width: 100%;
display:table;
}
.table-cell {
display: table-cell;
padding: 10px;
width: 300px;
background: #DAC082;
}
textarea {
max-width: 100px;
}
<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
Note that in the first example the textarea is overriding the css max-width 100%, I suppose it is wrong and It should be into 300px of table-cell width.
In the second example textarea stay into 100px: It works.
N.B. my browser is Firefox ESR 60.3. Is a firefox bug?
Have you tried
textarea {
width: 100%;
}
this worked for me and matched the width of whatever I set in .table-cell
Table cells have a tendency to treat their width properties as hints rather than being set in stone.
One solution is to put an extra div in the table cell around the content, and set the width of that one. Then the textarea will honour it.
.table {
width: 100%;
}
.table-cell {
display: table-cell;
padding: 10px;
background: #DAC082;
}
.table-cell>div {
width: 300px;
}
textarea {
max-width: 100%;
}
<div class="table">
<div class="table-cell">
<div>
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
</div>
Update: after it has become more clear what you want, a new solution is as follows: don't assign width properties to the table, but assign them to the content instead; then the table will mold itself to its contents rather than vice versa.
.table {
display: table;
}
.table-cell {
display: table-cell;
padding: 10px;
background: #DAC082;
}
textarea {
max-width: calc(100vw - 16px - 20px); /* = viewport - body margin - cell padding */
}
<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
The max-width of the textarea is the width of the viewport, minus the margin of the body and the padding in the cell. You can adjust this to your needs of course!
I'm having problems with the attibute "word-wrap:break-word;" when trying to align horizontally with another DIV and its inside a DIV. Easy to understand my problem seeing this two examples:
#container {
height: auto;
overflow: hidden;
}
#left {
background-color: green;
width: 120px;
height: 20px;
overflow: hidden;
}
#right {
width: calc(100% - 120px);
float: right;
height: auto;
display: inline-block;
word-wrap: break-word;
background-color: red;
}
<div id="container">
<div id="right">AAAAAAAAAAAAAAAAAAAAA</div>
<div id="left"></div>
</div>
http://jsfiddle.net/galacticpower/a3nyxhtj/4/
Here, if the navigator is resized, the right div text is broken as needed! Yeah!
Adding a div inside the right div and its style comes the problems...
#inside_right{
width: auto;
display: inline-block;
word-wrap:break-word;
background-color: yellow;
}
<div id="container">
<div id="right">
<div id="inside_right">AAAAAAAAAAAAAAAAAAAAA</div>
</div>
<div id="left"></div>
</div>
http://jsfiddle.net/galacticpower/a3nyxhtj/3/
Here if the navigator is resized the "word-wrap:break-word" attribute is lost. The text is not broken! I need to apply some style in a div inside the right div without losing this behaviour.
To summ up, I want that the words were broken in the second example...
Any ideas?
Thank you so much!
Simply apply max-width: 100% to force the letters to actually break inside the inline-block #inside_right
#container {
height: auto;
overflow: hidden;
}
#left{
background-color: green;
width: 120px;
height: 20px;
overflow: hidden;
}
#right{
width: calc(100% - 120px);
float: right;
height: auto;
display: inline-block;
word-wrap:break-word;
background-color: red;
}
#inside_right{
width: auto;
display: inline-block;
word-wrap:break-word;
background-color: yellow;
max-width: 100%;
}
<div id="container">
<div id="right">
<div id="inside_right">
AAAAAAAAAAAAAAAAAAAAA
</div>
</div>
<div id="left"></div>
</div>
The problem is in "display". You use:
#inside_right{display: inline-block;}
And browser thinks that all the text inside this div is only one symbol.
you may use display: block and work with width of inside div.
This should help!
Lose the 'display: inline-block' from '#inside_right'. I don't see why you need it on '#right' either, but the property on '#inside_right' is tripping you up.
This simple bit of code works great in WebKit browsers but fails in IE and Firefox. I need to use the img tag for other functionality so background-image is not an option.
Snippet
img {
max-width: 100%;
height: auto;
}
.vgp-dtable {
width: 100%;
max-width: 860px;
margin: 0 auto 1em;
display: table;
}
.vgp-dtable .row {
display: table-row;
}
.vgp-dtable .row .art,
.vgp-dtable .row .txt {
display: table-cell;
vertical-align: top;
}
.vgp-dtable .row .art {
width: 30%;
text-align: right;
}
.vgp-dtable .row .art img {
width: auto;
max-height: 280px;
}
.vgp-dtable .row .txt {
width: 70%;
text-align: left;
padding-left: 8px;
}
<div class="vgp-dtable">
<div class="row">
<div class="art">
<img src="http://vgpavilion.com/mags/1982/12/vg/ads/003-004-005_tn.jpg">
</div>
<div class="txt">
<p>Here's some sample text.</p>
</div>
</div>
<a id="riddle-of-the-sphinx"></a>
<div class="row">
<div class="art">
<img src="http://vgpavilion.com/mags/1982/12/vg/thumbs/007.jpg">
</div>
<div class="txt">
<p>Here's some sample text.</p>
</div>
</div>
</div>
In WebKit the images properly resize to fit the 30% wide container block with a maximum height of 280px. In Firefox and IE, however, only the max-height is respected and the images force their container to become wider than 30%.
A simple example here. The simple example has a working version using a float method above the broken display:table implementation.
You can see the full page here
I have tried a number of combinations of containers and the images will never respect the width unless specified in absolute terms when in Firefox or IE. In a previous instance I went with the background-image solution that works in all tested browsers but really didn't want to. I found a solution by using a float rather than display: table-cell but it's confounding me that it is broken using a nearly identical table method in IE and Firefox so perhaps someone out there can spot something I'm missing or that I shouldn't have added.
simply add table-layout:fixed here:
.vgp-dtable {
width: 100%;
max-width: 860px;
margin: 0 auto 1em;
display: table;
table-layout: fixed /*added*/
}
I have a header with a div which have display:table; max-width: 800px. It should act as a frame to restrict the contents width. Inside the frame are images which auto-scale and are nested inside div's with display:table-cell.
Everything is working on Chrome and Mobile Safari, but Firefox and IE are not restricting the frame width.
jsFiddle
Can anybody help me, please ;(
Set the table to have table-layout: fixed and a width of 100%.
.frame {
display: table;
max-width: 800px;
width: 100%;
height: 300px;
margin: 0 auto;
padding: 10px;
background: #ccc;
table-layout: fixed
}
.item {
display: table-cell;
vertical-align: middle;
padding: 0 5px;
}
img {
max-width: 100%;
height: auto;
}
<div class="frame">
<div class="item">
<img src="http://lorempixel.com/250/250" />
</div>
<div class="item">
<img src="http://lorempixel.com/250/200" />
</div>
<div class="item">
<img src="http://lorempixel.com/250/100" />
</div>
</div>
Check this Fiddle
Replace max-width to width from image css, the reason behind this is max-width does not apply to inline elements, so you will get inconsistent behavior across browsers.
img {
width: 100%;
height: auto;
}
I want to build a container that contains an image on the left side and to its right there is supposed to some information about it, like a headline and some description.
I want the container to be able to expand between some minimum and maximum width dynamically. The images can also have different widths between two boundaries and if the container already has a maximum width, but the headline is longer, the headline should be shortened and there should appear some dots.
I found a way to shorten the headline, like here: http://jsfiddle.net/h0452569/
, but therefore I need to limit the width of the container next to the image. I tried this with the code below, but I can't find a way with CSS to dynamically limit the div width to not extend the container's div!
I would be very happy if anyone had an idea out there!
jsfiddle
HTML:
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
<div style="clear:both"></div>
CSS:
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
position: absolute;
border: 1px solid #666666;
white-space:nowrap;
}
.image {
float: left;
display: inline-block;
vertical-align: top;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.meta-container {
overflow: hidden;
text-overflow:ellipsis;
display: inline-block;
}
.headline {
width: 100%;
white-space:nowrap;
}
.description {
font-size:.8em;
}
In the example you refer to, those styles are added to the text element itself. In your design, the styles are given to the parent element.
Solution: add the styles to .headline instead of .meta-container.
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
border: 1px solid #666666;
overflow: hidden;
}
.image {
float: left;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.headline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.description {
font-size: .8em;
}
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
</div>
<p>Next element</p>
In order to break the word use "word-wrap: break-word" in your .headline class, you also need to set a width (in px). For example:
.headline{
width:100px;
word-wrap: break-word;
}