I'm struggling with some basic HTML/CSS and I'm looking for guidance on what I might be doing incorrectly or if there is a more efficient approach?
I'm attempting to create a simple user interface, and while I have put this together, it doesn't seem to work correctly. Box4 and 6 are causing issues when I resize the browser window:
<style type="text/css">
.box1
{
width:100%;
height:25%;
background-color:#eee;
}
.box2
{
width:60%;
height:56%;
background-color:#eee;
float:left;
margin-top:1%;
}
.box3
{
width:39%;
height:40%;
background-color:#eee;
margin-left:61%;
margin-top:1%;
}
.box4
{
width:39%;
height:14%;
background-color:#eee;
margin-left:61%;
margin-top:1%;
}
.box5
{
width:50%;
height:14%;
background-color:#eee;
float:left;
margin-top:1%;
}
.box6
{
width:49%;
height:14%;
background-color:#eee;
margin-left:51%;
margin-top:1%;
}
html,body{
height:100%;
//width:100%;
}
</style>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
<div class="box3">
box3
</div>
<div class="box4">
box4
</div>
<div class="box5">
box5
</div>
<div class="box6">
box6
</div>
Edit - included a screenshot of the issue I'm facing when resizing the browser window. Link to Image
Any assistance would be greatly appreciated.
Slash.