Setting a fixed width for content in CSS based on the size of the browser screen

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>
htmlcsswidth

Answer №1

If you want to utilize the Flexbox technique, you can achieve something similar to this design:

html, body { /* updated */
  width: 100vw;
  height: 100vh;
  margin: 0; /* advisable */
}

body {
  display: flex; /* aligns children in a row by default */
}

.lefthalf {
  /*float: left;*/
  background: black;
  flex: 0 0 750px; /* adjust as per your requirements / doesn’t grow or shrink with an initial width of 750px */
  /*height: 100%;*/
  overflow-x: auto; /* optional / enables horizontal scrolling when content exceeds 750px (in this case) */
}

.righthalf {
  /*float: right;*/
  background: red;
  /*height: 100%;*/
  /*width: 50%;*/
  flex: 1; /* occupies the remaining horizontal space */
}

@media screen and (max-width: 1000px) { /* adjust as needed */
  .lefthalf {flex: 3} /* always three times wider than .righthalf when screen width is between 601px and 1000px */
  .righthalf {flex: 1}
}

@media screen and (max-width: 600px) { /* adjust as required */
  body {
    flex-direction: column; /* recommended / stacks children vertically */
  }
  .lefthalf,
  .righthalf {
    flex: 1; /* optional & recommended / each takes up half of the body’s height */
  }
}
<div class="lefthalf"></div>
<div class="righthalf"></div>

The .lefthalf element should have a fixed width in px; using 50% or 50vw won’t work because its width will vary based on the browser’s width.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to style an icon in CSS?

I am facing an issue with the following code snippet: <span class="stars">★★☆☆☆ </span> My objective is to style the empty stars differently, but I am unsure how to specifically target them. The following CSS rule does not produc ...

javascriptjquerycsswordpressicons

Can the <article> tag and all its content be positioned in the center of the webpage?

Can the <article> and its content remain centrally aligned on the page? Check out my website here: Typically, when you visit a website, the article is positioned in the center of the page. However, in my case, the article only remains centered when ...

csshtml

Arranging a Table with unconventional column headings using a hash map in Java

As a newcomer in the world of Java, I have been able to successfully set up a table with regular headers using a hash map. However, I now face the challenge of setting irregular headers in the table by grouping multiple columns under one main heading. //~ ...

javahtmlhashmap

How can one properly incorporate static CSS and JavaScript into a VueJS application?

There have been numerous inquiries regarding the proper way to incorporate static CSS, but I still find myself puzzled. Is placing the static CSS in the "static" folder the right approach? Various suggestions I stumbled upon online include: Importing th ...

cssvue.js

Is it possible to utilize Javascript instead of PHP Curl to present JSON API data?

After successfully displaying JSON API data from openweathermap.org on my HTML webpage using PHP Curl, I am now seeking help to achieve the same output using Javascript. My PHP script retrieves JSON data from the source, and here is a snippet of that PHP c ...

javascriptphphtmljsoncurl

Creating geometric designs on an image and storing them using PHP

I am attempting to retrieve an image from a specific location on my server, draw lines on it, and then save the modified image back to the same location. Below is the code I am using: function drawShapes($src_path, $json) { echo "---inside dra ...

phphtml

The background color of the active tab is updated upon loading the page

I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a soluti ...

javascriptjqueryhtmlcss

Navigate to web pages through hyperlinks in a Textview using a WebView on an

Here is the text that needs to be displayed in a text view. I want the hyperlink to open a webview when clicked, while the rest of the text should not be clickable. String value = "Check out this link: <a href="http://www.google.com">Go to Google< ...

javaandroidhtmlhyperlinktextview

Implementing the style tag within a view

In my exploration of various Razor views, I've noticed a common practice where developers include a <style> tag directly in the CSHTML file. While this method may seem to work without issue, it actually places the <style> tag within the & ...

c#cssasp.net-mvcmodel-view-controller

Is it possible to utilize arrow functions in Vue while using style binding?

As I venture into the world of Vue JS HTML templates, I am exploring how to bind styles using arrow functions. My goal is to toggle the visibility of a div that originates from the Vuex store. Below is my current attempt at achieving this. The main_activi ...

javascripthtmlcssvue.jsvuejs2

Incorporate Zurb Foundation seamlessly into your current codebase without causing any

While Foundation is great for creating whole page designs, it may not be the best choice when you just need a small snippet to add into existing HTML and CSS code. In Foundation's _global.scss file, there are global settings such as: html, body { h ...

htmlcsszurb-foundation

Seeking help with a Javascript regex inquiry

I am currently utilizing JavaScript regex for the following task: I have gathered the HTML content from a page and stored it within a string. Now, I aim to identify all URLs present on this page. For instance, if the document includes-- <script src = ...

javascripthtmlregexstring

Issue with jQuery not being able to retrieve the data from my CSS property

this is my custom style code: table.table tr td{ padding:30px; border-left: double 1px white; border-bottom: double 1px white; cursor:cell; } and below is the jQuery script I am using: $(document).ready(function () { ...

javascriptjqueryhtmlcss

Unveiling the hidden secrets of HTML code through scraping

Looking to extract data from the cadastral records in Poland available at . Specifically, I am interested in retrieving information from the element tagged with id 'gfi_0'. The challenge is that this element is not immediately accessible; it only ...

pythonhtmlseleniumweb-scrapinghtml-table

Is it possible to maintain child divs in a single line?

Despite trying numerous recommendations (many involving white-space:nowrap and display:inline-block), I have been unsuccessful in keeping these child divs on a single line with horizontal scrolling. This is my code: <div id="list"> < ...

csshtmlparent-child

Displaying directory contents with JavaScript XHR

When I inquired whether javascript has the ability to list files on the server, the general response was that "javascript cannot access the server filesystem since it is a client-side scripting language". However, I believed this answer was only partially ...

javascripthtmlxmlxmlhttprequestlighttpd

Creating a custom breakpoint in Bootstrap for adding unique CSS styles

Consider this scenario <div class="col-md-my"> </div> .xx { color: black; } .yy { color: red; } Similar to how Bootstrap adjusts width at different breakpoints. Create a new class called col-md-my When the width exceeds the ...

htmlcssbootstrap-5

What steps are needed to successfully integrate bootstrap.js, jquery, and popper.js into a project by using NPM to add Bootstrap?

I've successfully set up a project and incorporated Bootstrap via npm. However, I'm facing challenges in loading the necessary javascript files for Bootstrap components. It's important to note that I am utilizing a Vagrant Box (virtual machi ...

javascripthtmljquerycssbootstrap-4

How can we apply CSS to all pages except for one containing the "howto" placeholder?

Hey, we're dealing with multiple pages that require CSS styling. .cms-index-noroute .col-main .std {font-weight: bold} .cms-index-list .col-main .std {font-weight: bold} .cms-index-view .col-main .std {font-weight: bold} We'd prefer to simplify ...

csscss-selectors

Achieving precise alignment of div content through Css techniques

body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: ...

htmlcssmedia-queries