[VirtualFrost]

I'm looking to get my divs to resize automatically to the window size. I'm not looking for a layout change like when you're on mobile, but I want it to fit the screen if you make it a little bit smaller.

I used percentages but if they're close to the edge and you resize, they slowly go off the page because they aren't sizing down fast enough, I want the width to continue to fit all the way down.

index:

Code

<html>
    <head>
        <title>Website - UserCP</title>
        <link href="cpstyle.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div class="quicklinks">
            <ul>
                <a href="login.html"><li id="linkright">Logout</li></a>
            </ul>
        </div>
        <div class="maincontent">
            <h1>Dashboard</h1>
            <div id="sidemenu">
                <ul>
                    <a href="index.html"><li class="active">Dashboard</li></a>
                    <a href="upgrade.html"><li>Upgrade</li></a>
                    <a href="statistics.html"><li>Statistics</li></a>
                    <a href="forum.html" target="_blank"><li>Forum</li></a>
                    <a href="#" target="_blank"><li>Staff</li></a>
                    <a href="/acp/index.html"><li>AdminCP</li></a>
                </ul>
            </div>
            <div class="infobox">
                <h2>Statistics</h2>
                <table cellspacing="0">
                    <tr class="trow1">
                        <th><p>Level: </p></th>
                        <th><p>VIP Rank:</p></th>
                        <th><p>BLANK BLANK</p></th>
                        <th><p>BLANK BLANK</p></th>
                        <th><p>BLANK BLANK</p></th>
                    </tr>
                    <tr class="trow2">
                        <th><p>Date of Birth:</p></th>
                        <th><p></p></th>
                        <th><p></p></th>
                        <th><p></p></th>
                        <th><p></p></th>
                    </tr>
                    <tr class="trow1">
                        <th><p>Gender: </p></th>
                        <th><p></p></th>
                        <th><p></p></th>
                        <th><p></p></th>
                        <th><p></p></th>
                    </tr>
                    <tr class="trow2">
                        <th><p>Playing Time:</p>
                        </th>
                        <th><p></p></th>
                        <th><p></p></th>
                        <th><p></p></th>
                        <th><p></p></th>
                    </tr>
                </table>
            </div>
        </div>
        <div class="footer">
            <p>Website</p>
        </div>
    </body>
</html>

CSS

Code

/*Fonts*/
@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700';

* {
     margin: auto 0;
    font-family: 'Arial', sans-serif;
}

body {
    background-color: white;
}

h1 {
    color:#27ae60;
    font-family: 'Roboto Condensed', sans-serif;
    padding-top:20px;
}

h2 {
    color:white;
}

th {
    width:20%;
    text-align: left;
    padding-left:10px;
    border: 1px solid white;
}

th p {
    font-size:16px;
    font-family:'Roboto Condensed', sans-serif;
    font-weight:300;
}

table {
    border: 1px solid white;
}

#tlength2 {
    width:410px;
}

#tlengthhalf {
    width:310px;
}

#tlengthsmall {
    width:95px;
}

.trow1 {
    background-color:#dbdbdb;
}

.trow2 {
    background-color: #c7c7c7;
}

.container {
    width:80%;
    margin: auto;
    background:red;
}

.quicklinks {
    background:#2ecc71;
}

.quicklinks ul {
    padding:0;
    margin:0;
}

.quicklinks li {
    display: inline-block;
    padding:20px 40px;
}

.quicklinks a {
    color:white;
}

.quicklinks li:hover {
    background:#27ae60;
    color:white;
    font-weight:400;
}

.active {
    background-color:#27ae60;
}

#sidemenu {
    width:15%;
    padding-top:10px;
    padding-bottom:10px;
    border:1px solid #27ae60;
    background-color:#73d687;
    border-radius:5px;
    float:left;
    margin-right:20px;
}

#sidemenu ul {
    list-style-type:none;
    padding:0;
    margin:0;
    text-align:center;
}

#sidemenu li {
    padding-top:5px;
    padding-bottom:5px;
}

#sidemenu a {
    text-decoration:none;
    color:white;
}

#sidemenu li:hover {
    background-color:#27ae60;
}

.maincontent {
    background-color:#ecf0f1;
    height:100%;
    position:fixed;
    padding-left:20px;
    padding-right:20px;
    width:100%;
    position:relative;
}

.infobox {
    background-color: #27ae60;
    width:auto;
    padding:2px;
    margin-bottom:20px;
    float:left;
    box-sizing:border-box;
}

.infobox h2 {
    text-align:center;
}

#theader {
    border:none;
    background:white;
}

[kznamst]

Use Bootstrap Framework: http://getbootstrap.com/

[VirtualFrost]

Use Bootstrap Framework: http://getbootstrap.com/

Is this really the only solution, I remember there being other ways rather than just turning over to Bootstrap and starting with that.

[Nerdi]

body { width: 90%; }

I think something like that, or setting your div css (if div is used for pretty much all major elements) to width: 90% will work.
Try it out. If it works as I remember, it'll be a much more simple solution in comparison to using Bootstrap. You can set your body's
margins to 'auto' too.

[SteezyHB]

Code

@media screen and (max-width: 760px) {
  .infobox {
    width:70vw;
  }
}

Try this out, and you're probably going to need a second media query for widths under 400-ish px.

[VirtualFrost]

body { width: 90%; }

I think something like that, or setting your div css (if div is used for pretty much all major elements) to width: 90% will work.
Try it out. If it works as I remember, it'll be a much more simple solution in comparison to using Bootstrap. You can set your body's
margins to 'auto' too.

Code

@media screen and (max-width: 760px) {
  .infobox {
    width:70vw;
  }
}

Try this out, and you're probably going to need a second media query for widths under 400-ish px.

I've just made the main content 90% width and used media tags and redesigned for lower resolutions, thanks!