0

I've Three SECTIONS one below each other as mentioned in code below: 

   <!DOCTYPE html>
<html><head><style>
.table {color:black; display: table; width:98%; margin: 5px; padding: 0; min-width:500px; }
.row {display:table-row; padding: 0; margin: 0; vertical-align:middle; }
.cell {padding: 0; margin: 0; vertical-align:middle;}
.one {float:left; border-right:1px solid #e5e5e5; padding-top:5px; text-align:center; display:table-cell; width:6%; min-height: 50px;}
.oneq {float:left; padding-bottom:5px; border:1px solid #e5e5e5; display:table-cell; width:94%; min-height: 90px;}
.two {float:left; padding-top:5px; display:table-cell; width:88%; min-height: 50px;}
.tre {float:left; padding-top:5px; text-align:center; display:table-cell; width:5%; min-height: 50px;}
label { display: block; color: #000066;}

.loginform li {
display: inline; 
list-style: none;
}
}
</style></head>
<body style="margin: 0px;">
<br><section class="loginform" id="middle" style="min-width: 500px; margin: 1px auto;">
<fieldset style="border-radius: 5px; padding: 5px; min-height:150px;"><form method="post"><div class="table"><div class="row"><div class="cell oneq"><span class="cell">Sample Text Sample Text Sample Text Sample Text </span></div> <div class="cell tre"><span class="cell"> </span></div></div><div class="row"><div class="cell one"><span><input type="radio" name="optia" value="a" id="optia" /> A </span></div><div class="cell two"><span class="cell">Sample Text</span></div> <div class="cell tre"><span class="cell"></span></div></div><div class="row"><div class="cell one"><span><input type="radio" name="optia" value="b" id="optia" /> B </span></div><div class="cell two"><span class="cell">Sample Text </span></div> <div class="cell tre"><span class="cell"></span></div></div><div class="row"><div class="cell one"><span><input type="radio" name="optia" value="c" id="optia" /> C </span></div><div class="cell two"><span class="cell">Sample Text</span></div> <div class="cell tre"><span class="cell"></span></div></div><div class="row"><div class="cell one"><span><input type="radio" name="optia" value="d" id="optia" /> D </span></div><div class="cell two"><span class="cell">Sample Text</span></div> <div class="cell tre"><span class="cell"></span></div></div><div class="row"><div class="cell one"></div><div class="cell two"><input type="submit" name="DEMO" id="DEMO" value="DEMO"></input></div><div class="cell tre"><span class="cell"></span></div></div></form></fieldset></section>
<section class="loginform" id="left" style="overflow-y: auto;" >
<fieldset style="border-radius:3px; padding:3px; height:200px; overflow-y:scroll; overflow:auto;" >
<ul style="padding:5px; margin-top:5px;">
One HERE<hr><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li>
<hr> DEMO Topic = 13<br> HERE SHOWN = 0</ul></fieldset>
</section>
<section class="loginform" id="right" style="min-width: 500px; margin: 1px auto;">
<fieldset style="border-radius: 5px; padding: 5px; min-height:150px;"> HERE IS TEXT</fieldset></section>
</body></html>

Here I want to re-arrange layout as mentioned in diagram below:

enter image description here

Here height of each section must auto adjust to the MAX Height of three SECTIONS. Three SECTIONS are with width ratio as 30 %, 40% and 30 % Can you please suggest, how can it be achieved.

Pawan Mude
  • 1,609
  • 6
  • 19
  • 32

1 Answers1

1

I can barely read your code, it is so cluttered. Anyway i would put all the "multiple" divs inside a parent container. Then use jquery to calculate the height of that container. Then pass that height to your other columns.

Here is a fiddle of what i mean: jsfiddle

$(document).ready(function()
                  {
                      var height = $('#referenceColumn').height(); //looks up the height of the div you need and puts it in a variable.

                      $('.column').css('height', height); //sets the column height of all div with the class "column"
                  });

You need to reference JQuery in the header. You can download it and make a local link or just put this between your html <head> tags.

<script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>

If you open the link to JS fiddle you can see in the CSS code the the default height of the columns are just 10px. When the document is ready i use a simple function to get the height from the div with the ID attribute. Then i change the CSS with jquery, simply set the height of the column class to the height we just looked up.

Madmenyo
  • 8,389
  • 7
  • 52
  • 99