Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    scaling % issues from small to big screen

    so I am having troubles with css % width and height getting my divs to stay lined from one screen size to another. in a small screen I get it scaled to line up and make a nice 2 column layout. When I move it to big screen the scaling div that represents one of the column is not lined up and has about a 50px gap from where its edges should be lining up, instead of my planned 10px gap. so it falls 50px shorter (relative) than where it should be.

    Basically the gap gets bigger as the screen gets bigger.

    would this be caused by a couple divs nested inside each other each using % to define its height and width?

    (each css class you go down is nested inside the other)
    Code:
    body, html
    {
        height: 90%;
    }
    
    .body_container
    {
    	width: 95%;
    	margin: 0px auto;
            height: 90%;
    }
    
    .outer_container
    {
        background: none repeat scroll 0 0 white;
        border-radius: 0 10px 10px 0;
        float: right;
        height: 97%;
        margin-top: 0;
        min-width: 300px;
        overflow: hidden;
        padding: 10px;
        width: 82%;
    }
    
    .inner_container
    {
    	width: 100%;
    	float: left;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            border-radius: 2px;
            background: white;
    }
    Thanks a lot, appreciate the help

  • #2
    New Coder
    Join Date
    Oct 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Using the SVG image as a universal asset, scaling infinitely up or down as required apply the CSS controls the presentational aspects of web pages and device scale the small-resolution resizing and not fix the problem

  • #3
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    Thanks for the reply, but I am sorry I am having a hard time making sense of what you said.

    >>There is no svg content, just divs nested inside each other applied to css rules
    >>css controls only apply to presentational aspects of web pages, there is little logic to it and it does not do anything server side.

    The last part about the device scaling to small resolution and not fix the problem. Are you saying you tried it and it didnt work? what exactly did your try?

  • #4
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    That doesn't make sense, I assume it's a spammer.

    Anyway, I put your CSS on my server to see if I could spot the issue, but I doubt I was accurately representing your page. Could you link to a working example?

    Since the gap gets bigger as resolution improves it must be controlled by percentage. Probably by the relationship between the parent and child, rather than a set value. If that padding: 10px; is meant to be defining a constant width gap, then you would likely have to remove the width value of that element for it to work consistently.

  • #5
    vjm
    vjm is offline
    New Coder
    Join Date
    Nov 2012
    Location
    PH
    Posts
    16
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I think you can't control the spaces using pixels between elements that has percentage in widths or heights. Because as the screen size increases or decreases, the elements inside it adjust accordingly and so as the spaces.

    For example:

    *100px screen width

    -Total screen width is 100px. That's the 100%.
    -First column width is set to 40%. So that's 40px out of 100px right?
    -Second column width is set the same as the first column. So that's 80% in total or equivalent to 80px.
    -80px is now used by the columns and 20px is left for the space.

    *200px screen width

    -Total screen width is 200px. That's the 100%.
    -First column width is set to 40%. Now that's 80px out of 200px.
    -Second column width is set the same as the first column. So that's 80% in total or equivalent to 160px.
    -160px is now used by the columns and 40px is left for the space.

    I hope my explanation is clear.

    Have a nice day!

    http://veejeiem.site50.net


  •  

    Posting Permissions

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