Change in website layout when reducing browser size

When I reduce the browser window size, the top and bottom footers start to shrink, pushing the content that is inside the footers (navigation bar on th开发者_JS百科e top and the bottom) off the footer and it starts to overlap with the main text body. Does anyone know why this problem occurs? Apologies if this question is unclear or has been already answered, I'm still learning. Many thanks for your help.

Most content on a web page will be resized like that when the window is made smaller. What you can do is set the min-width CSS property to define a minimum width at which point the browser will add scroll bars rather than resize the elements on the page. SO something like:

.someClass {
  min-width: 800px:
}

I think you can customize all your CSS rules using the % ,So in case of the parent element's width is reduced by 400px for ex , you can set childs width,height,margine,etc by % values like this :

.parent{
  width:100%;
}
.child{
  width:60%;
}

Let's assume that the parent 100% represents 1024 px ,So Child will take 614 px and when the page is re-sized and takes 600 px ,So child will be 360 px automatically