CSS min-width and max-width

I have noticed that when I change screen resolution it makes my template too wide and it doesn't look good. I have seen many websites that maintain their width regardless of the screen resolution. How do I set min-width and max-width?

Find

Reply

Can you post your CSS code here?

Find

Reply

This is my style.css file.

Code:

#centre {
border:1px solid #202020;
border-bottom:0;
border-top:0;
color:#000;
padding:1.5em;
}

#conteneur {
background-color:#fafafa;
display: block;
margin-left: 20px;
margin-right: 20px;

}

#haut {
background-color:#202020;
height:1.8em;
max-height:1.8em;
}

#header {
background:url(header/09215.jpg) no-repeat top center;
border:1px solid #fafafa;
color:#000;
font-size:2em;
height:2.5em;
padding-left:2em;
padding-top:2em;
}

#pied {
border:1px solid #202020;
border-top:0;
padding:0.5em;
height:5em;
text-align:right;
}

.menuhaut {
font-size:10px;
list-style-type:none;
margin:0;
padding:0;
}

.menuhaut a {
color:#fafafa;
margin:0 0.4em;
text-decoration:none;
}

.menuhaut a:hover {
color:#FF0;
text-decoration:none;
}

.menuhaut li {
border-right:1px solid #fff;
display:inline;
float:left;
margin:0;
padding:0.6em 1px;
}

a {
color:#7FDD48;
text-decoration:underline;
}

body {
background-color:#CDCDCD;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
margin:0px auto; padding:10px;
}

h1 {
font-size:1.6em;
margin:0.5em 0.5em 1em 0;
}

h2 {
font-size:1.2em;
margin:0.8em 0.5em 0.3em 0.6em;
}

h3 {
font-size:1.1em;
margin:0.8em 0.5em 0.3em 0.8em;
}

h4 {
font-size:1em;
margin:0.7em 0.5em 0.3em 1em;
}

h5 {
font-size:0.9em;
margin:0.6em 0.5em 0.2em 1.5em;
}

p {
margin:1px 0.5em 0.5em 1.5em;
}

I want my website to be always 1020px

Find

Reply

Replace this:

Code:

body {
background-color:#CDCDCD;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
margin:0px auto; padding:10px;
}

With this:

Code:

body {
background-color:#CDCDCD;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
min-width: 1020px;
max-width: 1020px;
margin:0px auto; padding:10px;
}

Find

Reply

Thanks very much

Find

Reply

Look into doing a responsive setup. That will do what you want.

Also that is not really the proper way to do what Ivan was asking. You are basically just locking it to a single size regardless of the persons screen size and or device and or browser window size

www.AdminEmpire.com
www.BlimptonTech.com - Best Free Online JavaScript tool to minify JavaScript files.

Find

Reply

oh it's great one for learn. it makes it easier to manage whole website through it and if you make change in this one file it makes changes in whole website. it's compulsory for these days.

Find

Reply

I donot use maximum width.

Find

Reply