OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to align two columns

  • Thread starter Thread starter Kzich
  • Start date Start date
K

Kzich

Guest
Code:
<div class="container">

    <div class="search-box">
      <input type="text" class="search-bar" placeholder="Search for a city..." spellcheck="false">
      <button> <img src="images/search.png"> </button>
    </div>
    
    <div class="weather">
      <img class="weather-icon" src="images/clear.png">
      <h1 class="temp"> 25°C </h1>
      <h2 class="city">New York</h2>
    </div>
    
    <div class="details">

      <div class="sunInfo">

        <div class="sunrise">
          <img src="images/sunrise.png">
          <p>6:00 AM</p>
        </div>

        <div class="sunset">
          <img src="images/sunset.png">
          <p>8:00 PM</p>
        </div>

      </div>

      <div class="extraInfo">

        <div class="col">
          <img src="images/humidity.png">

          <div>
            <p class="humidity">50%</p>
            <p>Humidity</p>
          </div>
        </div>

        <div class="col">
          <img src="images/wind.png">

          <div>
            <p class="wind">15mph</p>
            <p>Wind Speed</p>
          </div>

        </div>
      </div>
      </div>
    
  </div>

Code:
*{
  margin: 0;
  padding: 0;
  font-family: 'poppins', sans-serif;
  box-sizing: border-box;
}

body{
  background-color: #222;
}

.container{
  width: 90%;
  max-width: 470px;
  background: linear-gradient(135deg, #00feba, #5b548a);
  color: #fff;
  margin: 100px auto 0;
  border-radius: 20px;
  padding: 40px 35px;
  text-align: center;
}

.search-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-bar {
  border: 0;
  outline: 0;
  background: #ebfffc;
  color: 555;
  padding: 10px 25px;
  height: 60px;
  border-radius: 30px;
  flex: 1;
  margin-right: 16px;
  font-size: 18px;
}

.search-box button{
  border: 0;
  outline: 0;
  background: #ebfffc;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.search-box button img{
  width: 25px;
  height: 30px;
}

.weather-icon{
  width: 170px;
  margin-top: 30px;
}

.weather h1{
  font-size: 80px;
  font-weight: 500;
}
.weather h2{
  font-size: 45px;
  font-weight: 400;
  margin-top: -10px;
}

.details {
  text-align: center;
}

.sunInfo {
  display: inline-block;
  justify-content: flex-end;
  flex-direction: column;

  justify-items: right;
  align-items: right;
  gap: 20px;
}

.extra-info {
  display: inline-block;
  flex-direction: column;
  justify-content: space-between;
  align-items: left;
  gap: 20px;
}

.col {
  display: flex;
  align-items: left;
  text-align: left;
}

.col img {
  width: 40px;
  margin-right: 10px;
}

.sunrise img, .sunset img {
  width: 60px;
  margin-right: 10px;

}

.humidity, .wind {
  font-size: 28px;
  margin-top: -6px;
}

I want to extraInfo and sunInfo to be side by side but still have all information in both to act as columns. I also want for the humidity and wind speed text to be to the tight of the icons and for sunset and sunrise for the time to be to the right of the icons as well.

I tried using inline-blocks, float, justify-items, and justify-content and none of them worked.
<pre><code><div class="container">

<div class="search-box">
<input type="text" class="search-bar" placeholder="Search for a city..." spellcheck="false">
<button> <img src="images/search.png"> </button>
</div>

<div class="weather">
<img class="weather-icon" src="images/clear.png">
<h1 class="temp"> 25°C </h1>
<h2 class="city">New York</h2>
</div>

<div class="details">

<div class="sunInfo">

<div class="sunrise">
<img src="images/sunrise.png">
<p>6:00 AM</p>
</div>

<div class="sunset">
<img src="images/sunset.png">
<p>8:00 PM</p>
</div>

</div>

<div class="extraInfo">

<div class="col">
<img src="images/humidity.png">

<div>
<p class="humidity">50%</p>
<p>Humidity</p>
</div>
</div>

<div class="col">
<img src="images/wind.png">

<div>
<p class="wind">15mph</p>
<p>Wind Speed</p>
</div>

</div>
</div>
</div>

</div>
</code></pre>
<pre><code>*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}

body{
background-color: #222;
}

.container{
width: 90%;
max-width: 470px;
background: linear-gradient(135deg, #00feba, #5b548a);
color: #fff;
margin: 100px auto 0;
border-radius: 20px;
padding: 40px 35px;
text-align: center;
}

.search-box{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}

.search-bar {
border: 0;
outline: 0;
background: #ebfffc;
color: 555;
padding: 10px 25px;
height: 60px;
border-radius: 30px;
flex: 1;
margin-right: 16px;
font-size: 18px;
}

.search-box button{
border: 0;
outline: 0;
background: #ebfffc;
border-radius: 50%;
width: 60px;
height: 60px;
cursor: pointer;
}

.search-box button img{
width: 25px;
height: 30px;
}

.weather-icon{
width: 170px;
margin-top: 30px;
}

.weather h1{
font-size: 80px;
font-weight: 500;
}
.weather h2{
font-size: 45px;
font-weight: 400;
margin-top: -10px;
}

.details {
text-align: center;
}

.sunInfo {
display: inline-block;
justify-content: flex-end;
flex-direction: column;

justify-items: right;
align-items: right;
gap: 20px;
}

.extra-info {
display: inline-block;
flex-direction: column;
justify-content: space-between;
align-items: left;
gap: 20px;
}

.col {
display: flex;
align-items: left;
text-align: left;
}

.col img {
width: 40px;
margin-right: 10px;
}

.sunrise img, .sunset img {
width: 60px;
margin-right: 10px;

}

.humidity, .wind {
font-size: 28px;
margin-top: -6px;
}

</code></pre>
<p>I want to extraInfo and sunInfo to be side by side but still have all information in both to act as columns. I also want for the humidity and wind speed text to be to the tight of the icons and for sunset and sunrise for the time to be to the right of the icons as well.</p>
<p>I tried using inline-blocks, float, justify-items, and justify-content and none of them worked.</p>
Continue reading...
 

Latest posts

Top