HTML DIV grouping & resizing based on windowsize

I created a html page where I want to show some charts. For every chart I wrote text. The chart is in a div, and the text is in a separate div although they belong to eachother.

When my window is small, the charts show in a vertical line under eachother which is ok. When the window is large, the divs are shown horizontal although the text and chart are separate. A picture will clearify what I am trying to explain:

I would like the text and chart toghether as one if that is possible? Thanks for your help and effort :).

EDIT: Examplecode:

<table><tr><td><div style="text-align: center;" class="span-5" >New sales orders versus previous year (100%)</div> <div id="ordcountVsPreviousYearDialChart_Object" class="span-3"></div> </td></tr></table>

For each of the charts its the same.I am using only 1 table 1 tr and 1 td. I am not using a css. The开发者_运维知识库 answer you gave makes me think of creating an inline css. I will try your solution. Thanks so far!

---

You can use the following code (look at fiddle — http://jsfiddle.net/kizu/tNwAU/)

<span style="display:inline-block;text-align: center;" class="span-5">
    <span style="display:block;">
        New sales orders versus previous year (100%)
    </span>
    <span id="ordcountVsPreviousYearDialChart_Object" class="span-3"></span>
</span>

There are inline-blocks, so they would always create lines of blocks, and they are better than floats for your case in many ways.

---

Could you show some HTML please? And possibly CSS as well?

What you want can be achieved following HTML:

<div class="block">
    <div class="graph">Graph goes here</div>
    <div class="text">Text goes here</div>
</div>

Your css will be similar to the following:

.block { display:block;width:someWidthPx;height:someHeightPx; }
.graph { display:block;width:someWidthPx;height:someHeightPx;float:left; }
.text { display:block;width:someWidthPx;height:someHeightPx;float:left; }

Because both grah and text are within the same div, they should stay together. The wrapping div 'block' does have to have a blocked width. floating graph and text within the block, will cause them to stand underneath each other.

Is this what you mean?

---

You can make div's that stack like that using float:left:

 ________   ____________   ___
|1 2 3 4 | |1 2 3 4 5 6 | | 1 |
|5 6     | |____________| | 2 |
|________|                | 3 |
                          | 4 |
                          | 5 |
                          | 6 |
                          |___|

jsFiddle example here