0

A good day to you. I am working on a webpage but I got stuck on defining the max and min width. Basically I would want my page to be centered in when zooming out the webpages like what most webpages does. Please need expert help.ASAP thanks.

this is my css code.

body
{
  height:100%;
  width:100%;

  margin:0 auto; 
  background-image: -webkit-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: -moz-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: linear-gradient(top, #E5E5E5 30%, #999);

}

#mainContainer
{
background-image:url(bg3.jpg);
background-repeat:repeat;
background-color:#999;
width:70%; /*default width in percent for a liquid layout.
the problem is when I zoom out the page the width remains to be in 70% therefore forcing the contents to be pushed to the left corner instead of being centered.*/
min-width:940px; 
margin:5px auto;
height:100%; 
padding:0 1% 0 1%; 
-webkit-border-radius: 10px;
border-radius: 10px;
}
3
Contributors
7
Replies
11
Views
5 Years
Discussion Span
Last Post by Dandello
0

Firstly (this may not resolve your problem). The auto in the margin element should be specified in the #mainContainer div, not in the body and the body needs to be centered using text-align:

body
{
  height:100%;
  width:100%;

  margin:0; 
  text-align: center;

  background-image: -webkit-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: -moz-linear-gradient(top, #E5E5E5 30%, #999);
  background-image: linear-gradient(top, #E5E5E5 30%, #999);

}
0

This is the updated one.

html,body
  {
          height:100%;
          width:100%;   
          margin:0;
        padding:0;

           
   }
body
{
background-image:url(bg3.jpg);
background-repeat:repeat;
padding:1px 0;
box-sizing:border-box;
}
#mainContainer
  {
        background-image:url(bg3.jpg);
        background-repeat:repeat;
        background-color:#999;
        width:70%;
        padding:0;
        min-width:940px;  
        margin:0 auto;
  min-height:100%;/
        -webkit-border-radius: 10px;
    border-radius: 10px;
  }

I want the #mainContainer to limit its width once I zoom it out therefore compressing all of its contents moving it all to the center.
here is the snapshot of how it originally/normally looks like.
http://tinypic.com/r/28wjcci/5
then this what it looks like when i zoom out my browser.
http://tinypic.com/r/102qlcn/5
this is what i want it to look like when zoomed out.
http://tinypic.com/r/2v2uuea/5

.see the difference? =D Basically i think that its the width:70% that causes the dilemma but I cant remove this because my page will then not be liquid with others sizes of screen. i can got what i want it to look if i defined the width or the max-width in px (but then its not applicable for a layout to be liquid)

0

The min-width is for how small it can get. Set a max-width as well - but set it high. That way it will be liquid for most screen resolutions, but limited for hugely wide screens.

0

Set max-width to a large amount - otherwise it will stay at 70% when larger than 940px. Period!

0

In px. Percents will just get wider with window size. But make your max-width BIG, like 1500px or even bigger. What you're doing is making it flexible for laptops and 'normal' monitors, but keeping it from getting getting ridiculously and unreadably wide.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.