I am facing an issue with resizing containers on my webpage. Despite using position: relative for everything, I am unable to properly adjust the size of the top containers using percentages. Any assistance would be greatly appreciated!
position:relative;
height:100%;
width:100%
}
.picturebox {
position: relative;
border: solid white 1px;
min-width: 25%;
max-width: 25%;
height: 100%;
top: -350px;
}
.servicepic {
position: relative;
width: 100%;
top: 30%;
padding: 2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.middlecontainer {
position: relative;
border: solid white 1px;
min-width: 60%;
max-width: 60%;
top: 500%;
left: 25.1%;
}
.rightcontainer {
position: relative;
border: solid white 1px;
min-width: 14.75%;
max-width: 14.75%;
height: 100%;
top: -629px;
left: 85.2%;<html>
<body>
<div class="bigbox">
<div class="container">
<div class="title">
<h1>Codes' Decoding</h1>
<br>
<h2 id="slogan">"Providing all of your web design needs"</h2>
</div>
</div>
<div id="buttoncontainer">
<a href="file:///C:/Users/Cody/Desktop/Websites/Practice.html">
<div class="breadcrumb1">
<p>Home</p>
</div>
</a>
<a href="breadcrumb2">
<div class="breadcrumb2">
<p>Stuff</p>
</div>
</a>
<a href="breadcrumb3">
<div class="breadcrumb3">
<p>Stuff</p>
</div>
</a>
<a href="breadcrumb4">
<div class="breadcrumb4">
<p>Stuff</p>
</div>
</a>
</div>
<div class="lightestl">
<p>
<br>
<br>
</p>
</div>
<div class="nextlightestl">
<p>
<br>
<br>
</p>
</div>
<div class="nextdarkestl">
<p>
<br>
<br>
</p>
</div>
<div class="darkestl">
<p>
<br>
<br>
</p>
</div>
<div class="lightestr">
<p>
<br>
<br>
</p>
</div>
<div class="nextlightestr">
<p>
<br>
<br>
</p>
</div>
<div class="nextdarkestr">
<p>
<br>
<br>
</p>
</div>
<div class="darkestr">
<p>
<br>
<br>
</p>
</div>
<div class="giantbox">
<div class="picturebox">
<img class="servicepic" src="http://exportbaltic.com/sites/default/files/styles/gallery_large_640/public/product-images/Export-Baltic.jpeg?itok=Cs0mNaSk">
</div>
<div class="middlecontainer">
<p>hello</p>
</div>
<div class="rightcontainer">
<p>hello</p>
</div>
</div>
</div>
</body>
</html>