Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Trouble lining up stacked divs

    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."

    Code:
    <!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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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:



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



    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.



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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jaycee32 View Post
    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:
    Attached Thumbnails Attached Thumbnails Trouble lining up stacked divs-ff4.jpg   Trouble lining up stacked divs-ie8.jpg  
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    jaycee32 (04-06-2011)

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jaycee32 View Post
    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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:
    Attached Thumbnails Attached Thumbnails Trouble lining up stacked divs-ie8image.jpg   Trouble lining up stacked divs-ffimage.jpg  
    Teed

  • Users who have thanked teedoff for this post:

    jaycee32 (04-06-2011)

  • #8
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Maybe then some thought should go into your design and the fact that other users may run into this same problem.
    Teed

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jaycee32 View Post
    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 -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    jaycee32 (04-07-2011)

  • #11
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jaycee32 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •