Home/ Questions/Q 8146519
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T14:01:51+00:00

I have the following html divs : … <body> <div id=barChart_div style=width: 600px; height:

  • 0

I have the following html divs :

...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...

what I am trying to do is to display the first div ( contains a bar chart) and the second div(contains some text fro the chart) next to each other, then below them display the other two divs (contain other charts) one after the other vertically i.e. I want it to look like:

desired

and what i get currently is :

actual

cdfChart_div (div4) is getting displayed on top of lineChart_div(div3).
What CSS style do i need to use to fix this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    On the div that comes immediately after the floated stats_div:

    style="clear:left;"

    Full code:

    ...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="clear:left; width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...

    Since stats_div is floated, its contents are taken out of the normal flow. Thus, the contents of the next div that is part of the normal flow does not make space for the contents of stats_div. You have have to clear one side of the next div if you want its contents to come after the contents of the previous floated div. Often you’ll see clear: both, which works on either edge of the normal flow div.

    • 0