Flexbox main content in columns and sidebar

Johnbo 0
Viewed 43

I'm looking to create a website that has multiple divs as the main content, stacked on top of each other, and a sidebar on the right to show pictures, similar to the layout of reddit. Using CSS flexbox- how do I make my main content divs line up? Apologies for the messy code, I'm new to all this (also I'm sure there's a way to make all the elements have the same background color.. how would I do that?)

Screenshot

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.container div {
  border: 3px #c63a32 solid;
  color: azure;
  padding: 10px;
  margin: 10px;
  border-radius: 15px;
}

.info {
  order: 1;
  width: 50%;
  background-color: #0f3047
}

.info p {
  font-size: 35;
  background-color: #0f3047
}

.info span.ips {
  font-size: 35;
  color: yellow;
  background-color: #0f3047
}

.info span.about {
  font-size: 35;
  color: rgb(192, 192, 238);
  background-color: #c63a32;
}

span.or {
  color: azure;
  background-color: #0f3047
}

.gallery {
  width: 15%;
  order: 3;
  background-color: #0f3047;
}

.gallery span.text {
  font-size: 35;
  color: rgb(192, 192, 238);
  background-color: #c63a32;
}

.gallery p {
  background-color: #0f3047;
}

.contact {
  order: 3;
  width: 50%;
  background-color: #0f3047;
}

.contact span.CONTACT {
  font-size: 35;
  color: rgb(192, 192, 238);
  background-color: #c63a32;
}
<div class="container">

  <div class="info">
    <p><span class="about">ABOUT US</span>xxx<br> xxx <br>
      <br>xxx<span class="ips">xxx <span class="or"> or</span> xxx </span>
    </p>
  </div>

  <div class="gallery">
    <p><span class="text">GALLERY</span></p>
    <!-- <img src="favicon.png"> -->
  </div>
  <div class="contact"> <span class="CONTACT">CONTACT</span> </div>

</div>

flexbox css html
1 Answers

Maybe you need to try make a container for left or right content. And then insert class for each of them and give rules for css, in this case I add column-left and column-right.

This is the html

<div class="container">
      <div class="column-left">
          <div class="info">
            <p><span class="about">ABOUT US</span>xxx<br> xxx <br>
              <br>xxx<span class="ips">xxx <span class="or"> or</span> xxx </span>
            </p>
          </div>    
          <div class="contact"> <span class="CONTACT">CONTACT</span> </div>  
      </div>
      
      <div class="gallery column-right">
        <p><span class="text">GALLERY</span></p>
        <!-- <img src="favicon.png"> -->
      </div>
 </div>

And this is the style for the each column.

.column-left {
  float: left;
  width: 70%;
  padding: 10px;
  height: 300px; 
}

.column-right {
  float: left;
  width: 30%;
  padding: 10px;
  height: 300px; 
}

enter image description here

    .container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .container div {
      border: 3px #c63a32 solid;
      color: azure;
      padding: 10px;
      margin: 10px;
      border-radius: 15px;
    }

    .info {
      order: 1;
      width: 50%;
      background-color: #0f3047
    }

    .info p {
      font-size: 35;
      background-color: #0f3047
    }

    .info span.ips {
      font-size: 35;
      color: yellow;
      background-color: #0f3047
    }

    .info span.about {
      font-size: 35;
      color: rgb(192, 192, 238);
      background-color: #c63a32;
    }

    span.or {
      color: azure;
      background-color: #0f3047
    }

    .gallery {
      width: 15%;
      order: 3;
      background-color: #0f3047;
    }

    .gallery span.text {
      font-size: 35;
      color: rgb(192, 192, 238);
      background-color: #c63a32;
    }

    .gallery p {
      background-color: #0f3047;
    }

    .contact {
      order: 3;
      width: 50%;
      background-color: #0f3047;
    }

    .contact span.CONTACT {
      font-size: 35;
      color: rgb(192, 192, 238);
      background-color: #c63a32;
    }
    .column-left {
      float: left;
      width: 60%;
      padding: 10px;
      height: 300px; 
    }

    .column-right {
      float:left;
      width: 20%;
      padding: 10px;
      height: 300px; 
    }
    <div class="container">
      <div class='column-left'> 
        <div class="info">
          <p><span class="about">ABOUT US</span>xxx<br> xxx <br>
            <br>xxx<span class="ips">xxx <span class="or"> or</span> xxx </span>
          </p>
        </div>
        <div class="contact"> <span class="CONTACT">CONTACT</span> </div>
      </div>

      <div class="gallery column-right">
        <p><span class="text">GALLERY</span></p>
        <!-- <img src="favicon.png"> -->
      </div>

    </div>

rizaldodo0
Related