+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: [Help] Dynamic Div Resizing (/showthread.php?tid=5320608)
[Help] Dynamic Div Resizing - VirtualFrost - Jun 28, 2016
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 - Jun 28, 2016
Use Bootstrap Framework: http://getbootstrap.com/
* - VirtualFrost - Jun 28, 2016
(Jun 28, 2016 09:53 AM)Webdeveloper Wrote: 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 - Jun 28, 2016
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 - Jun 29, 2016
Code
@media screen and (max-width: 760px) {
.infobox {
width:70vw;
}
}* - VirtualFrost - Jun 29, 2016
(Jun 28, 2016 06:10 PM)Nerdi Wrote: 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.
(Jun 29, 2016 04:08 AM)SteezyHB Wrote:Try this out, and you're probably going to need a second media query for widths under 400-ish px.Code@media screen and (max-width: 760px) {
.infobox {
width:70vw;
}
}
I've just made the main content 90% width and used media tags and redesigned for lower resolutions, thanks!