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

Enhancing Dropdown Functionality Using Jquery

Switching images between mobile and desktop view in responsive mode is a useful feature for optimizing

Using the request.getParameter method for casting in Java

What is the best way to display an alert box through AJAX technology?

Image-switching button

A guide on incorporating a set of components to be utilized as custom HTML elements in Angular

Creating a Jquery method to handle multi-line ellipsis for long text

What is the best way to perform calculations within a PHP loop for <input> elements and then display the results using a JavaScript loop?

What could be causing my website's screen resolution to not fit properly on mobile devices?

Create a dynamic HTML page using JavaScript

Adding a dynamic object to the secondary column header of an output table: A step-by-step guide

What is the best way to integrate a PHP page with its own CSS and JavaScript into a Wordpress page?

Two Mistakes Found in the Dropdown Menu

Display the progress bar's completion percentage during animation

Upon the page loading, only select a handful of checkboxes (JSF)

What's the best way to ensure that my image remains perfectly centered at the point where the background colors of my

Utilize Javascript to Populate Form Fields Based on "Selected Name"

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

Place an element in a higher position than a slideshow