[RESOLVED] Prevent from resizing

**mar_zim** · Jun 7th, 2006, 11:08 PM

Hi good day guys. I know this is dead easy to those experienced CSS coders. I have this problem that when I resize or maximize the window of my browser my page will also resize. What I want is my page will be in the center and when resizing or maximing the window of my brower my page will not resize, the width will not increase. How can I do that? I used the mid-width attribute to make my page in the center. Problem solved when I used table and change the mid-width to width but I want my page doesn't contain a table as possible.

Code:

#content{
margin-left:5%;
margin-right:5%;
margin-top:5%;
min-width:500px;
border:1px solid black;
padding:5px;
background:white;
text-align:left;
}

'html code
<html>
<head><title>sample</title>
<link rel='stylesheet' type='text/css' href='mystyle.css'>
</head>
<body>
<div id='content'>
asdfasdfasdf
</div>
</body>
</html>

cheers.

**penagate** · Jun 7th, 2006, 11:28 PM

You can specify a width on the body, that will keep it the same width no matter the window size. Best to use the "ex" unit for that as that is dependent on the font size, so the user can scale it - unless you're relying on pixel precision for graphics.

There is also min-width max-width you can use if you want to have some degree of resizing with the window. But these are not supported in IE <= 6 AFAIK.

Code:

body
{
  width: 500px;
}

Side note - I know you've probably simplified it down for the sake of example, but in case you haven't. You don't need a content div, if it's the only thing in the page. Just apply all those properties to the body instead.

Also, specify as much as you can in the html element. Things like fonts, viewport (window) background colour, etc.

**mar_zim** · Jun 8th, 2006, 12:05 AM

Yeah I just simplied it for example. By setting the width of the body it will not center my page. It docks in the left side. What I want is that my page will be in the center of the window.

**penagate** · Jun 8th, 2006, 12:07 AM

Use auto horizontal margins to centre a block element.

Code:

body
{
  width: 500px;
  margin: 0 auto;
}

**mar_zim** · Jun 8th, 2006, 12:15 AM

cheers Pen. Now it works.

I hope I can rate you. They want me to spread more before I give it to you.

**penagate** · Jun 8th, 2006, 12:18 AM

It's like bread and butter. If you clump it all in one or two places then you have lots of bread with no butter. But if you spread it around then you have a nicely buttered slice.

Of course, you want to avoid the mouldy bits though.

**mar_zim** · Jun 8th, 2006, 03:59 AM

Pen there is a problem. It only works in Firefox and not in IE.

It still resize when you use IE.

**penagate** · Jun 8th, 2006, 04:27 AM

Your document must be in Quirks mode. In quirks mode IE does not distinguish between the BODY and HTML elements, in standards mode it does.

Make sure you have a <!DOCTYPE line for HTML 4 Strict on the first line of your file.

**mar_zim** · Jun 8th, 2006, 04:48 AM

cheers that solved the problem but still I faced another problem about floating, it seems IE doesn't recognize the float attribute.

Or I'm just wrong in using them.

**penagate** · Jun 8th, 2006, 04:50 AM

It does,

Post the offending code?

Thread: [RESOLVED] Prevent from resizing

Thread Tools

Display

[RESOLVED] Prevent from resizing

Re: Prevent from resizing

Re: Prevent from resizing

Re: Prevent from resizing

Re: Prevent from resizing

Re: Prevent from resizing

Re: [RESOLVED] Prevent from resizing

Re: [RESOLVED] Prevent from resizing

Re: [RESOLVED] Prevent from resizing

Re: [RESOLVED] Prevent from resizing

Posting Permissions