Wide Monitor = Web Pages Fall Apart

On a normal monitor and my lap top even the pages look correct.

On my new wide monitor the pages fall apart.

And Please - how is min-width used?

I spent 30 minutes reading min-width discovering no understandable practical application!

Would that help me here?

Here is my css

Code:

---

@charset "utf-8";
/* homepage.CSS Document 1/31/2012 */
html, body        {        margin:0;
                            padding:0;
}

body                {        background-color: #0A1794;
                        background: url(images/blkfire.png) fixed;
                        max-width: 100%;
                        min-width: 60%;
                        font-family: Verdana, Geneva, sans-serif;
                        font-size:16px;                                                       
                        color:#ccc;
                              line-height:130%;
                        margin-top:2%;
                        margin-right:1.4%;
}

#maincontent {          width:70%;
                        min-width:40%;
                        float:right;
                        text-align:left;
                        position:relative;
                        margin-left:25%;
}

---

www.propertieswithstyle.com
Thanks . . . Rick

Actually, you missed the concept of "min-width"

Code:

---

width:70%;
min-width:40%;

---

Mathematically, what you have asked for is redundant... akin to saying (WIDTH=70units)>40units... or simply 70>40. This is always true.

Min-width is a MINIMUM width constraint. If you wanted to make sure that no matter how SMALL the view port was that the site was a MINIMUM of , lets say 800px.

Code:

---

width:70%;
min-width:800px;

---

Also, if what you are worried is LARGE viewport widths, you would want to use MAX-WIDTH and a different unit again. For example, the following will keep the width of your site smaller than 1160px, no matter how large the screen goes.

Code:

---

width:70%;
min-width:800px;
max-width:1160px;

---

Another thing... max width:100% is REALLY redundant in block elements. All block elements are 100% by default. And adding margin-right:1.4%; just breaks it since you have made the total calculated space 101.4.%!

Thanks Desden . . . that seemed to fix a few problems. Kewl!

Now - if you look at my main page in chrome and IE 8 you can see that my content is a little off on the left side.

Using my picture as a guide, in IE 8 my picture and the scenery pictures left side align well, not so in Chrome.

The scenery is a header div NOT located under the #maincontent in the html page. You can view the html page.

Any ideas . . . ?

Thanks Dresden.

Rick

I have IE8 and Chrome side by side and I'm not seeing any of those issues?

Quote:

---

The scenery is a header div NOT located under the #maincontent in the html page. You can view the html page.

---

I don't know whether this is just a random fact or this is related to an issue you are having...

When I got home last evening I noticed that all was well also.

thanks . . . rick

I dont see it either.. so I guessing some of your styles must be cashing. it';s good practice to REFRESH a FEW times and not just once, especially with IE. before assuming your CSS isnt working.

Don't you just love when everything fixes itself? :) Glad everythings all sorted now.