Reputation: 1069

Css div window in a div window's center

I have a main div at the center of the screen at the shape of the touch pad. Within it I have another div in which I want to display output. However, the pad itself is set on % to react on different resolutions.

See the pic below, yellow window is the whole pad and the red window is the content screen.

Now I want to make that red window exactly as the pad's screen is set on % so it could adapt on different resolutions, is there a simple way of doing that?

enter image description here

Yellow's css:

#mainWindow{
    margin-left:auto;
    margin-right:auto;
    background-image:url("../images/mainWindow.png");
    background-size:100% 100%;
    height:100%;
    width:80%;
    position: relative;
    border-style:solid;
    border-width:3px;
    border-color:yellow;
}

The red one doesn't really have anything.

I hope you understood me. Thanks beforehand.

EDIT:

html code for the screens:

<div id='mainWindow'>

        <div id='screen'>



        </div>
</div>

Upvotes: 1

Answers (4)

chrisgonzalez

Reputation: 4213

Slightly confusing prompt, but see if this works for you:

http://jsfiddle.net/T3MHZ/

HTML snippet:

<html>
    <head></head>
    <body>
        <div id='mainWindow'>
            <div id='screen'></div>
        </div>
    </body> 
</html>

CSS styles:

html, body{
    width:100%; 
    height:100%;
    margin:0;
}

#mainWindow{
    margin:0;
    height:100%;
    width:100%;
    /* SET THE PADDING TO THE PX MEASURE OF THE TABLET BORDER */
    padding:50px 40px 50px 40px; 
    /* box sizing will make sure that the usable content size is minus the padding value */
    box-sizing:border-box; 
    position: relative;
    border:1px solid black;
}

#screen{
    width:100%;
    height:100%;
    border:1px solid red;   
}

By using a combination of measured padding on #mainWindow to account for the tablet border, and box sizing of border-box to assure exact fit of the #screen content, this should give you the flexible layout you're looking for.

Don't forget your viewport meta tag! ;)

Upvotes: 2

Rick Calder

Reputation: 18705

min-height:100%;

You have no content, it's going 100% of it's parent content. Diodeus's answer would work as well for the same reason, if the body, html are 100% window height then the divs inside will look at that as content.

http://jsfiddle.net/calder12/Jq7xR/

<body>
<div class="container">
    <div class="outside">
        <div class="inside"></div>
    </div>
</div>
</body>

.container{height:250px;width:400px;}
.outside{border:1px solid red; min-height:100%; height:100%;}
.inside{border:1px solid green; min-height:82.5%; margin:5%}

To be honest even my brain is struggling with the 82.5% height to get the margins to work right =/ But I do believe that is what you're after.

Upvotes: 1