How can i place div side by side-CodePudding

i was trying to displace 6 divs side by side using display grid but they are getting displayed in rows . i had used display grid but it still didn't work , i also tried few more ways which i searched on stackoverflow . Can you tell what i did wrong or suggest an alternative tp this . The 2 divs are box1 and box2 . Here is a refernce picture

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>
<body>
 <div >
   <img src="background.png" >
   <nav>
     <ul >
       <li><a href='#' >Search</a></li>
       <li><a href='#' >Browse</a></li>
       <li><a href='#' >Tags</a></li>
       <li><a href='#' >Filter</a></li>
       <li><a href='#' >Dev</a></li>
     </ul>
    </nav>
    <div ><a href="#" class='sign'>Sign In</a></div>
 </div>
 <div >
<h1>Read Light Novel & Web Novel Translations Online For FREE!</h1>
<p2>Your fictional stories hub</p2>
<br>
<p3>Looking for a great place to read Light Novels?

Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese, Chinese and Korean light novels in English. Every new chapters published by the author is updated instantly on the Light Novel Pub and notification service is provided to the readers.

</p3>

Start reading now to explore this mysterious fantasy world.
 </div>
<br>
<br>
<div >
  <div >
  <h3 >New Ongoing Release</h3>
  </div>
  <div >
    <div 
    <div >
      <img src="martialart.jpg" >
      <a href="#" >Martial Art System </a>
     <div > <p2> Rank 1 <p2>
     </div>
    <div >
      <img src="martialart.jpg" >
      <a href="#" >Martial Art System </a>
     <div > <p2> Rank 1 <p2>
     </div>
    </div>
  </div>
  </div>
</div>
</body>
</html>

*{
  margin: 0px;
  padding: 0px ;
}

.navlist{
  list-style: none ;
  display: flex ;
  padding: 0px ;
  margin: 0px auto ;
  width: 477px ;
  top: 45px ;
  position: relative;
}

.bar{
  height: 100px ;
  width: 100% ;
  justify-content: center ;
  box-shadow: 0px 2px 5px ;
  display: grid;
  grid-template-columns: 100px auto 80px;
}

.link1{
  margin-left: 30px;
  text-decoration: none ;
  color: black ;
  font-size: 20px
}

.signin{
  background:blue ;
  height: 35px ;
  width: 100px ;
  left: 50px ;
  position: relative;
  text-align: center ;
  font-size: 18px ;
  border-radius: 15% ;
  top: 20px
  
}

.sign{
 top: 15% ;
 position: relative;
 color: white ;
 text-decoration: none
}

.pic{
  position: relative;
  left: -100px ;
  width: 100% ;
  height: 75%
}

.introbox{
  width: 700px ;
  height: 200px ;
  background-image: url('wal.jpg');
  opacity: 0.75 ;
  left: 25% ;
  position: relative;
  background-position: center ;
  top: 10px ;
  border-radius: 5px ;
  font-weight: 600 ;
  box-shadow: 0px 2px 5px ;
}

.new{
  font-size: 30px ;
  left: 20% ;
  position: relative;
  font-weight: 400
}



.box1{
  height: 250px ;
  width: 200px ;
  background: green ;
  position: relative;
  top: 2% ;
  display: grid ;
  font-size: 20px ;
  font-weight: 600
}

.box2{
  height: 250px ;
  width: 200px ;
  background: green ;
  position: relative;
  top: 1% ;
  display: grid ;
  font-size: 20px ;
  font-weight: 600 ;
}



.lnlink{
  text-decoration: none ;
  color: black
}



.lightnovel1{
  position: relative;
  height: 800px ;
  width: 800px ;
  background: red ;
  left: 5%  ;
  display: grid;
  grid-row:  1/3;
}

.ww{
  grid-row: 1/3
}

CodePudding user response：

Change the grid-template-columns and use the repeat function depending on the number of columns you want to display.

.bar{
  height: 100px ;
  width: 100% ;
  justify-content: center ;
  box-shadow: 0px 2px 5px ;
  display: grid;
  grid-template-columns: repeat(6, auto);
}

.bar{
  height: 100px ;
  width: 100% ;
  justify-content: center ;
  box-shadow: 0px 2px 5px ;
  display: grid;
  grid-template-columns: 100px repeat(4, auto) 80px;
}

CodePudding user response：

Your code is containing a lot of small errors, that might be why you're experiencing weird results with your page. For example:

<div is missing a closing >
<p2> Rank 1 <p2> starting two unknown p2 tags, that never closes

After fixing those issues, and adding display: flex; to .ww, your divs appear next to each other.

Try switching over to a code editor, that can easily visualize those errors for you, like Visual Studio Code.

*{
  margin: 0px;
  padding: 0px ;
}

.navlist{
  list-style: none ;
  display: flex ;
  padding: 0px ;
  margin: 0px auto ;
  width: 477px ;
  top: 45px ;
  position: relative;
}

.bar{
  height: 100px ;
  width: 100% ;
  justify-content: center ;
  box-shadow: 0px 2px 5px ;
  display: grid;
  grid-template-columns: 100px auto 80px;
}

.link1{
  margin-left: 30px;
  text-decoration: none ;
  color: black ;
  font-size: 20px
}

.signin{
  background:blue ;
  height: 35px ;
  width: 100px ;
  left: 50px ;
  position: relative;
  text-align: center ;
  font-size: 18px ;
  border-radius: 15% ;
  top: 20px
  
}

.sign{
 top: 15% ;
 position: relative;
 color: white ;
 text-decoration: none
}

.pic{
  position: relative;
  left: -100px ;
  width: 100% ;
  height: 75%
}

.introbox{
  width: 700px ;
  height: 200px ;
  background-image: url('wal.jpg');
  opacity: 0.75 ;
  left: 25% ;
  position: relative;
  background-position: center ;
  top: 10px ;
  border-radius: 5px ;
  font-weight: 600 ;
  box-shadow: 0px 2px 5px ;
}

.new{
  font-size: 30px ;
  left: 20% ;
  position: relative;
  font-weight: 400
}



.box1{
  height: 250px ;
  width: 200px ;
  background: green ;
  position: relative;
  top: 2% ;
  display: grid ;
  font-size: 20px ;
  font-weight: 600;
}

.box2{
  height: 250px ;
  width: 200px ;
  background: green ;
  position: relative;
  top: 1% ;
  display: grid ;
  font-size: 20px ;
  font-weight: 600 ;
}



.lnlink{
  text-decoration: none ;
  color: black
}



.lightnovel1{
  position: relative;
  height: 800px ;
  width: 800px ;
  background: red ;
  left: 5%  ;
  display: grid;
  grid-row:  1/3;
}

.ww{
  display: flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title></title>
</head>
<body>
 <div >
   <img src="background.png" >
   <nav>
     <ul >
       <li><a href='#' >Search</a></li>
       <li><a href='#' >Browse</a></li>
       <li><a href='#' >Tags</a></li>
       <li><a href='#' >Filter</a></li>
       <li><a href='#' >Dev</a></li>
     </ul>
    </nav>
    <div ><a href="#" class='sign'>Sign In</a></div>
 </div>
 <div >
<h1>Read Light Novel & Web Novel Translations Online For FREE!</h1>
<p2>Your fictional stories hub</p2>
<br>
<p3>Looking for a great place to read Light Novels?

Light Novel Pub is a very special platform where you can read the translated versions of world famous Japanese, Chinese and Korean light novels in English. Every new chapters published by the author is updated instantly on the Light Novel Pub and notification service is provided to the readers.

</p3>

Start reading now to explore this mysterious fantasy world.
 </div>
<br>
<br>
<div >
  <div >
    <h3 >New Ongoing Release</h3>
  </div>
  <div >
    <div >
      <div >
        <img src="martialart.jpg" >
        <a href="#" >Martial Art System </a>
        <p> Rank 1 </p>
      </div>
      <div >
        <img src="martialart.jpg" >
        <a href="#" >Martial Art System </a>
       <p> Rank 1 </p>
      </div>
    </div>
  </div>
</div>
</body>
</html>