issue? Why won't my text display side-by-side? HTML/CSS prob?

LSJ32141
May 21, 2023
226 views
0 votes
2 Answers

I am facing an issue where I am trying to make a clone of the facebook website and I am currently working on the stories/reels box however my stories and reels text is not appearing on the same row side by side with each other. I want my stories and reels text to appear like this image here:

https://imgur.com/a/ZitIdcL

but even when I use in-line blocks and set widths to 50% and align the text to the right and the left, the end result is uneven and not what I am looking for. Please help

html,
body {
  height: 100vh;
  padding: 0;
  margin: 0;
  background-color: #f1f2f5;
}

/* this part is for the header */

.header {
  display: flex;
  position: fixed;
  align-items: center;
  background-color: #fff;
  justify-content: space-between;
  flex-direction: row;
  padding-bottom: 10px;
  z-index: 1;
  height: 45px;
  padding: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
}

.leftHeader {
  width: 25%;
  display: flex;
  justify-content: left;
  align-items: left;
  flex-direction: row;
}

.logo {
  height: 50px;
  width: 75px;
}

.searchBar {
  background-color: #eff2f5;
  position: relative;
  padding: 15px;
  border-radius: 40px;
  display: flex;
  gap: 20px;
  margin-left: -10px;
  height: 10px;
}

.searchBtn {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.searchLogo {
  height: 30px;
  width: 50px;
}

.inputText {
  background-color: #eff2f5;
  outline: none;
  border: 0;
  width: 175px;
  height: 15px;
}

.centerHeader {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.centerHeader i {
  font-size: 25px;
}

.rightHeader {
  width: 25%;
  display: flex;
  justify-content: right;
  align-items: right;
  flex-direction: row;
  gap: 20px;
}

.rightHeader i {
  font-size: 25px;
}

.profilePic img {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  object-fit: cover;
}

/* This part is for the main */

.mainBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 50%;
  margin: 50px auto 0;
}

.stories_Reels_Box {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-top: 30px;
  margin-bottom: 20px;
}

.upper_Box {
  justify-content: space-between;
  align-items: center;
  height: 30%;
  width: 100%;
  border-bottom: 2px solid black;
}

.stories {
  width: 50%;
  text-align: right;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: blue;
}

.reels {
  width: 50%;
  text-align: left;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: blue;
}

.whats_On_Your_Mind {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

.post_One {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

.people_You_May_Know {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/a35cda4da8.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="header">
      <div class="leftHeader">
        <img class="logo" src="images/Facebook-logo.png" />
        <div class="searchBar">
          <img class="searchBtn" src="images/search-icon.webp" />
          <input type="text" class="inputText" placeholder="Search Facebook" />
        </div>
      </div>

      <div class="centerHeader">
        <div class="home">
          <i class="fa-solid fa-house" style="color: #000000"></i>
        </div>
        <div class="watch">
          <i class="fa-sharp fa-solid fa-tv" style="color: #000000"></i>
        </div>
        <div class="marketplace">
          <i class="fa-solid fa-shop" style="color: #000000"></i>
        </div>
        <div class="group">
          <i class="fa-solid fa-user-group" style="color: #000000"></i>
        </div>
      </div>
      <div class="rightHeader">
        <div class="menu">
          <i class="fa-solid fa-bars" style="color: #000000"></i>
        </div>

        <div class="message">
          <i class="fa-brands fa-facebook-messenger" style="color: #000000"></i>
        </div>

        <div class="notification">
          <i class="fa-solid fa-bell" style="color: #000000"></i>
        </div>

        <div class="profilePic">
          <img
            src="/images/ProgrammingIllustration.png"
            alt="profile_picture"
          />
        </div>
      </div>
    </div>

    <div class="mainBar">
      <div class="stories_Reels_Box">
        <div class="upper_Box">
          <div class="stories">Stories</div>
          <div class="reels">Reels</div>
        </div>
      </div>

      <div class="whats_On_Your_Mind"></div>
      <div class="post_One"></div>
      <div class="people_You_May_Know"></div>
    </div>

    <div class="leftSidebar"></div>

    <div class="rightBar"></div>
  </body>
</html>

Tags: css html

Answers

Flex layout only works on the direct children of a flex container. So you’d need to set .upper_Box to display: flex for those boxes to sit side-by-side. But it’s also worth asking if you need the .upper_Box div at all. Looks like you can just remove it.

html,
body {
  height: 100vh;
  padding: 0;
  margin: 0;
  background-color: #f1f2f5;
}

/* this part is for the header */

.header {
  display: flex;
  position: fixed;
  align-items: center;
  background-color: #fff;
  justify-content: space-between;
  flex-direction: row;
  padding-bottom: 10px;
  z-index: 1;
  height: 45px;
  padding: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
}

.leftHeader {
  width: 25%;
  display: flex;
  justify-content: left;
  align-items: left;
  flex-direction: row;
}

.logo {
  height: 50px;
  width: 75px;
}

.searchBar {
  background-color: #eff2f5;
  position: relative;
  padding: 15px;
  border-radius: 40px;
  display: flex;
  gap: 20px;
  margin-left: -10px;
  height: 10px;
}

.searchBtn {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.searchLogo {
  height: 30px;
  width: 50px;
}

.inputText {
  background-color: #eff2f5;
  outline: none;
  border: 0;
  width: 175px;
  height: 15px;
}

.centerHeader {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.centerHeader i {
  font-size: 25px;
}

.rightHeader {
  width: 25%;
  display: flex;
  justify-content: right;
  align-items: right;
  flex-direction: row;
  gap: 20px;
}

.rightHeader i {
  font-size: 25px;
}

.profilePic img {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  object-fit: cover;
}

/* This part is for the main */

.mainBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 50%;
  margin: 50px auto 0;
}

.stories_Reels_Box {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-top: 30px;
  margin-bottom: 20px;
}

.upper_Box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30%;
  width: 100%;
  border-bottom: 2px solid black;
}

.stories {
  width: 50%;
  text-align: right;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: blue;
}

.reels {
  width: 50%;
  text-align: left;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: blue;
}

.whats_On_Your_Mind {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

.post_One {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

.people_You_May_Know {
  height: 300px;
  width: 75%;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/a35cda4da8.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="header">
      <div class="leftHeader">
        <img class="logo" src="images/Facebook-logo.png" />
        <div class="searchBar">
          <img class="searchBtn" src="images/search-icon.webp" />
          <input type="text" class="inputText" placeholder="Search Facebook" />
        </div>
      </div>

      <div class="centerHeader">
        <div class="home">
          <i class="fa-solid fa-house" style="color: #000000"></i>
        </div>
        <div class="watch">
          <i class="fa-sharp fa-solid fa-tv" style="color: #000000"></i>
        </div>
        <div class="marketplace">
          <i class="fa-solid fa-shop" style="color: #000000"></i>
        </div>
        <div class="group">
          <i class="fa-solid fa-user-group" style="color: #000000"></i>
        </div>
      </div>
      <div class="rightHeader">
        <div class="menu">
          <i class="fa-solid fa-bars" style="color: #000000"></i>
        </div>

        <div class="message">
          <i class="fa-brands fa-facebook-messenger" style="color: #000000"></i>
        </div>

        <div class="notification">
          <i class="fa-solid fa-bell" style="color: #000000"></i>
        </div>

        <div class="profilePic">
          <img
            src="/images/ProgrammingIllustration.png"
            alt="profile_picture"
          />
        </div>
      </div>
    </div>

    <div class="mainBar">
      <div class="stories_Reels_Box">
        <div class="upper_Box">
          <div class="stories">Stories</div>
          <div class="reels">Reels</div>
        </div>
      </div>

      <div class="whats_On_Your_Mind"></div>
      <div class="post_One"></div>
      <div class="people_You_May_Know"></div>
    </div>

    <div class="leftSidebar"></div>

    <div class="rightBar"></div>
  </body>
</html>

Just use flexbox:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

/** just for demo */
.box-container {
  margin: 50px;
  width: 300px;
  background-color: gray;
}

.title {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
}

.title .tab {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

<div class="box-container">
  <!-- here -->
  <div class="title">
    <div class="tab" style="background-color: red">
      Stories
    </div>
    <div class="tab" style="background-color: green">
      Reels
    </div>
  </div>
  <!-- end here -->
  <div class="rest-of-the-content">
    Text
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

issue? Why won’t my text display side-by-side? HTML/CSS prob?

Answers