Html - How to fix divs to edge of larger div

bboooooyintheuk
September 3, 2024
158 views
4 votes
4 Answers

I am trying to code a simple average monthly weather table, with 12 divs inside a larger div, and each ‘monthly div’ showing an emoji, and HI/LO temperatures. Mockup image below:

My issue is handling responsiveness when on mobile/tablet. I would like it to split onto 2 (or even 3) rows if needed based on screen width, looking something like this:

However, I’m not too sure how to do it. Currently the gap between the edge of the small div and the larger outer div will increase until it can fit another small div in. Instead, I don’t want the distance to change – I’d rather it move onto another row.

Here’s what I’ve got so far:

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

.weather-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #000;
  /* Curved black border */
  max-width: 100%;
  background-color: #fff;
  /* Ensure white background inside the border */
}

.weather-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  width: 80px;
  background-color: #fff;
  position: relative;
}

.weather-icon {
  font-size: 36px;
}

.temperature {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 5px;
  font-size: 18px;
}

.temperature span {
  width: 45%;
  text-align: center;
}

.month-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.separator {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #000;
}


/* Remove separator from the last box */

.weather-box:last-child .separator {
  display: none;
}

<h2>New York City Monthly Weather Forecast</h2>

<div class="weather-container">
  <div class="weather-box">
    <div class="month-label">January</div>
    <div class="weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class="temperature">
      <span>HI 39°</span>
      <span>LO 26°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">February</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 42°</span>
      <span>LO 29°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">March</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 50°</span>
      <span>LO 35°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">April</div>
    <div class="weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class="temperature">
      <span>HI 61°</span>
      <span>LO 45°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">May</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 71°</span>
      <span>LO 54°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">June</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 79°</span>
      <span>LO 64°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">July</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 84°</span>
      <span>LO 69°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">August</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 83°</span>
      <span>LO 68°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">September</div>
    <div class="weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class="temperature">
      <span>HI 76°</span>
      <span>LO 61°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">October</div>
    <div class="weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class="temperature">
      <span>HI 65°</span>
      <span>LO 50°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">November</div>
    <div class="weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class="temperature">
      <span>HI 55°</span>
      <span>LO 41°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">December</div>
    <div class="weather-icon">❄️</div>
    <!-- Snowy -->
    <div class="temperature">
      <span>HI 45°</span>
      <span>LO 32°</span>
    </div>
  </div>
</div>

Tags: css html

Answers

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

.weather-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #000;
  max-width: 100%;
  background-color: #fff;
}

.weather-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  width: 80px;
  background-color: #fff;
  position: relative;
  margin: 10px;
  flex: 1 1 80px;
  max-width: 120px;
}

.weather-icon {
  font-size: 36px;
}

.temperature {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 5px;
  font-size: 18px;
}

.temperature span {
  width: 45%;
  text-align: center;
}

.month-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.separator {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #000;
}

/* remove separator from last box */
.weather-box:last-child .separator {
  display: none;
}

@media (max-width: 1200px) {
  .weather-box {
    flex: 1 1 100px; /* Allows more space per box */
  }
}

@media (max-width: 768px) {
  .weather-box {
    flex: 1 1 120px; /* Allows the box to grow larger */
  }
}

@media (max-width: 480px) {
  .weather-box {
    flex: 1 1 100%; /* Full width for small screens */
  }
}

<h2>New York City Monthly Weather Forecast</h2>

<div class="weather-container">
  <div class="weather-box">
    <div class="month-label">January</div>
    <div class="weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class="temperature">
      <span>HI 39°</span>
      <span>LO 26°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">February</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 42°</span>
      <span>LO 29°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">March</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 50°</span>
      <span>LO 35°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">April</div>
    <div class="weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class="temperature">
      <span>HI 61°</span>
      <span>LO 45°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">May</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 71°</span>
      <span>LO 54°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">June</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 79°</span>
      <span>LO 64°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">July</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 84°</span>
      <span>LO 69°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">August</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 83°</span>
      <span>LO 68°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">September</div>
    <div class="weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class="temperature">
      <span>HI 76°</span>
      <span>LO 61°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">October</div>
    <div class="weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class="temperature">
      <span>HI 65°</span>
      <span>LO 50°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">November</div>
    <div class="weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class="temperature">
      <span>HI 55°</span>
      <span>LO 41°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">December</div>
    <div class="weather-icon">❄️</div>
    <!-- Snowy -->
    <div class="temperature">
      <span>HI 45°</span>
      <span>LO 32°</span>
    </div>
  </div>
</div>

To separate containers dynamically based on the number of columns per row, you’ll need to use JavaScript to wrap every set of weather-box elements into separate weather-container elements based on the current screen width.

document.addEventListener('DOMContentLoaded', function() {
  function groupWeatherBoxes() {
    const weatherWrapper = document.getElementById('weather-container');
    const weatherBoxes = Array.from(weatherWrapper.getElementsByClassName('weather-box'));
    const screenWidth = window.innerWidth;
    let columns = 6; // Default to 6 columns

    if (screenWidth <= 1024) {
      columns = 4;
    }
    if (screenWidth <= 1024) {
      columns = 4;
    } 
    if (screenWidth <= 768) {
      columns = 3;
    } 
    if (screenWidth <= 480) {
      columns = 2;
    }
    if (screenWidth <= 354) {
      columns = 1;
    }

    // Clear the weather-wrapper
    weatherWrapper.innerHTML = '';

    // Group weather-boxes into separate containers
    for (let i = 0; i < weatherBoxes.length; i += columns) {
      const weatherContainer = document.createElement('div');
      weatherContainer.classList.add('weather-container');

      for (let j = i; j < i + columns && j < weatherBoxes.length; j++) {
        weatherContainer.appendChild(weatherBoxes[j]);
      }

      weatherWrapper.appendChild(weatherContainer);
    }
  }

  groupWeatherBoxes(); // Initial call to group boxes
  window.addEventListener('resize', groupWeatherBoxes); // Re-group on window resize
});

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}

.weather-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  max-width: 100%;
  margin-bottom: 20px; /* Space between containers */
  border-radius: 15px;
  border: 2px solid #000;
  background-color: #fff;
}

.weather-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #ddd; 
  margin: 5px;
  box-sizing: border-box;
}

.weather-icon {
  font-size: 36px;
}

.temperature {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
  font-size: 18px;
}

.month-label {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

<h2>New York City Monthly Weather Forecast</h2>

<div id="weather-container">
  <div class="weather-box">
    <div class="month-label">January</div>
    <div class="weather-icon">☁️</div>
    <div class="temperature">
      <span>HI 39°</span>
      <span>LO 26°</span>
    </div>
  </div>
  <div class="weather-box">
    <div class="month-label">February</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 42°</span>
      <span>LO 29°</span>
    </div>
    <div class="separator"></div>
  </div>
  <div class="weather-box">
    <div class="month-label">March</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 50°</span>
      <span>LO 35°</span>
    </div>
  </div>
  <div class="weather-box">
    <div class="month-label">April</div>
    <div class="weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class="temperature">
      <span>HI 61°</span>
      <span>LO 45°</span>
    </div>
  </div>
  <div class="weather-box">
    <div class="month-label">May</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 71°</span>
      <span>LO 54°</span>
    </div>
  </div>
  <div class="weather-box">
    <div class="month-label">June</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 79°</span>
      <span>LO 64°</span>
    </div>
  </div>
  <div class="weather-box">
    <div class="month-label">July</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 84°</span>
      <span>LO 69°</span>
    </div>
  </div>
  <div class="weather-box">
    <div class="month-label">August</div>
    <div class="weather-icon">☀️</div>
    <!-- Sunny -->
    <div class="temperature">
      <span>HI 83°</span>
      <span>LO 68°</span>
    </div>
  </div>
  <div class="weather-box">
    <div class="month-label">September</div>
    <div class="weather-icon">🌧️</div>
    <!-- Rainy -->
    <div class="temperature">
      <span>HI 76°</span>
      <span>LO 61°</span>
    </div>
  </div>
  <div class="weather-box">
    <div class="month-label">October</div>
    <div class="weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class="temperature">
      <span>HI 65°</span>
      <span>LO 50°</span>
    </div>
  </div>
  <div class="weather-box">
    <div class="month-label">November</div>
    <div class="weather-icon">☁️</div>
    <!-- Cloudy -->
    <div class="temperature">
      <span>HI 55°</span>
      <span>LO 41°</span>
    </div>
  </div>
  <div class="weather-box">
    <div class="month-label">December</div>
    <div class="weather-icon">❄️</div>
    <!-- Snowy -->
    <div class="temperature">
      <span>HI 45°</span>
      <span>LO 32°</span>
    </div>
  </div>
</div>

I’m not sure what you are trying to achieve. If you want the rows to all have the same number of boxes, you have 12 rows that can be split into 2, 3, 4, or 6.

By calculating the padding and margin of the parent and weather boxes, you can use a grid display layout and show them in more rows based on the viewport width.

What I did was set the display of the weather-container to grid, change the width of the weather-box to auto, and then, by calculating the minimum size of each layout (120 * n + 24 + 16), create multiple grid layouts based on screen size and hide the separator at the end of each row:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

.weather-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    justify-items: center;
    margin: 0 auto;
    padding: 10px;
    border-radius: 15px;
    border: 2px solid #000;
    /* Curved black border */
    max-width: 100%;
    background-color: #fff;
    /* Ensure white background inside the border */
}

.weather-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    width: auto;
    background-color: #fff;
    position: relative;
}

.weather-icon {
    font-size: 36px;
}

.temperature {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 5px;
    font-size: 18px;
}

.temperature span {
    width: 45%;
    text-align: center;
}

.month-label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}

.separator {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: #000;
}


/* Remove separator from the last box */

.weather-box:last-child .separator {
    display: none;
}

@media (max-width: 1480px) and (min-width: 760px) {
    .weather-container {
        grid-template-columns: repeat(6, 1fr);
    }

    .weather-box:nth-child(6n) .separator {
        display: none;
    }
}

@media (max-width: 760px) and (min-width: 520px) {
    .weather-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .weather-box:nth-child(4n) .separator {
        display: none;
    }
}

@media (max-width: 520px) and (min-width: 400px) {
    .weather-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .weather-box:nth-child(3n) .separator {
        display: none;
    }
}

@media (max-width: 400px) {
    .weather-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .weather-box:nth-child(2n) .separator {
        display: none;
    }
}

<div class="weather-container">
    <div class="weather-box">
        <div class="month-label">January</div>
        <div class="weather-icon">☁️</div>
        <!-- Cloudy -->
        <div class="temperature">
            <span>HI 39°</span>
            <span>LO 26°</span>
        </div>
        <div class="separator"></div>
    </div>
    <div class="weather-box">
        <div class="month-label">February</div>
        <div class="weather-icon">☀️</div>
        <!-- Sunny -->
        <div class="temperature">
            <span>HI 42°</span>
            <span>LO 29°</span>
        </div>
        <div class="separator"></div>
    </div>
    <div class="weather-box">
        <div class="month-label">March</div>
        <div class="weather-icon">☀️</div>
        <!-- Sunny -->
        <div class="temperature">
            <span>HI 50°</span>
            <span>LO 35°</span>
        </div>
        <div class="separator"></div>
    </div>
    <div class="weather-box">
        <div class="month-label">April</div>
        <div class="weather-icon">🌧️</div>
        <!-- Rainy -->
        <div class="temperature">
            <span>HI 61°</span>
            <span>LO 45°</span>
        </div>
        <div class="separator"></div>
    </div>
    <div class="weather-box">
        <div class="month-label">May</div>
        <div class="weather-icon">☀️</div>
        <!-- Sunny -->
        <div class="temperature">
            <span>HI 71°</span>
            <span>LO 54°</span>
        </div>
        <div class="separator"></div>
    </div>
    <div class="weather-box">
        <div class="month-label">June</div>
        <div class="weather-icon">☀️</div>
        <!-- Sunny -->
        <div class="temperature">
            <span>HI 79°</span>
            <span>LO 64°</span>
        </div>
        <div class="separator"></div>
    </div>
    <div class="weather-box">
        <div class="month-label">July</div>
        <div class="weather-icon">☀️</div>
        <!-- Sunny -->
        <div class="temperature">
            <span>HI 84°</span>
            <span>LO 69°</span>
        </div>
        <div class="separator"></div>
    </div>
    <div class="weather-box">
        <div class="month-label">August</div>
        <div class="weather-icon">☀️</div>
        <!-- Sunny -->
        <div class="temperature">
            <span>HI 83°</span>
            <span>LO 68°</span>
        </div>
        <div class="separator"></div>
    </div>
    <div class="weather-box">
        <div class="month-label">September</div>
        <div class="weather-icon">🌧️</div>
        <!-- Rainy -->
        <div class="temperature">
            <span>HI 76°</span>
            <span>LO 61°</span>
        </div>
        <div class="separator"></div>
    </div>
    <div class="weather-box">
        <div class="month-label">October</div>
        <div class="weather-icon">☁️</div>
        <!-- Cloudy -->
        <div class="temperature">
            <span>HI 65°</span>
            <span>LO 50°</span>
        </div>
        <div class="separator"></div>
    </div>
    <div class="weather-box">
        <div class="month-label">November</div>
        <div class="weather-icon">☁️</div>
        <!-- Cloudy -->
        <div class="temperature">
            <span>HI 55°</span>
            <span>LO 41°</span>
        </div>
        <div class="separator"></div>
    </div>
    <div class="weather-box">
        <div class="month-label">December</div>
        <div class="weather-icon">❄️</div>
        <!-- Snowy -->
        <div class="temperature">
            <span>HI 45°</span>
            <span>LO 32°</span>
        </div>
    </div>
</div>

- VincentDecaux
- September 3, 2024 at 11:01 am
- 0 votes
0
You can achieve what you expect by reviewing your CSS, you will find the result here: https://jsfiddle.net/s2pwxa60/, you can stretch the content to see the result.

Edit

Not sure the result you want ? you want fixed width on mobile / tablet ? IMHO, it’s a bad idea, responsive was created to have different sizes on different devices, which is useful.

Explanations:

Put the border on the boxes, not the container, and add a box-sizing to have better control on the width:
```
:root {
  --border-separator: 2px solid #000;
}
.weather-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  width: 80px;
  background-color: #fff;
  position: relative;
  border: var(--border-separator);
  border-right: 0;
  margin-bottom: 30px;
  box-sizing: border-box;
}
```
Be sure to add the radius you want on first and last box:
```
.weather-box:first-child {
  border-radius: 15px 0 0 15px;
}

.weather-box:last-child {
  border-radius: 0 15px 15px 0;
  border-right: var(--border-separator);
}
```
Then use media queries for medium screen (for example):
```
@media screen and (max-width: 1280px) and (min-width: 991px) {
  .weather-box {
    flex: 1 0 25%;
  }

  .weather-box:nth-child(4n) {
    border-radius: 0 15px 15px 0;
    border-right: var(--border-separator);
  }

  .weather-box:nth-child(4n + 1) {
    border-radius: 15px 0 0 15px;
  }
}
```
The flex: 1 0 25% will allow you to have 4 elements on a row (100 / 4 = 25). Then use nth-child(4n) to add the radius to every first and last element of each row.

You can control the number of elements by changing the percent, and changing the nth value. And do not use your current separator, it’s easy to use a CSS border.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to fix divs to edge of larger div

Answers