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*/
}
Related
It is necessary that the image went beyond the block .column, not cutting.
Image 850px
.column 225px
Image should load fully
How to make so that the picture is loaded completely?
The project is large, but the layout is such:
.content { display: inline-block; }
.column {float:right; width:225px;}
.slider {
width: auto;
max-width: inherit;
}
.slider img {
width: auto;
max-width: inherit !important;
max-height: inherit !important;
}
<div class="content">
<div class="column">
<div class="slider">
<div><img src='https://s-media-cache-ak0.pinimg.com/736x/2c/d0/19/2cd0197c5eb8c1f84e81734f97e80cd3.jpg' /></div>
</div>
</div>
</div>
This happened after installing the slick slider . Before this behavior was normal.
Maybe this is what you are looking for.
.content .column {overflow:visible;}
Im trying to use margin: auto; at the same time as i'm using the display: inline-block; css. Before i'm putting in the inline-block code it worked fine and the div was centered using margin auto. But now its not working anymore.
I want the Divs logo and contact_info to be inline and the div .inner to be centered.
.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
float: left;
}
.contact_info {
float: right;
}
HTML CODE
<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>
<div class="contact_info">
<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>
</div>
</div>
Remove inline-block from .inner class.
display: inline-block;
makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.
what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.
so you can use margin: auto to make it center.
I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.
see if this fiddle satisfies all your needs?
Just remove the inline-block property on your "inner" div :
.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}
.logo {
float: left;
background: red;
}
.contact_info {
float: right;
background: green;
}
<div class="container">
<div class="logo">logo</div>
<div class="contact_info">contact_info</div>
<div class="inner">inner</div>
</div>
You can do problem solve using this code
.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}
.logo{
display:inline-block;
width:auto;
}
.contact_info{
display:inline-block;
width:auto;
}
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.
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 vertically and horizontally center a div using the "table-cell" method because is not requiring a specific height, but unfortunately is not working without specifying a height.
Why is not working ?
I have this markup:
<section class="content-01 v-center">
<div>
<div class="container">
<div class="slogan text-center">
<h1>VERTICAL CENTERING</h1>
</div>
</div>
</div>
and this css:
.content-01.v-center {
display: table;
width: 100%;
}
.content-01.v-center>div {
display: table-cell;
vertical-align: middle;
margin-top: 0;
margin-bottom: 0;
float: none;
}
And here is a jsfiddle
Any ideas what am I doing wrong ?
Thanks!
The problem here is that the html and body tags end before the bottom of the viewport:
At the very least you would have to tell the browser that the height of the html and body elements is at least 100%:
html, body {
height: 100%;
}
As well as specifying a height for the container section:
.content-01.v-center {
/* ... */
height: 100%;
}
Here's an updated fiddle: http://jsfiddle.net/2ntK2/3/