When I resize the browser in internet explorer

Hey there can anyone please help me with this

When I resize the browser in IE then the two images display at the bottom initially all of them must display next to each other

All the HTML code is written in javascript you can’t change anything in HTML however you can change the code in CSS

HTML

<div class="card " data-tab="Climate Survey" data-tab_sub="Climate Survey" data-controluid="E215EDBB-055F-1995-ED3972A87BABCA7B"></div>
<div class="charts">
  <div id="Chart_Bar_4" class="chart" style="width: 441px; height: 300px;"></div>
  <svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" class="ct-chart-bar ct-horizontal-bars">
    <g class="ct-grids">

CSS

div.card {
  display: table;
  overflow: hidden;
}
.card .charts {
  position: relative;
  display: table-cell;
  vertical-align: middle;
}
.card div.chart {
  height: 100%;
  width: 100%;
}
/*.card .chart { min-height: 200px; }*/

.card table.chart {
  min-height: 0;
}
.card div.chart:empty {
  display: none;
}
div.card > div.chart-name {
  font-size: 16px;
  padding-bottom: 14px;
}
div.card > div.chart-key {
  font-size: 12px;
  padding-top: 5px;
  clear: both;
}
div.card > div.chart-key > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #dadada;
}
div.card > div.chart-key > span + span {
  margin-left: 5px;
}
.card {
  width: 100%;
  padding: 5px 20px 5px 20px;
  margin-bottom: 0px;
  background: #ffffff;
  box-shadow: 1px 1px 1px #dfdfdf;
  box-sizing: border-box;
}
.card {
  width: 100%;
  padding: 5px 20px 5px 20px;
  margin-bottom: 0px;
  background: #ffffff;
  box-shadow: 1px 1px 1px #dfdfdf;
  box-sizing: border-box;

The HTML that you are showing is very incomplete. I can’t recreate those information boxes from the HTML that you’ve posted. Can you post a link to the site?

Looking at the screen shot, it appears that the images are floating left and the lone one on the second row is snagging on the middle image in the top row instead of floating all the way to the left. If that is the case, then a good solution would be to use inline-blocks instead of floats but that will require different CSS.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.