CODEWITHSUNDEEP
htmlcsscss-floatmargin-left
Shahryar Saljoughi
Shahryar Saljoughi

Reputation: 3059

margin left not working when elements are floated and are block elements

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.

Upvotes: 0

Views: 1298

Answers (1)

Petr
Petr

Reputation: 111

You need to set the margin on the floated element:

#chart {
  margin-right: 40px;
}

Upvotes: 0

Related Questions