Prevent div from moving while resizing the page

Question

I m quite new to CSS and I m trying to get a page up and running  I managed to successfully produce what I thought was a nice page until I resized the browser window then everything started to move around  I have no idea why this is happening    Could someone offer me some advice please  When I resize the window I would like the  objects  to stay where they are but the window to resize  for example  if I drag the bottom corner of a window up and to the left I d expect to see what was at the bottom right disapear and scroll bars to appear but the object in the top left hand corner would stay exactly where they are   Am I making sence    Have a look at working condition of my page   http   aimmds1 estheticdentalcare co in   then try to resize the browser window by dragging the right size leftwards   and look at the content in header   and also the menubar    they jump down    the header content was also jumping down then i make overflow  hidden      but as i understand all this is not the right way   Please find the html and CSS here   http   jsfiddle net swati hCDas   I already tried prevent div moving on window resize   i tried setting min-width 820px   for div header   that the main containing div   but that doesnt solve it   Thanks in anticipation of your help

User · Answer

hi firstly there seems to be many  errors  in your html where you are missing closing tags  you could try wrapping the contents of your  lt body gt  in a fixed width  lt div style  margin  0 auto  width  900px gt  to achieve what you have done with the body  margin  0 10  0 10

User · Answer

I d rather use static widths and if you d like your page to resize depending on screen size  you can have a look at media queries   Or  you can set a min-width on elements like header  navigation  content etc

User · Answer

1 - remove the margin from your BODY CSS   2 - wrap all of your html in a wrapper  lt div id  wrapper  gt      all your body content  lt  div gt   3 - Define the CSS for the wrapper   This will hold everything together  centered on the page    wrapper       margin-left auto      margin-right auto      width 960px

User · Answer

There are two types of measurements you can use for specifying widths  heights  margins etc  relative and fixed   Relative  An example of a relative measurement is percentages  which you have used  Percentages are relevant to their containing element  If there is no containing element they are relative to the window    lt div style  width 100   gt    lt  -- This div will be the full width of the browser  whatever size it is -- gt       lt div style  width 300px  gt       lt  -- this div will be 300px  whatever size the browser is -- gt           lt p style  width 50   gt              This paragraph s width will be 50  of it s parent  150px            lt  p gt       lt  div gt   lt  div gt    Another relative measurement is ems which are relative to font size   Fixed  An example of a fixed measurement is pixels but a fixed measurement can also be pt  points   cm  centimetres  etc  Fixed  sometimes called absolute  measurements are always the same size  A pixel is always a pixel  a centimetre is always a centimetre   If you were to use fixed measurements for your sizes the browser size wouldn t affect the layout

[html] Prevent div from moving while resizing the page

Examples related to html

Examples related to css

Examples related to layout

Examples related to resize