0

I have an image (img tag) and a div, whose display property is set to flex.
div and img are placed in a row. They are floated.
I want to apply margin-left to the div but it does not work, unless I set the display property of the div to inline-block.
I've explored StackoverFlow, the nearest post to my case is this one. But that so post does not make me understand what's going on. As it can be seen in the image below, the margin of div on the left, overlaps with the image. Why? why isn't it pushing the div to right?: enter image description here

Here is my code:
html

<div id="traffic">
  <p>Traffic</p>
  <img  id="chart" src="https://www.syncfusion.com/products/flutter/control/images/chart/chart-types/flutter-multiple-axis-charts.png" alt="" srcset="">
  <div id="traffic-infos"></div>
</div>

css

#traffic {
  background-color: rgb(255, 255, 255);
  padding: 15px 15px 15px 15px;
  overflow: auto;  /* so the container resized its height */
}

#traffic-infos {
  display: flex;
  flex-direction: column;
  margin-left: 40px;
  height: 300px;
  background-color: black;

}
#chart{
  width: 100%;
  max-width: 850px;
  min-width: 600px;
  height: auto;
  float: left;
}

the same code in JsFiddle: https://jsfiddle.net/shahryarslg/xmo5uahv/8/

The whole problem is solved if I change the display of traffic-infos class to inline-block. But I want to understand how display is related to this problem? what's going on? Thanks in advance.

Community
  • 1
  • 1
Shahryar Saljoughi
  • 2,599
  • 22
  • 41
  • I have added this value margin-left: 100px; instead of the existing one which was margin-left: 40px; and added a border solid red for the div element. See how it works below . It seems the div element pushes to the right more . This may gives you a hint – Alan M Dec 07 '19 at 16:36
  • below? below where? @AlanM – Shahryar Saljoughi Dec 08 '19 at 07:58

1 Answers1

0

You need to set the margin on the floated element:

#chart {
  margin-right: 40px;
}
Petr
  • 111
  • 7
  • I did know that I can set margin on the image and it will work. My question is WHY it is not working if I set margin on the `div` element beside the image. – Shahryar Saljoughi Dec 08 '19 at 05:33