How to prevent loss of positioning when page is minimized or maximized

waydown · Nov 18, 2010

<html>
<head>
<style type="text/css">
body
{ text-align:center;}
#wrapper
{ position:relative;
text-align:left;
margin:0 auto;
width:900px;
}
p
{ font-size:12px;
font-family:Tahoma;
font-weight:bold;
}
</style>
</head>

<body>
<div id="wrapper">
<p style="position:absolute;left:305px; top:23px;">Search in</p>
<select style="position:absolute;left:370px; top:33px;">
<option>All departments</option>
<option>Women</option>
<option>Men</option>
<option>Kids</option>
<option>Home & Furniture</option>
<option>Technology</option>
<option>Flowers & Gifts</option>
<option>Food & Wine</option>
</select>
<p style="position:absolute;left:510px; top:23px;">for</p>
<form name="Foo" style="position:absolute;left:535px; top:33px;">
<input type="text" name="ID" size="30"
value="Enter some words"/>
</form>
</div>
</body>
</html>

Hi,
The above is just a trivial example but is similar to my actual problem. The page is centred when minimized. The problem is that when the page is minimized the positioning
of the text and the boxes get distorted so that there is
overlapping. How can I avoid this and maintain the positioning whether the page is minimized or maximized.
Also I have a horizontal navigation bar. When the page is minimized or maximized beyond a certain point the right most link is clipped and appears on another line below.
ul#List
{ list-style-type:none;
margin:0;
padding:0;
width:900px;
}
ul#List li
{ display:inline;
}
ul#List li a
{ text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#FFFFFF;
float:left;
text-align:center;
border-left:1px solid #fff;
}
ul#List li a:hover
{ color:#000000;
}
<ul id="List" style="position:absolute;left:0px; top:90px;">
<li><a href="">*******</a></li>
.........</ul>
What can I do to prevent this from happening? I will be very grateful for all help.

Vragabond · Nov 18, 2010

First, let me tell you that absolute positioning, while a very powerful tool, should only be used when absolutely needed. Meaning, when an element cannot stay in its original position but has be shifted somewhere completely different, out of its normal flow. Or, the element should not disrupt the flow of other elements, since absolutely positioned elements do not interact with other elements (they don't enlarge parent elements, they don't push other elements out of the way, etc.).

That said, even though this is a simpler example of your actual page, you probably don't need to use absolute positioning for most elements. So you should try and rework the page to use less absolute positioning.

If you really have to use absolute positioning in places, you have to understand that absolutely positioned element is positioned relative to its first positioned (absolutely or relatively) parent. If no such parent exists, then it is positioned relative to the viewport (browser window).

Looking at your code, I would expect you to have a centered main area (wrapper) and some elements inside. If screen size is beyond 900px, then the main area is centered. If it is below 900px, scrollbars appear.

Your absolutely positioned elements are possibly affected by the size changes because they have no width specified to them. With no width, block level elements assume 100% width, which would probably be 900px in your case. Given that they're already positioned 300px and 500px from the left edge, they extend way beyond the 900px of their parent. Try adding widths to your absolutely positioned elements, if you really have to keep them.

I can't see why the list would be affected by changing the browser window size. It should be 900px irrespective of the browser size.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

Guthro · Nov 23, 2010

I always use the following CSS to make the wrapper sit central to the browser view. This works even with lowly IE6. You can then place your elements within it.
A very basic example.

#wrapper {
margin-left: auto;
margin-right: auto;
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to prevent loss of positioning when page is minimized or maximized

waydown

Programmer

Vragabond

Programmer

Guthro

Technical User

Similar threads

Part and Inventory Search

Sponsor