SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,740
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    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.%!

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I have IE8 and Chrome side by side and I'm not seeing any of those issues?
    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...
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I got home last evening I noticed that all was well also.

    thanks . . . rick

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,740
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    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. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Don't you just love when everything fixes itself? Glad everythings all sorted now.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •