CODEWITHSUNDEEP
htmlcsspositioningcenter
user1594170
user1594170

Reputation: 27

My website design gets messed up when zoomed out, how do i fix this?

I've been messing with a couple of my webpages since they get completely screwed up when the webpage is zoomed out or zoomed in. I have tried <center> and <div align:"center"> to center the webpage but it isnt seeming to work. The web pages that are causing grief are:

http://officialnewvintage.com/photos.html

http://officialnewvintage.com/joel.html

any ideas?

Upvotes: 0

Views: 6009

Answers (2)

Lie Ryan
Lie Ryan

Reputation: 64855

There are two techniques I usually do, first is to let it reflow: http://jsfiddle.net/PALur/ and second is to maintain a fixed width and the number of columns: http://jsfiddle.net/Qg8XQ/2/ (edit: corrected the formula to calculate width)

Note that you need to modify the HTML, your way of dividing into columns would not work right that way.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You need to wrap up the contents with a wrapper class, because <center> tag and align attribute of div are now invalid. :). For your issue, I suggest you to put a wrapper class like this, after the body.

<body>
    <div class="wrap">
    ...
    ...
    </div>
</body>

And in the CSS, please give a fixed width.

.wrap {width: 960px; margin: 0 auto;}

The width of 960px is best for all the browsers as, it is by default used by 1024px and 1280px widths.

If you have content which needs to flow through, like the background of header and footer, then in that case, you can just add the wrapper, inside the element, which bears the background. For eg., if there is a <div class="header">...</div> has a background, which flows, you can use this way:

<body>
    <div class="header">
        <div class="wrap">
        ...
        ...
        </div>
    </div>
</body>

Let me know if you don't understand any part. :)

Edits in your website:

  1. Replace the line 43 - 44:

    #joel
    margin-top: 200px

    with

    #joel {
    margin-top: 200px;
    }

  2. Line number 86: Remove the </p>.

Let me know what is the output after these fixes.

Upvotes: 1

Related Questions