CODEWITHSUNDEEP
htmlcsswidth
mato
mato

Reputation: 141

CSS: how to set the fixed width of the content regarding to the browser screen

I am new to CSS and HTML and I am pretty lost with this one. I would like to have a screen divided to two halves, while one of them has width equaled to 50% of maximized browser screen. While the other one will be flexible. So when you set the browser width to half, one of the contents will be fully visible, while the other one will be completely hidden. Of course I want this to be same for every resolution out there.

Same as foursquare: https://foursquare.com/explore?mode=url&near=New%20York%2C%20NY%2C%20United%20States&nearGeoId=72057594043056517 (maps is being hidden, and bars info is not affected until browser's width is less than 50%).

Here's the sample:

body {
  width: 100vw;
  height: 100vh;
}

/*width must be 50% of browser's maximum width, same as bars on foursquare*/

.lefthalf {
  float: left;
  background-color: black;
  width: 50%;
  height: 100%; 
}

/*width is between 0-50% of browser's maximum width, same as map on foursquare*/

.righthalf {
  float: right;
  background-color: red;
  height: 100%;
  width: 50%;
}
<div class="lefthalf"></div>
<div class="righthalf"></div>

Upvotes: 1

Views: 134

Answers (1)

VXp
VXp

Reputation: 12058

You can do something like this with the Flexbox:

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

body {
  display: flex; /* displays children inline by default */
}

.lefthalf {
  /*float: left;*/
  background: black;
  flex: 0 0 750px; /* adjust to your needs / doesn't grow nor shrink with the initial width of 750px */
  /*height: 100%;*/
  overflow-x: auto; /* optional / enables horizontal scrolling if the content is wider than 750px (in this case) */
}

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

@media screen and (max-width: 1000px) { /* adjust to your needs */
  .lefthalf {flex: 3} /* always three times wider than the .righthalf between 601px and 1000px screen width */
  .righthalf {flex: 1}
}

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

The .lefthalf needs to have a static width in px, it won't work with the defined 50% or 50vw because its width will change according to the browsers width.

Upvotes: 1

Related Questions