tags:

views:

26

answers:

3

I designed a web page using CSS/HTML. I gave all the divs an absolute position property,and used % instead of px for all the dimension. My problem is that minimizing the browser window makes my divs interferes,change them size,and looks messy.

I added the "DOCTYPE" tag and meta tags. I thought there is something wrong with the position property so i tried "relative",and "static" instead of "absolute" but nothing changed.

what can i do??

+1  A: 

Using absolute positioning for everything will do exactly that. Keep everything static unless you really need AP, and when you use AP make a parent element or grandparent of the AP element position relative so you have a base to position off of.

meder
How to make a parent element or grandparent of the AP element position relative??,,,what do you mean by "so you have a base to position off of"??,,,How to keep everything "static" while Static positioned elements are not affected by the top, bottom, left, and right properties??
OdO
<div class="1"><div class="2"><div class="3"></div></div></div> Div 1 is the grandparent element of 3, and the parent of div 2. Set your class on div 1 to relative instead of absolute. And static properties aren't effected by top, bottom, left and right, but they are effected by margin, which can achieve the same thing. That answers your comment...
Nicknameless
A: 

When you resize the browser window, the width and height change, thus your relative positions change and break your layout. The rule of thumb is: do not use absolute positioning unless it's unavoidable. Use the standard document flow and floats where possible.

dark_charlie
here is an example for my problem,try minmizing the following page and keep minimizing to see what happens to the layout
OdO
+1  A: 

I take it your are new to HTML/CSS, as you should ALWAYS have a DOCTYPE or your code will most defiantly not be valid and will break cross browser.

Using absolute on everything isn't recommended, by myself or anyone else. But you could add a wrapper div around your page, set it to relative and that might help then you wouldn't have to recode your page to fix this issue. But then again, it might not do much at all without your code or an example there is really no way to tell.

Nicknameless