Space between but its two divs inside a div inside a div (not working)-CodePudding

I'm starting with HTML,CSS and JS and I'm trying to do a weather App. I want it to have the temperature, then the city and its weather(with an icon) and then some extra info like humidity and wind, I pictured these as 3 different columns. Which worked, until I wanted to do another 2 columns inside the extra info column(last one) I want it to look, like this for every type of info:

Humidity___________________ 30%

Where the "__" are blank spaces using 'space-between'. I have this JSFiddle where I portrayed the issue, you can see these 2 columns are sticked together, how do I change this? and how can I do it in a way that adapts to screen-size, so the space-between varies and I don't use a static margin value or something like that.

* {
  background-color: rgb(41, 35, 35);
  font-family: 'Rubik', sans-serif;
}

body {
  background-color: rgb(41, 35, 35);
  position: relative;
  display: flex;
  height: 96vh;
  width: 98vw;
}

p {
  color: whitesmoke;
  font-size: 32px;
  font-weight: 300;
  margin: 0;
}

.divSearch {
  position: absolute;
  top: 0;
  right: 0;
}

#searchBar {
  width: 260px;
  height: 42px;
  margin-right: 10px;
}

#searchIcon {
  width: 42px;
  height: 48px;
  background-color: rgb(71, 71, 63)
}

.recentCity {
  font-size: 26px;
  font-weight: 300;
  margin: 12px;
}

.cityStats {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: 12px;
  width: 540px;
  text-align: left;
  align-items: center;
  justify-content: space-around;
}

#temperature {
  font-size: 82px;
  margin-right: 26px;
}

#temperature span {
  font-size: 60px;
  font-weight: 300;
}

.divExtraInfo {
  max-width: 150px;
  min-width: 130px;
}

#spaceBetween {
  display: flex;
  justify-content: space-between;
}

<div >
  <div id="divTemperature">
    <p id="temperature"> 19°<span>C</span></p>
  </div>
  <div >
    <p id="city">Rosario</p>
    <p id="weatherText"> <span id="weatherIcon">☀</span> Sunny</p>
  </div>
  <div  id="spaceBetween">
    <div>
      <p id="windSpeed"> Wind</p>
      <p id="humidity">Humidity</p>
    </div>
    <div>
      <p id="windSpeedKM"> 32km/h</p>
      <p id="humidity%">62%</p>
    </div>
  </div>
</div>

CodePudding user response：

I made this JSFiddle that may answer you question but I'm not 100% sure if it's what you're looking for. It should scale as I've used vw.

CodePudding user response：

Using display grid will help you eliminate the need for predetermined widths; Using flex and auto margins you can align the temperature stats to the left and right. The misalignment of the text you see is caused by the icon you can edit that with some more css alignment as well.

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
  background-color: rgb(41, 35, 35);
  font-family: 'Rubik', sans-serif;
}

.container{
  color: whitesmoke;
  font-size: 2rem;
  font-weight: 300;
  
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: auto auto 1fr;
}

.temperature {
  font-size: 5rem;
}

.quick-info {
  display: flex;
  flex-direction: column
}


.conditions {
  display: flex;
  flex-direction: column;
}

.condition {
  display: flex;
}

.condition-stat{  
  margin-left: auto;
}

<head>
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap" rel="stylesheet">
  </head>
<div >
  <p > 19°<span>C</span></p>
  <div >
    <p>Rosario</p>
    <p>☀ Sunny</p>
  </div>
  <div >
    <div >
      <p>Wind</p>
      <p >32km/h</p>
    </div>
    <div >
      <p>Humidity</p>
      <p >62%</p>
    </div>
  </div>

</div>

CodePudding user response：

use padding-right to fix this:

* {

  background-color: rgb(41, 35, 35);
  font-family: 'Rubik', sans-serif;
}

body {

  background-color: rgb(41, 35, 35);
  position: relative;
  display: flex;
  height: 96vh;
  width: 98vw;
}

p {

  color: whitesmoke;
  font-size: 32px;
  font-weight: 300;
  margin: 0;
}

.divSearch {

  position: absolute;
  top: 0;
  right: 0;

}

#searchBar {

  width: 260px;
  height: 42px;
  margin-right: 10px;
}

#searchIcon {

  width: 42px;
  height: 48px;
  background-color: rgb(71, 71, 63)
}

.recentCity {

  font-size: 26px;
  font-weight: 300;
  margin: 12px;

}

.cityStats {

  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;

  margin-left: 12px;
  width: 540px;
  text-align: left;
  align-items: center;
  justify-content: space-around;
}

#temperature {

  font-size: 82px;
  margin-right: 26px;
}

#temperature span {

  font-size: 60px;
  font-weight: 300;
}

.divExtraInfo {
  max-width: 150px;
  min-width: 130px;

}

#spaceBetween {

  display: flex;
  justify-content: space-between;

}

<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&display=swap" rel="stylesheet">

<div >

      <div id="divTemperature">

        <p id="temperature"> 19°<span>C</span></p>

      </div>

      <div >

        <p id="city">Rosario</p>
        <p id="weatherText"> <span id="weatherIcon">☀</span> Sunny</p>

      </div>

      <div  id="spaceBetween">

        <div>

          <p id="windSpeed"> Wind</p>
          <p id="humidity">Humidity</p>

        </div>

        <div style="padding-left:30px">

          <p id="windSpeedKM">32km/h</p>
          <p id="humidity%">62%</p>

        </div>

      </div>


    </div>

CodePudding user response：

I would suggest breaking down the layout in to "containers" - here I used a "group-container" for things that "stack" like the city name and weather. I also set up a "container" using a class city-container which has three "groups" under it. I then set the last group to margin-left: auto; to that it gets pushed to the far right no matter what the actual width is. Note that you can set the "block/group" width of those to make them line up vertically better but I leave that for an exercise. Note the question here is then pushing values to the right of labels so that is done with .group-container .content-text:nth-child(n 1){ margin-left:auto; } where n 1 indicates the second "child" of a group-container (the values) where n 0 would be the 0 child (the label) for the 0 based values. ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

I then had some fun and set up multiple "cities" but this also illustrates longer city names and some color using data attributes and some CSS for those values.

NOTE: the city names wrap odd due to your .extra-info { max-width: 150px; min-width: 130px; } - setting that slightly wider would probably be better here.

var readings = [{
  name: "El Desertos",
  weather: {
    name: "Sunny",
    type: "sunny"
  },
  temperature: 35,
  windspeed: 17,
  humidity: 9
}, {
  name: "Nome",
  weather: {
    name: "Snow",
    type: "snow"
  },
  temperature: -2,
  windspeed: 7,
  humidity: 11
}, {
  name: "Inferno",
  weather: {
    name: "Very Hot",
    type: "hot"
  },
  temperature: 42,
  windspeed: 45,
  humidity: 2
}, {
  name: "Jungle City",
  weather: {
    name: "Wet and warm",
    type: "rain"
  },
  temperature: 32,
  windspeed: 5,
  humidity: 96
}];
const cityWeather = document.getElementById('cities')
const cityStats = cityWeather.querySelector('.city-stats');
//  console.log( cityWeather.querySelector('.city').textContent);

//const cityCopy = cityStats.cloneNode(true);
//console.log(cityCopy);
readings.forEach(city => {
  cityClone = cityStats.cloneNode(true);;
  //   console.log(cityClone);
  cityClone.querySelector('.city').textContent = city.name;
  //  console.log( cityClone.querySelector('.city').textContent);

  cityClone.querySelector('.temperature').textContent = city.temperature;
  cityClone.querySelector('.wind-speed').textContent = city.windspeed;
  cityClone.querySelector('.humidity-percent').textContent = city.humidity;
  cityClone.querySelector('.weather-text').textContent = city.weather.name;
  cityClone.querySelector('.weather-icon').dataset.icon = city.weather.type;
  //console.log(city.weather.type);
  cityWeather.appendChild(cityClone);
});

* {
  font-family: 'Rubik', sans-serif;
}

body {
  background-color: rgb(41, 35, 35);
  height: 96vh;
  width: 98vw;
}

.group-container {
  display: flex;
  flex-direction: column;
}
.group-container .content-text:nth-child(n 1){
  margin-left:auto;
}

.city-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px dashed #ffddff;
}

.city-stats {
  margin-left: 0.75rem;
  /* width: 540px;*/
  text-align: left;
}

.temperature-container {
  font-size: 1rem;
  margin-right: 1.625rem;
}

.temperature-scale {
  font-size: 1.5em;
}

.extra-info {
  max-width: 150px;
  min-width: 130px;
}

.extra-info-container {
  display: flex;
  margin-left: auto;
  flex-direction: row;
}

.content-text {
  color: whitesmoke;
  font-size: 2em;
  font-weight: 300;
  margin: 0;
}

.weather-icon[data-icon="sunny"] {
  color: yellow;
}

.weather-icon[data-icon="snow"] {
  color: white;
}

.weather-icon[data-icon="rain"] {
  color: blue;
}

.weather-icon[data-icon="hot"] {
  color: red;
}

.content-text-label {
  margin-right: 0.5em;
  }

<div id="cities">
  <div >
    <div >
      <div ><span >19</span><span >°</span><span >C</span></div>
    </div>
    <div >
      <div >Rosario</div>
      <div ><span  data-icon="sunny">☀</span><span >Sunny</span></div>
    </div>
    <div >
      <div >
        <div >Wind</div>
        <div >Humidity</div>
      </div>
      <div >
        <div ><span >32</span><span>km/h</span></div>
        <div >62<span >%</span></div>
      </div>
    </div>
  </div>
</div>