...

View Full Version : Trouble lining up stacked divs



jaycee32
04-04-2011, 02:59 PM
I'm writing up a simple page that uses a db to dynamically create a visual representation of a server rack. Because the cells are dynamically sized, from what I understand a table won't work. Instead I need to use different sized divs.

There is a number list on the left size of the rack indicating location. Each of these divs is 21px+1px border high. Therefore, I should be able to line up the right side divs by using the formula:

divheight = (22px * Usize) - 1

The -1 is because the right side divs have a bottom border of 1px also.

This works for the most part but at the bottom of most of the diagrams, things start to be off by 1 or 2px, seemingly at random.

I've attached some static sample code that you can preview in IE8 (what I'm testing against) to see what I'm talking about.

For instance, the 32u blank is off by 1px, even though the size is mathematically correct ( 22*32 - 1 = 703).

If I correct it in this instance to 702px (adjust height and line-height of .size32u to 702px), the 32u blank now lines up correctly. However, now the bottom 2u server and blank doesn't line up correctly!

Any help or explanation would be appreciated, even if it is "this is a bad way to do this, here is a better way."



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>MY TITLE</title>
<style type="text/css">
.rack {
padding: 0;
margin-left: auto;
margin-right: auto;
width: 400px;
border: 1px solid black;
font-size: 6pt;
}

.rack div{
text-align: center;
margin: 0;
}

.numlist{
float: left;
border-right: 1px solid black;
margin:0;
width: 22px;
text-align: center;
}

.numlist div{
border-bottom: 1px solid black;
margin: 0;
height: 21px;
line-height: 21px;
}

.size1u {
padding-left: 5px;
height: 21px;
line-height: 21px;
border-bottom: 1px solid black;
margin: 0;
}

.size2u {
padding-left: 5px;
height: 43px;
line-height: 43px;
border-bottom: 1px solid black;
margin: 0;
}

.size3u {
padding-left: 5px;
height: 65px;
line-height: 65px;
border-bottom: 1px solid black;
margin: 0;
}

.size32u {
padding-left: 5px;
height: 703px;
line-height: 703px;
border-bottom: 1px solid black;
margin: 0;
}

</style>
</head>
<body>
<div class='rack'>
<div class='numlist'>
<div>42</div><div>41</div><div>40</div><div>39</div><div>38</div><div>37</div><div>36</div><div>35</div><div>34</div><div>33</div><div>32</div><div>31</div><div>30</div><div>29</div><div>28</div><div>27</div><div>26</div><div>25</div><div>24</div><div>23</div><div>22</div><div>21</div><div>20</div><div>19</div><div>18</div><div>17</div><div>16</div><div>15</div><div>14</div><div>13</div><div>12</div><div>11</div><div>10</div><div>9</div><div>8</div><div>7</div><div>6</div><div>5</div><div>4</div><div>3</div><div>2</div><div>1</div>

</div>


<div class='size1u'>Switch</div>
<div class='size2u'>EMPTY (2u)</div>
<div class='size1u'>Switch</div>
<div class='size32u'>EMPTY (32u)</div>
<div class='size2u'>Server1</div>
<div class='size2u'>Server2</div>
<div class='size2u'>EMPTY (2u)</div>
</div>
</body>
</html>

Excavator
04-04-2011, 07:09 PM
Hello jaycee32,
I can't seem to get it to mis-align in anything I have. I've looked at it in FF4, IE9 as well as IE9's emulations of IE8, IE7 and various quirks modes. It seems to work in everything.

I did validate and condense some things ... maybe it will help -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MY TITLE</title>
<style type="text/css">
.rack {
width: 400px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
font-size: 6pt;
}
.rack div {
text-align: center;
margin: 0;
}
.numlist{
width: 22px;
margin: 0;
float: left;
border-right: 1px solid black;
text-align: center;
}
.numlist div {
line-height: 21px;
margin: 0;
border-bottom: 1px solid black;
}
.size1u, .size2u,
.size3u, .size32u {
margin: 0 0 0 22px;
padding: 0 0 0 5px;
border-bottom: 1px solid black;
}
.size1u {line-height: 21px;}
.size2u {line-height: 43px;}
.size3u {line-height: 65px;}
.size32u {line-height: 703px;}
</style>
</head>
<body>
<div class='rack'>
<div class='numlist'>
<div>42</div><div>41</div><div>40</div><div>39</div><div>38</div><div>37</div><div>36</div><div>35</div>
<div>34</div><div>33</div><div>32</div><div>31</div><div>30</div><div>29</div><div>28</div><div>27</div>
<div>26</div><div>25</div><div>24</div><div>23</div><div>22</div><div>21</div><div>20</div><div>19</div>
<div>18</div><div>17</div><div>16</div><div>15</div><div>14</div><div>13</div><div>12</div><div>11</div>
<div>10</div><div>9</div><div>8</div><div>7</div><div>6</div><div>5</div><div>4</div><div>3</div>
<div>2</div><div>1</div>
<!--end .numlist--></div>
<div class='size1u'>Switch</div>
<div class='size2u'>EMPTY (2u)</div>
<div class='size1u'>Switch</div>
<div class='size32u'>EMPTY (32u)</div>
<div class='size2u'>Server1</div>
<div class='size2u'>Server2</div>
<div class='size2u'>EMPTY (2u)</div>
</div>
</body>
</html>

jaycee32
04-04-2011, 08:07 PM
Thanks for the post Excavator. I copied your code and it is still off in my browser. Perhaps it is just a problem on my system. To verify, here is a screenshot of where it stops lining up on my system:

http://i52.tinypic.com/htv3m0.jpg

Which looks different from my original code (image below) but still off.

http://i54.tinypic.com/156rc3m.jpg

Here is an image of a 702px 32u block, where it lines up at the bottom of 7, but then the bottom 2 server and empty space start to get out of line.

http://i52.tinypic.com/2r2szdi.jpg

Can you verify that it all looks normal on your system? Then I will investigate what on my system is causing the problem.

Excavator
04-04-2011, 08:26 PM
Can you verify that it all looks normal on your system? Then I will investigate what on my system is causing the problem.

Here's a couple screencaps using the code I posted above.
This is a Windows7 box with FF4 and IE9. I used IE9's emulation of IE8 since I don't have the actual IE8 browser. Maybe that's the difference?

Caps:

jaycee32
04-06-2011, 05:53 PM
I verified that FF3 also looks correct. I'm going to try to test IE9 later to verify that is OK as well.

If that is the case, is there anything I can do to correct the IE8 display?

Excavator
04-06-2011, 05:56 PM
I verified that FF3 also looks correct. I'm going to try to test IE9 later to verify that is OK as well.

If that is the case, is there anything I can do to correct the IE8 display?

IE9 works correctly here too.
I don't have any idea what you need to do to fix IE8 since I am unable to reproduce the problem. Are you certain that your seeing the most recent edits and not some earlier cached version?

teedoff
04-06-2011, 06:13 PM
Could it have something to do with your browser's zoom settings? When I viewed Excavator's code in IE8 it looked fine. When I viewed in FF 3.6.14 it was way off. I zoomed out twice however and everything lined up.

Here are the screen captures I saw:

jaycee32
04-06-2011, 11:34 PM
Thanks guys, Teed got it. Somehow my zoom settings got off by a hair and that caused the bottom to be off by a pixel. Setting zoom to 100% fixed the problem.

Not sure whether to feel silly for the problem or sick from how much time I spent trying to fix it!

teedoff
04-07-2011, 01:56 AM
Maybe then some thought should go into your design and the fact that other users may run into this same problem.

Excavator
04-07-2011, 02:27 AM
Thanks guys, Teed got it. Somehow my zoom settings got off by a hair and that caused the bottom to be off by a pixel. Setting zoom to 100% fixed the problem.

Not sure whether to feel silly for the problem or sick from how much time I spent trying to fix it!


It's always been easier to keep things side by side, especially in a pixel tight layout like yours, when they share the same containing element. It might be a little more work for you but have a look at this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#rack {
width: 400px;
margin: 20px auto;
padding: 0;
border: 1px solid black;
background: #fff;
font-size: 0.6em;
}
.size1u, .size2u, .size32u {
margin: 0;
padding: 0;
border-bottom: 1px solid black;
text-align: center;
}
.size1u {line-height: 21px;}
.size2u {line-height: 42px;}
.size32u {line-height: 672px;}
.numlist {
line-height: 21px;
width: 22px;
float: left;
clear: left;
border-right: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="rack">
<div class='size1u'>
<div class="numlist">42</div>
Switch
</div>
<div class='size2u'>
<div class="numlist">41</div>
<div class="numlist">40</div>
EMPTY (2u)
</div>
<div class='size1u'>
<div class="numlist">39</div>
Switch
</div>
<div class='size32u'>
<div class="numlist">38</div>
<div class="numlist">37</div>
<div class="numlist">36</div>
<div class="numlist">35</div>
<div class="numlist">34</div>
<div class="numlist">33</div>
<div class="numlist">32</div>
<div class="numlist">31</div>
<div class="numlist">30</div>
<div class="numlist">29</div>
<div class="numlist">28</div>
<div class="numlist">27</div>
<div class="numlist">26</div>
<div class="numlist">25</div>
<div class="numlist">24</div>
<div class="numlist">23</div>
<div class="numlist">22</div>
<div class="numlist">21</div>
<div class="numlist">20</div>
<div class="numlist">19</div>
<div class="numlist">18</div>
<div class="numlist">17</div>
<div class="numlist">16</div>
<div class="numlist">15</div>
<div class="numlist">14</div>
<div class="numlist">13</div>
<div class="numlist">12</div>
<div class="numlist">11</div>
<div class="numlist">10</div>
<div class="numlist">9</div>
<div class="numlist">8</div>
<div class="numlist">7</div>
EMPTY (32u)
</div>
<div class='size2u'>
<div class="numlist">6</div>
<div class="numlist">5</div>
Server1
</div>
<div class='size2u'>
<div class="numlist">4</div>
<div class="numlist">3</div>
Server2
</div>
<div class='size2u'>
<div class="numlist">2</div>
<div class="numlist">1</div>
EMPTY (2u)
</div>
<!--end rack--></div>
</body>
</html>

jaycee32
04-07-2011, 03:33 PM
Thanks, that's perfect! It isn't really more work since I'm using PHP to generate the html.

Quick question: does the line-height directive make the height directive redundant?

Excavator
04-07-2011, 11:49 PM
Quick question: does the line-height directive make the height directive redundant?

It does. That's also how the text is vertically centered so it does two things at once.

As long as there is only one line of text. If there is a line break you will need to vertically center another way.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum