My current design consists of a red bar inside a container that is positioned between two black boxes. The size of the boxes remains fixed, while the red bar and container are both based on percentages.
I am aiming to decrease the size of both the container and the red bar without causing the right black box to drop down to the next line. I managed to address this issue using custom JavaScript calculations, but I prefer to keep functionality and design separate. I believe there should be a CSS solution that doesn't require hacks or additional div tags.
Any suggestions on how to achieve this?
.container {
width: 80%;
height: 40px;
background: grey;
}
.box {
height: 50%;
border: 15px solid black;
border-top: none;
border-bottom: none;
float: left;
}
.bar {
width: 80%;
height: 100%;
background: red;
float: left
}<div class="container">
<div class="box"></div>
<div class="bar"></div>
<div class="box"></div>
</div>