Wide Monitor = Web Pages Fall Apart

HTML & CSS
1

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

@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

2

Actually, you missed the concept of “min-width”


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.


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.


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.%!

3

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

4

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

[COLOR=#464646]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…
[/COLOR]

5

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

thanks . . . rick

6

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.

7

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