How To Align Divs Vertically In Html And Css?
...
<body><divid="barChart_div"style="width: 600px; height: 250px;float:left; "></div><divid="stats_div"style="width: 350px; height: 250px; float:left;"></div><divid="lineChart_div"style="clear:left; width: 600px; height: 250px; "></div><divid="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.
Solution 2:
try
<body><divstyle="overflow:auto"><divid="barChart_div"style="width: 600px; height: 250px;float:left; "></div><divid="stats_div"style="width: 350px; height: 250px; float:left;"></div></div><divid="lineChart_div"style="width: 600px; height: 250px; "></div><divid="cdfChart_div"style="width: 600px; height: 250px;"></div>Solution 3:
Take a look to my example here
HTML
<body>
<div id="barChart_div" style="width: 145px; height: 250px;">aa</div>
<div id="stats_div" style="width: 350px; height: 250px;">bb</div>
<div id="lineChart_div" style="width: 600px; height: 250px;">cc</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;">dd</div>
</body>
CSS
#barChart_div, #stats_div { float:left; }
#lineChart_div { clear:left; }
Explaination
First of all remember that have an "in-line" CSS isn't a good practise. You have to prefer external CSS or internal (i.e. header) css.
However let's see that example: jsFiddle. As you can see, if you don't specify differently all your divs will result in an "ideal column". That's because the normal flow of the "html parser" will put them in that position.
If you do this with span element, instead, you obtain all the element on the same "line" (if they can stand and don't overflow, obviously). You can see that here.
When you tell float:left you're "forcing" the div to be floated at the "right margin" of the previous element.
Now, due to the second element floated, the third element will act at the same way.
For act as "standard" you have to use clear:left that will restore the "normal" behaviour
Solution 4:
If you can, change your source order so the stats_div comes first, then use float:right on just it.
Solution 5:
<div id="stats_div" style="width: 350px; height: 250px; float:right; background-color:#0099CC; border:1px solid black">custom</div>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">1</div>
<div id="lineChart_div" style="width: 600px; height: 250px; float:left;background-color:#0099CC; border:1px solid black">2</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">3</div>
paste it to your html, effect will be visible
Post a Comment for "How To Align Divs Vertically In Html And Css?"