CODEWITHSUNDEEP
htmlcsslayoutliquid-layout
Teffi
Teffi

Reputation: 2508

css3 min-max width when zooming out pages

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.

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;
}

Upvotes: 3

Views: 5173

Answers (2)

Teffi
Teffi

Reputation: 2508

basically this can only be achieved via script.

Get the 70% width of the browser's screen. Convert that width into its corresponding px value Set the max width of the #mainContainer using the value got from the conversion/calculation.

$( document ).ready( function(){
setMaxWidth();

function setMaxWidth() {
$( "#mainContainer" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
}

});

-thanks to Esailija link

Upvotes: 2

Alexey Ivanov
Alexey Ivanov

Reputation: 8236

It centered for me. But have number of potential problems:

  1. To apply height 100% to #mainContainer, you need to apply height not only to body, but to html too.
  2. Also you need to clear padding and margin on html and body, or they will add scrolls.
  3. You can't make margins to container with 100% height or they will add scrolls to page. I emulate them with padding on body and "box-sizing: border-box;", but it will not work correctly in the older IE's, so you will need a hack for them.
  4. Also you better change height to min-height, or it will become messy then you will have lot of content inside #mainContainer.

Fixed them here: http://jsfiddle.net/WLPGE/1/

Upvotes: 0

Related Questions