scaling % issues from small to big screen

[surreal5335]

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)

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

[paulinetaylor85]

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

[surreal5335]

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?

[Custard7A]

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.

[vjm]

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