I have set a CSS property table-cell for a div. I have also specified the width for the div and set overflow hidden, but because of the table-cell property the div does not care about the width. If I place any large image, it goes out of the width.
How can I use the table-cell and use the fixed width for the div?
.right{
display: table-cell;
overflow: hidden !important;
vertical-align: top;
width: 400px;
}
Strange, this JSFiddle seems to work for me.
What browser are you having problems in?
Also, to force a maximum width for your table cells, use the max-width property. You can see it here, and the code is below.
HTML:
<div class='table'>
<div class='tr'>
<div class='right'>hey</div>
</div>
</div>
CSS:
.table {
display: table;
}
.tr {
display: table-row;
}
.right{
display: table-cell;
overflow: hidden !important;
vertical-align: top;
max-width: 400px;
outline: 1px solid #888;
}
display: table-cell will follow the table sizing rules - if the content is too big, it will expand to make it fit.
Do you really need to use display: table-cell? To make it work, you'd have to wrap it in another div, give it a width of 400 and set it to overflow: hidden but that seems counter-productive.
Related
I have the following problem: I am creating an inline-block element (.content) within a wrapper-div (.wrapper). If there is content in the .content-div, everything works just fine. But if I remove the content from the .content-div, a space gets added below the inline-block-div.
I am not sure why this happens and how to fix it correctly. Note that after manually removing all spaces and line-breaks in my code the problem persists, but setting the font-size to 0 helps.
Also, setting vertical-align: top to the .content-div helps. I am not sure why exactly.
Whats the best way of fixing it? Why does this happen?
Fiddle: https://jsfiddle.net/cjqvcvL3/1/
<p>Works fine:</p>
<div class="wrapper">
<div class="content">not empty</div>
</div>
<p>Not so much:</p>
<div class="wrapper">
<div class="content"></div>
</div>
.wrapper {
background-color: red;
margin-bottom: 20px;
/* font-size: 0; *//* this would fix it, but why? (problem persists after manually removing all spaces and breaks) */
}
.content {
display: inline-block;
height: 20px;
width: 200px;
background-color: green;
/* vertical-align: top; *//* this would fix it, but why? */
}
Update
I have put together a new fiddle. This should better illustrate my problem. How do I get rid of the green line below the textarea?
https://jsfiddle.net/cjqvcvL3/7/
<div class="content"><textarea>Some
Content</textarea></div>
.content {
display: inline-block;
background-color: green;
}
This happens because you specifically give width and height to the .content.
Have you considered using the :empty pseudo selector?
.content:empty {
display: none;
}
https://jsfiddle.net/cjqvcvL3/5/
Setting your the content display to block instead of inline-block fixes the problem.
.content {
display: block;
height: 20px;
width: 200px;
background-color: green;
/* vertical-align: top; *//* this fixes it */
}
This explains why setting vertical-align to top fixes the problem as well:
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.
Here is a working example: jsfiddle
To remove the gap, you have to surround the content div with a wrapper with font-size:0.
The reason is exained here: answer
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
This value causes an element to generate one or more inline boxes.
The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline box and thus take up space.
.wrapper2 {
background-color: red;
margin-bottom: 20px;
font-size:0;
}
I would like to center and clamp the dimensions of a child div inside its parent.
<style type='text/css'>
.parent {
width: 100%;
height: 100%;
}
.child {
max-width: 100%;
max-height: 100%;
}
</style>
<div class="parent">
<div class="child">
<img src='dog.jpg' />
</div>
</div>
Here are the constraints:
The parent div is set to occupy the entire screen (of unknown size), so width:100% and height:100%.
The width and height of the child div are unknown. In one use case, the child div contains an image. In another, it contains a video.
The width and height of the child div must be constrained to the size of the parent, so max-width: 100% and max-height: 100%.
The child div must be vertically and horizontally centered inside the parent.
Ideally, this should work without javascript.
IE can be left unsupported :)
I've tried all the techniques listed in this excellent article, 'Absolute Centering in CSS' , and none of them pan out. Here's why:
Absolute centering: In order for this technique to work with a child of unknown size, you must set display:table on the child. You can then constrain the max-width of the child's contents, but not the max-height, because by CSS 2.1 rules, tables render to fit their contents.
Negative margins: Doesn't allow for variable height.
Transforms: Undesirable because it can result in blurry rendering.
Table-cell: Fails for the same reason that absolute centering fails, i.e. table rendering.
Inline-block: Doesn't work in the important case where the child is 100% width.
Flexbox: Works well until a window resize occurs, at which point you have to force a Webkit redraw to propagate the centering changes. This hack does the job, but it's still a hack. I want to believe there's a more elegant solution to this.
Best solution here is to use :before pseudo element. Check out this article on centering the unknown, http://css-tricks.com/centering-in-the-unknown/
SEE THE DEMO HERE
body,html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
text-align: center;
background: #ccc;
width: 100%;
height: 100%;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.image {
display: inline-block;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
You could use display:table and display:table-cell like so Jsfiddle. Though this will just center the image of the child div.
If you need to have a centered div around the image you could always add another div inside of the child div with the style display: inline-block example
I know when we set margin left and right to auto value for an html block element that has a specified width, then the element has center position.
But if I want to wrapper to have auto size depend on content, I set display : inline-block, but now center position is not working.
What should I do?
If you're setting display: inline-block to an element you can have a wrapper to that element with:
.wrapper {
text-align: center;
}
Demo: http://jsfiddle.net/sGaTZ/
If you don't want to use a wrapper, you can try this:
<div class="box">test</div>
and the CSS:
.box {
display: table;
border: 1px solid blue;
margin: 0 auto;
}
Using display: table with no specific width will cause the box to shrink-to-fit the content. You can then center it using margin: 0 auto.
Demo fiddle: http://jsfiddle.net/audetwebdesign/FdnGs/
<div id='container'>
<div class='left'></div>
<div class='right'></div>
<div class='clear'></div>
</div>
Given the simple markup above, which can be seen in action here at jsFiddle, how do you get the floated right div to take up the remaining height of its parent container that doesn't have an explicit height? The parent container's final height is determined by the floated left div.
Typically, I solve this issue through Javascript, and fix the heights after the page has loaded. But, there must be an alternative, standard, and optimal method of how this is handled.
I think this is just an inherent issue of structuring a layout this way, so what is the alternative beyond using a <table>?
Can't be done without explicit height on the parent using floats.
You can however use display: table-; and table-cell which mimics the behavior of tables without actually using them:
#container {
width: 200px;
background-color: green;
display: table;
}
.left {
display: table-cell;
width: 30px;
height: 200px;
background-color: red;
}
.right {
display: table-cell;
height: 100%;
width: 30px;
background-color: blue;
}
This way you don't need the clearing element and the two divs will always take up 100% of the height, as long as it's declared.
http://jsfiddle.net/6XagR/4/
Need to show the div width in percentage when the image is missing. Since images are loading dynamically I cant fix the image size. All image sizes are mentioned in percentage. So how do we get the div proper width when there is no image loaded.
Here is the demo.
http://jsfiddle.net/7LfMV/2/
Try to change table-cell to inline-block - http://jsfiddle.net/7LfMV/4/
.wraptocenter {
display: inline-block;
text-align: center;
vertical-align: middle;
width: 60% /*Div should take this width*/;
background-color:#999
}
http://jsfiddle.net/7LfMV/5/
remove display: table-cell; and add an height to the div
Use min-height, min-width to set the height, width when there is no image.
Since you are using display:table-cell I guess you are centering the image inside the div, this will do it.
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
border: 1px solid red;
min-height:300px;
min.width:300px;
}
Fiddle Here http://jsfiddle.net/7LfMV/6/