I know this question has probably been asked numerous times before, so I apologize for bringing it up again. However, none of the existing solutions have worked for me after spending a frustrating two hours trying to figure out my issue.
Within a section, I have two nested divs. My goal is to make the left div take up 100% of the width minus 200px, with the right div filling in the remaining space. Unfortunately, no matter what I attempt, the divs keep wrapping around their content.
To make things more concise, I've created a jsfiddle link:
Here's the necessary CSS snippet:
section {
width: 100%;
height: 100%;
border: 2px solid green;
}
.box1 {
float: left;
width: calc(100% -200px);
border: 2px solid red;
display: block;
}
.box2 {
float: left;
margin-left: 5px;
width: 180px;
border: 2px solid blue;
display: block;
}