26

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!!

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 disappear and scroll bars to appear but the object in the top left hand corner would stay exactly where they are.

It happens when I resize the browser window by dragging the right size leftwards. The content in header and the menubar, they both jump down. Then I tried overflow: hidden;, but as I understand all this is not the right way.

Please find the HTML and CSS here.

I already tried this question. I tried setting min-width:820px; for div header of the main. That didn't solve it.

4 Answers 4

41

1 - remove the margin from your BODY CSS.

2 - wrap all of your html in a wrapper <div id="wrapper"> ... all your body content </div>

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;
}
3
  • 1
    If it worked, please check off the correct answer and vote-up the ones that helped. Jan 13, 2012 at 1:02
  • :) yep this is what i did finally , though all answers were helpful Jan 21, 2012 at 0:55
  • So this is the only way? I mean, it's easy, or is it kind of a hack?
    – dawn
    Mar 6, 2019 at 16:22
5

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.

<div style="width:100%"> 
<!-- This div will be the full width of the browser, whatever size it is -->
    <div style="width:300px">
    <!-- this div will be 300px, whatever size the browser is -->
        <p style="width:50%">
            This paragraph's width will be 50% of it's parent (150px).
        </p>
    </div>
</div>

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.

0
3

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.

1

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 <body> in a fixed width <div style="margin: 0 auto; width: 900px> to achieve what you have done with the body {margin: 0 10% 0 10%}

2
  • Thanks for the quickest possible response,, I tried doing that and seems working fine , and I have updated the page on the same link, aimmds1.estheticdentalcare.co.in ... .trying to center it further. Thanks a lot..Its still long way to go :) .. but it fun Jan 12, 2012 at 20:52
  • >>> [many 'errors' in your html where you are missing closing tags] Before trying to write HTML, you really need to locate and use what's called a "language-sensitive-editor". e.g. "scite' is such an editor and is quite easy to learn. And, even then, anytime you suspect something is wrong syntax-wise, you can use one of the many "Html Validator" websites. (To locate one, just do a google-search for "Html validation".)
    – David
    Apr 3, 2021 at 0:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.