Geek Answers Handbook

Html5: how to align multiple divs without offset when changing browser

The problem is that I created a table and several arrows separately for different divs. But those divs cannot move and become larger or smaller at the same time if I change the browser or enlarge the page.

I am currently creating a large table. Inside this large table there are many small tables: for each row of blocks it is a table, so how many rows contain how many tables. The arrows are in the new div, its position is “absolute”, I change the position “left / top” to adjust its position.

Can someone suggest how I can solve this problem in advance.

<html> <head> <title>Dupont Model</title> <style type="text/css"> .table { //for tables position: absolute; width: 633px; height: 309px; left: 0px; top: -35px; } .NetMarginArrow { Position: absolute; width: 180px; height: 115px; left: 428px; top: 166px; } <------each arrow is asigned with a div class---> </style> </head> <body> <h3> Model</h3> <div class="table"> <!--for tables (each block)--> <table style border="0" cellpadding="0"> <!---a big table contains many small tables----> <td><table border="0" cellspacing="10" cellpadding="10"> <tr><td bgcolor="#C4E1FF"><b>Net Profit</b></td><td></td></tr> <tr> <td bgcolor="#F0F0F0"> {{net_profit}}</td> <tr><tr><tr> </tr> <tr><td bgcolor="#C4E1FF"><b>Sales</td></b></tr> <tr> <td bgcolor="#F0F0F0"> {{sales.sales__sum}}</td> <tr><tr><tr> </tr> </td></table> <td><table border="0" cellspacing="10" cellpadding="10"> <tr><td bgcolor="#D2E9FF"><b>Gross Margin</b></td><td></td></tr> <tr> <td bgcolor="#F0F0F0"> {{gross_margin}}</td> </tr> <tr> <tr><td bgcolor="#D2E9FF"><b>Tax</b></td><td></td></tr> <tr> <td bgcolor="#F0F0F0"> {{tax}}</td> </tr> <tr> <tr><td bgcolor="#D2E9FF"><b>Total Expenses</b></td></tr> <tr> <td bgcolor="#F0F0F0"> {{total_expenses}}</td> </tr> <tr><td></td></tr><tr><td></td></tr><tr><tr> </td></table> </table> </div> <!----each arrow has a div----> <div class="NetMartinArrow"> <td><table border="0" cellpadding="0"> <!--Arrow after Net profit--> <td>&larr;<td><table style="height:230px;width:15px;border-color:000000;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-width:2px"><tr><td valign="top"></td></tr></td></table> </td></table> </div> ............................same to all arrows............. </body> </html>
+8
javascript html css
source share
3 answers

I'm not sure where in the code you are using the .NetMarginArrow css class. In addition, css is case sensitive. In your code, "p" is the capital of the position in the .NetMarginArrow class. Make sure the html body is at 100% height. A container acts like a wrapper for all of your items. Please try the code below.

 <html> <head> <title>Dupont Model</title> <style type="text/css"> html, body { height: 100%; } #container { position: relative; } .table { //for tables position: absolute; width: 633px; height: 309px; left: 0px; top: -35px; } .NetMarginArrow { position: absolute; width: 180px; height: 115px; left: 428px; top: 166px; } <------each arrow is asigned with a div class---> </style> </head> <body> <h3> Model</h3> <div id="container"> <div class="table"> <!--for tables (each block)--> <table style border="0" cellpadding="0"> <!---a big table contains many small tables----> <td><table border="0" cellspacing="10" cellpadding="10"> <tr><td bgcolor="#C4E1FF"><b>Net Profit</b></td><td></td></tr> <tr> <td bgcolor="#F0F0F0"> {{net_profit}}</td> <tr><tr><tr> </tr> <tr><td bgcolor="#C4E1FF"><b>Sales</td></b></tr> <tr> <td bgcolor="#F0F0F0"> {{sales.sales__sum}}</td> <tr><tr><tr> </tr> </td></table> <td><table border="0" cellspacing="10" cellpadding="10"> <tr><td bgcolor="#D2E9FF"><b>Gross Margin</b></td><td></td></tr> <tr> <td bgcolor="#F0F0F0"> {{gross_margin}}</td> </tr> <tr> <tr><td bgcolor="#D2E9FF"><b>Tax</b></td><td></td></tr> <tr> <td bgcolor="#F0F0F0"> {{tax}}</td> </tr> <tr> <tr><td bgcolor="#D2E9FF"><b>Total Expenses</b></td></tr> <tr> <td bgcolor="#F0F0F0"> {{total_expenses}}</td> </tr> <tr><td></td></tr><tr><td></td></tr><tr><tr> </td></table> </table> </div> </div> <!----each arrow has a div----> <div class="NetMartinArror"> <td><table border="0" cellpadding="0"> <!--Arrow after Net profit--> <td>&larr;<td><table style="height:230px;width:15px;border-color:000000;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-width:2px"><tr><td valign="top"></td></tr></td></table> </td></table> </div> ............................same to all arrows............. </body> </html>

I added a container as a wrapper for all of your HTML elements.

+3
source share

I believe that your problem may be "or so I think", that you may need to use the percent sign,%. I know that on the very first day of HTML creation, which I learned that% is better than PX, BECAUSE if you change to a different resolution, there is a problem similar to the one you are talking about. So try using 1-100% on your page. I believe that it makes it scalable and applies to your current screen. In any case, try this. In the case when I explained a little: with the help of percent you can achieve something in this regard to do something like this: <div id="EXAMPLE" style="height:1%;length:100%;"></div> This would make the DIV element stretch the entire page and occupy 1% of the relative height of the screen, starting from the top of the page. This works with positioning, and in any other place where you can use "PX", there are also "EM" and other ways to do this, but I personally use%. It's all.

+3
source share

keep everything fixed in place.
div { position: fixed; }
and use #someid { position: relative; } for the arrows to appear in the appropriate places

+3
source share

More articles:


All Articles