How to display divs so they don't move when browser is resized?

I am currently working on a site for a client which can be found on my dev site

http://www.adamcochran.info/I-Gard/

The problem I am having is I have placed the Images using absolute div's which seems to be the wrong thing to do because while it looks nice in its current resolution when I expand the browser size (or shrink it) the images move all over the place

I have tried relative, absolute, fixed, and float divs nothing seems to just stay where it should! What am I doing wrong?

Here's the code:

Expand|Select|Wrap|Line Numbers

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>

<link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>
 
<body>
 
    <div id="main">

        <div id="header">

            <div id="search">

                <form action="" method="get">

                    <input type="text" class="searchbox" name="find" id="find" size="1" />

                    <input type="submit" class="button" name="submit" value="Search" id="submit" />

                </form>

            </div><!--/search-->
 
            <div id="menu">

                <ul class="menu">

                    <li class="parent"><a href="#"><span>Products</span></a>

                        <ul>

                            <li><a href="#"><span>Product 1</span></a></li>

                            <li><a href="#"><span>Product 2</span></a></li>-

                            <li><a href="#"><span>Product 3</span></a></li>

                            <li><a href="#"><span>Product 4</span></a></li>

                        </ul>

                    </li>

                    <li><a href="#"><span>Industries</span></a></li>

                    <li><a href="#"><span>Services</span></a></li>

                    <li><a href="#"><span>Store</span></a></li>

                    <li><a href="#"><span>News</span></a></li>

                    <li><a href="#"><span>About Us</span></a></li>

                </ul>

            </div><!--/menu-->
 
            <div class="images">

                <ul>

                    <li><a href="#"><img src="images/img-01.gif" alt="" /></a></li>

                    <li><a href="#"><img src="images/img-02.gif" alt="" /></a></li>

                    <li><a href="#"><img src="images/img-03.gif" alt="" /></a></li>

                    <li><a href="#"><img src="images/img-04.gif" alt="" /></a></li>

                </ul>

            </div><!--/images-->
 
            <div class="submenu">

                <ul class="menu">

                    <li><a href="#"><span>Contact Us</span></a></li>

                    <li><a href="#"><span>Feedback</span></a></li>

                    <li><a href="#"><span>Sign In</span></a></li>       

                </ul>

            </div><!--/submenu-->

        </div><!--/header-->
 
        <div style="position: absolute; left: 390px; top: 230px;">

        <img src="http://www.petervaldivia.com/technology/electricity/powerpoint/image/color_code_table.jpg">

        </div>

        <div style="position: absolute; left: 890px; top: 230px;">

        <a href="http://www.i-gard.com/"><img src="http://www.kudit.com/applications/resistorvalue/images/icon_hr.png"></a>

        </div>

<table width="100%" cellpadding="0" cellspacing="10" border="0">

    <tr>

    <br><br><br>

        <td width="20%" valign="top">

            <p><b><u><font color="blue">What is the function of a Neutral Grounding Resistor?</font></u></b></p>

<br>

<p>Neutral Grounding resistors are similar to fuses in that they do nothing until something in the system goes wrong. Then, like fuses, they protect personnel and equipment from damage.</p>

<br>

<p>Damage comes from two factors, how long the fault lasts and how large the fault is .Ground fault relays trip breakers and limit how long a fault lasts. Neutral grounding resistors limit how large the fault is. </p>

<br>

<p>An effective NGR will both limit the fault current and yet allow sufficient fault current to positively actuate the over-current device.</p>
 
</p>

        </td>

        <td width="33%" valign="top">

            <p><img src=""></p>

        </td>

        <td width="33%" valign="top">

            <p><img src=""></p>

            <p><img src=""></p>

        </td>

    </tr>

</table>

<br><br><br><br>

        <div id="footer">
 
        </div>

    </div><!--/main-->
 
</body>

</html>

The external CSS was done by a more advanced designer/coder that I no longer have access too but his images seem to stay. I was under the impression that these divs would solve my problem but apparently not.

Any insights?
Many thanks,
Adam

Nov 12 '10 #1

Follow Post Reply

26932

Death Slaught

1,137

1GB

I'm not sure that I'm seeing what you're talking about. What browser are you testing in? They don't move at all for me in Safari, Firefox, Chrome, or Opera.

Thanks, Death

Nov 13 '10 #2

Adam Cochran

I'm using chrome - the images move mostly when width is changed below standard resolution the shift the right and when I test it on my wide screen or I expand it across my dual screen resolution the images appear on the left hand side of the test instead of where they are supposed to go.

Regards,
Adam

Nov 13 '10 #3

Death Slaught

1,137

1GB

Odd, I still don't see what you're seeing. I'll try to view your page on a PC when I have time. Hopefully someone else will be able to help you soon.

Regards, Death

Nov 13 '10 #4

Adam Cochran

Here is how the issue appears on extended resolutions (mouseover to view image)

Nov 15 '10 #5

Death Slaught

1,137

1GB

Ah, thanks for the screen shot Adam.

Currently you have the containing division set to be 390px from left of the browser window. In the extended resolution there is more page for the division to go across, but it's still only being moved 390px. Try changing the 390px to 39%. Let me know how it goes.

Thanks, Death

Nov 15 '10 #6

Adam Cochran

I will try it when im in the office tomorrow.

Another question hough if a Div doesn't exist how do I place it? Let's say I create a new containing div and want it to appear as a right hand column? How can I set parameters is it always just a percentile base?

Nov 15 '10 #7

Death Slaught

1,137

1GB

That entirely depends on the content. Now that I look at this more using absolute positioning isn't even necessary. Also, you're using a table for layout - something you should never do.

Let's see if we can get the current problem solved before adding and removing things.

Thanks, Death

Nov 16 '10 #8

JKing

1,206

Expert 1GB

When you absolutely position an element you are removing it from the flow and positioning it relative to the first parent element that is not static. The default is the <html> element. This is what is causing your image to always be X pixels from the top and X pixels from the left of your browser window.

There are several ways to fix this.

1)Use a container div and set it's position to relative around your absolutely positioned divs. This will require you to tweak the top and left values of your absolutely positioned divs.

2)Use a three column layout consisting of three fixed width divs floated to the left followed by a clear.

3)Use a "liquid" or "elastic" layout. This technique uses relative positioning, floats, and percentage based widths to shrink and grow with the browser window. Google can provide you with some examples if you choose this route.

A few things to note. The <u> tag and <font> tag are both deprecated. Tables shouldn't be used for layout. Line breaks shouldn't be used to add padding/margin.

Edit:Just noticed your CSS actually uses technique 1) that I mentioned on your header div. The header is set to relative and the children divs are set to absolute. You can refer to your own CSS for an example. :)

Nov 16 '10 #9

How to display divs so they don't move when browser is resized?

Post your reply

Similar topics