CODEWITHSUNDEEP
htmlcss
Sami
Sami

Reputation: 7837

how to align divs vertically in html and css?

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?

Upvotes: 2

Views: 35153

Answers (5)

DonCallisto
DonCallisto

Reputation: 29912

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

Upvotes: 2

JohnB
JohnB

Reputation: 18972

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.

Upvotes: 9

Paweł
Paweł

Reputation: 409

<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

Upvotes: 0

Rodolfo
Rodolfo

Reputation: 4183

try 

<body>
<div style="overflow:auto">
  <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>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>

Upvotes: 2

chipcullen
chipcullen

Reputation: 6960

If you can, change your source order so the stats_div comes first, then use float:right on just it.

Upvotes: 0

Related Questions