I'm a newcomer to CSS and HTML and feeling a bit lost on this issue. My goal is to divide the screen into two halves, with one half taking up 50% of the browser screen width while the other half remains flexible. I want the content in one half to be fully visible when the browser width is set to half, and the other half to be completely hidden. This layout should remain consistent across all resolutions.
Similar to foursquare: (where the map is hidden and the bars info is unaffected until the browser width is less than 50%).
Check out the code sample below:
body {
width: 100vw;
height: 100vh;
}
/* The width should be set to 50% of the browser's maximum width, similar to the bars on foursquare */
.lefthalf {
float: left;
background-color: black;
width: 50%;
height: 100%;
}
/* The width should vary between 0-50% of the browser's maximum width, similar to the map on foursquare */
.righthalf {
float: right;
background-color: red;
height: 100%;
width: 50%;
}
<div class="lefthalf"></div>
<div class="righthalf"></div>