html - How to divide jquery tab to 4 equal divs? -
I am using the jquery tab, and one of my tabs has 4 Google charts (each contained by a div) . I want to be located on each of the 1/4 of the tab area (north, south, east and west of Scren).
Right now my HTML is:
& lt; Div id = "chartsTab" & gt; & Lt ;! - Div which will catch the Volume column chart - & gt; & Lt; Div id = "chart_div_volume" style = "width: 400; height: 300" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "chart_div_midp" style = "width: 400; height: 300" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "chart_div_spread" style = "width: 400; height: 300" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "chart_div_volatility" style = "width: 400; height: 300" & gt; & Lt; / Div & gt; & Lt; / Div & gt; So my charts are below the other.
Here's a job.
HTML:
& lt; Div id = "chartsTab" & gt; & Lt ;! - Div which will catch the Volume column chart - & gt; & Lt; Div id = "chart_div_volume" class = "tab" & gt; & Lt; / Div & gt; & Lt; Div id = "chart_div_midp" class = "tab" & gt; & Lt; / Div & gt; & Lt; Div style = "clear: both" & gt; & Lt; / Div & gt; & Lt; Div id = "chart_div_spread" class = "tab" & gt; & Lt; / Div & gt; & Lt; Div id = "chart_div_volatility" class = "tab" & gt; & Lt; / Div & gt; & Lt; / Div & gt; Note that the use of the div with both clear at that place, where you want the force of a new line. Just adjust the desired width if you want to take it full screen, consider using%. But note that if the browser is re-shaped then% can get a wrong size. So if you type minimum-width . CSS:
. Tab {float: left; Width: 400px; Height: 3000px; }
Comments
Post a Comment