Empty gaps separating two divs nested within another div within a div (unable to function)

Question

Empty gaps separating two divs nested within another div within a div (unable to function)

I'm diving into the world of HTML, CSS, and JS as I embark on creating a weather application. My vision is to include the temperature, followed by the city and its corresponding weather (accompanied by an icon), and lastly additional details like humidity and wind speed, each in their own separate columns for clarity. However, when attempting to add two more columns within the extra info column, things started to go awry. How can I achieve this layout, where each piece of information is displayed neatly with justified spacing? Here's an excerpt from my code:

Humidity___________________ 30%

In my JSFiddle demo, you'll notice that the last two columns are merged together. How can I address this issue while ensuring that the layout remains responsive based on screen size, adjusting the space-between dynamically without rigid margin values?

* {
                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 class="cityStats">
                <div id="divTemperature">
                    <p id="temperature"> 19°<span>C</span></p>
                </div>
                <div class="divExtraInfo">
                    <p id="city">Rosario</p>
                    <p id="weatherText"> <span id="weatherIcon">☀</span> Sunny</p>
                </div>
                <div class="divExtraInfo" 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>

html css flexbox

Answer 1

Answer №1

Here is a JSFiddle I created that might help address your question, although I can't guarantee it's exactly what you're seeking. The design should adjust accordingly since I incorporated the use of vw.

Answer 2

Here is a JSFiddle I created that might help address your question, although I can't guarantee it's exactly what you're seeking. The design should adjust accordingly since I incorporated the use of vw.

Answer 3

Answer №2

Utilizing display grid can help eliminate the need for fixed widths; By using flex and auto margins, you can align the temperature statistics to the left and right. Any text misalignment that is visible is a result of the icon, which can be adjusted with additional CSS alignment.

* {
  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 class="container">
  <p class="temperature"> 19°<span>C</span></p>
  <div class="quick-info">
    <p>Rosario</p>
    <p>☀ Sunny</p>
  </div>
  <div class="conditions">
    <div class="condition">
      <p>Wind</p>
      <p class="condition-stat">32km/h</p>
    </div>
    <div class="condition">
      <p>Humidity</p>
      <p class="condition-stat">62%</p>
    </div>
  </div>

</div>

Answer 4

Utilizing display grid can help eliminate the need for fixed widths; By using flex and auto margins, you can align the temperature statistics to the left and right. Any text misalignment that is visible is a result of the icon, which can be adjusted with additional CSS alignment.

* {
  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 class="container">
  <p class="temperature"> 19°<span>C</span></p>
  <div class="quick-info">
    <p>Rosario</p>
    <p>☀ Sunny</p>
  </div>
  <div class="conditions">
    <div class="condition">
      <p>Wind</p>
      <p class="condition-stat">32km/h</p>
    </div>
    <div class="condition">
      <p>Humidity</p>
      <p class="condition-stat">62%</p>
    </div>
  </div>

</div>

Answer 5

Answer №3

Apply the use of padding-right to resolve this issue:

* {

  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; /* Apply padding-right here */
}

#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 class="cityStats">

      <div id="divTemperature">

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

      </div>

      <div class="divExtraInfo">

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

      </div>

      <div class="divExtraInfo" 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>

Answer 6

Apply the use of padding-right to resolve this issue:

* {

  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; /* Apply padding-right here */
}

#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 class="cityStats">

      <div id="divTemperature">

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

      </div>

      <div class="divExtraInfo">

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

      </div>

      <div class="divExtraInfo" 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>

Answer 7

Answer №4

To improve the layout, I recommend organizing it into separate "containers". For instance, you can use a "group-container" for elements that should be stacked together like the city name and weather information. Within this, create another container labeled city-container with three sub-groups. The last group can be aligned to the far right by adding margin-left: auto;. Adjusting the width of these groups can help align them better vertically. To align values next to labels, utilize

.group-container .content-text:nth-child(n+1){ margin-left:auto; }

, where n+1 targets the second child (values) under group-container while n+0 would refer to the label. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

I had some fun experimenting with multiple cities which also showcased longer city names and color-coding through data attributes and CSS styles.

Please note that the city names wrap awkwardly due to the current setting in

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

- widening this slightly may provide a more appealing result.

// JavaScript code snippet here
// City weather readings array
var readings = [{
    name: "El Desertos",
    weather: {
        name: "Sunny",
        type: "sunny"
    },
    temperature: 35,
    windspeed: 17,
    humidity: 9
}, 
{
    // Additional city data...
}];
// Accessing DOM elements
const cityWeather = document.getElementById('cities')
const cityStats = cityWeather.querySelector('.city-stats');
// Loop through city readings
readings.forEach(city => {
    cityClone = cityStats.cloneNode(true);;
    cityClone.querySelector('.city').textContent = city.name;
    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;
    cityWeather.appendChild(cityClone);
});

// CSS styles for the layout
* {
    font-family: 'Rubik', sans-serif;
}
body {
    background-color: rgb(41, 35, 35);
    height: 96vh;
    width: 98vw;
}
// Additional CSS styling...

<div id="cities">
    <div class="city-container city-stats">
        <div class="group-container temperature-container">
            <div class="content-text"><span class="temperature">19</span><span class="temperature-degree">°</span><span class="temperature-scale">C</span></div>
        </div>
        // More HTML content...
    </div>
</div>

Answer 8

To improve the layout, I recommend organizing it into separate "containers". For instance, you can use a "group-container" for elements that should be stacked together like the city name and weather information. Within this, create another container labeled city-container with three sub-groups. The last group can be aligned to the far right by adding margin-left: auto;. Adjusting the width of these groups can help align them better vertically. To align values next to labels, utilize

.group-container .content-text:nth-child(n+1){ margin-left:auto; }

, where n+1 targets the second child (values) under group-container while n+0 would refer to the label. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

I had some fun experimenting with multiple cities which also showcased longer city names and color-coding through data attributes and CSS styles.

Please note that the city names wrap awkwardly due to the current setting in

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

- widening this slightly may provide a more appealing result.

// JavaScript code snippet here
// City weather readings array
var readings = [{
    name: "El Desertos",
    weather: {
        name: "Sunny",
        type: "sunny"
    },
    temperature: 35,
    windspeed: 17,
    humidity: 9
}, 
{
    // Additional city data...
}];
// Accessing DOM elements
const cityWeather = document.getElementById('cities')
const cityStats = cityWeather.querySelector('.city-stats');
// Loop through city readings
readings.forEach(city => {
    cityClone = cityStats.cloneNode(true);;
    cityClone.querySelector('.city').textContent = city.name;
    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;
    cityWeather.appendChild(cityClone);
});

// CSS styles for the layout
* {
    font-family: 'Rubik', sans-serif;
}
body {
    background-color: rgb(41, 35, 35);
    height: 96vh;
    width: 98vw;
}
// Additional CSS styling...

<div id="cities">
    <div class="city-container city-stats">
        <div class="group-container temperature-container">
            <div class="content-text"><span class="temperature">19</span><span class="temperature-degree">°</span><span class="temperature-scale">C</span></div>
        </div>
        // More HTML content...
    </div>
</div>

Empty gaps separating two divs nested within another div within a div (unable to function)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Stopping a velocity.js animation once it has completed: is it possible?

Ways to display URL parameters on an HTML page without using PHP

Bizarre actions with jQuery append in Internet Explorer 8

CSS page rule option for optimal display in Safari

Arranging elements within the flex container in perfect alignment

Upon clicking, the input texts revert to their original default values

How can I turn off autocomplete in MUI textfields?

Deactivate the image button when no image has been chosen from the input field

Exporting an HTML table to Excel with JavaScript runs into issues when it encounters the '#' character

PHP code containing an if/else statement that performs form validation and validates the entered date of birth

Tips for aligning text in MUI Breadcrumbs

Column content merging in BS layout

The Bing map control fails to adhere to the div element

Stop child elements from spilling out of the parent container without using fixed height measurements

Differentiate the items within a list containing identical divs using JavaScript

Differences between Animation Easing in iOS and CSS3 Cubic Bezier Functions

The variable continuously updates itself inexplicably, without any specific code dictating it to

Develop a personalized event using JavaScript and activate it

Modify the hover color of heading 1 only for hyperlink texts

"Although disabled, input elements can still be focused on in Firefox browser