Hello as shown in the picture there are 2 divs which i want to place next to each other . They are box1 and box2 respectivly . In the pic they both have martial arts system and a name . How can i do this? . Below is the html and css code i have used.
* {
margin: 0px;
padding: 0px;
justify-content: center
}
.navlist {
list-style: none;
display: flex;
padding: 0px;
margin: 0px auto;
width: 477px;
top: 45px;
position: relative;
}
.bar {
height: 100px;
justify-content: center;
box-shadow: 0px 2px 5px;
display: grid;
grid-template-columns: 100px auto 80px;
height: 100px;
width: 100%
}
.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;
left: 20%;
top: 2%;
display: grid;
font-size: 20px;
font-weight: 600
}
.rank {
font-weight: 100
}
.box1:hover {}
.lnlink {
text-decoration: none;
color: black
}
.box2 {
height: 250px;
width: 200px;
background: green;
position: relative;
left: 40%;
top: 1%;
display: grid;
font-size: 20px;
font-weight: 600
}<!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 >
<img src="martialart.jpg" >
<a href="#" >Martial Art System </a>
<div >
<p2> Rank 1<p2>
</div>
</div>
<div >
<img src="martialart.jpg" >
<a href="#" >Martial Art System </a>
<div >
<p2> Rank 1<p2>
</div>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
If you want to really utilize the grid format you should use display: grid;. Especially in your case where there'll be multiple items that you will be adding to your div. Setting grid-template-columns will set how many columns you can have in a row and it'll automatically add the next item that exceeded your number of columns in the next row. You can read more about grid in this link.
PS. I read my light novels on that website too lol!
* {
margin: 0px;
padding: 0px;
justify-content: center
}
.navlist {
list-style: none;
display: flex;
padding: 0px;
margin: 0px auto;
width: 477px;
top: 45px;
position: relative;
}
.bar {
height: 100px;
justify-content: center;
box-shadow: 0px 2px 5px;
display: grid;
grid-template-columns: 100px auto 80px;
height: 100px;
width: 100%
}
.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;
left: 20%;
top: 2%;
display: grid;
font-size: 20px;
font-weight: 600
}
.rank {
font-weight: 100
}
.box1:hover {}
.lnlink {
text-decoration: none;
color: black
}
.box2 {
height: 250px;
width: 200px;
background: green;
position: relative;
left: 40%;
top: 1%;
display: grid;
font-size: 20px;
font-weight: 600
}
.lightnovel1{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}<!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 >
<img src="martialart.jpg" >
<a href="#" >Martial Art System </a>
<div >
<p2> Rank 1
<p2>
</div>
</div>
<div >
<img src="martialart.jpg" >
<a href="#" >Martial Art System </a>
<div >
<p2> Rank 1
<p2>
</div>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
* {
margin: 0px;
padding: 0px;
justify-content: center
}
.navlist {
list-style: none;
display: flex;
padding: 0px;
margin: 0px auto;
width: 477px;
top: 45px;
position: relative;
}
.bar {
height: 100px;
justify-content: center;
box-shadow: 0px 2px 5px;
display: grid;
grid-template-columns: 100px auto 80px;
height: 100px;
width: 100%
}
.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;
left: 20%;
top: 2%;
display: grid;
font-size: 20px;
font-weight: 600
}
.rank {
font-weight: 100
}
.box1:hover {}
.lnlink {
text-decoration: none;
color: black
}
.box2 {
height: 250px;
width: 200px;
background: green;
position: relative;
left: 40%;
top: 1%;
display: grid;
font-size: 20px;
font-weight: 600
}
.lightnovel1{
display: flex;
flex-direction:row;
justify-content:flex-start;<!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 >
<img src="martialart.jpg" >
<a href="#" >Martial Art System </a>
<div >
<p2> Rank 1<p2>
</div>
</div>
<div >
<img src="martialart.jpg" >
<a href="#" >Martial Art System </a>
<div >
<p2> Rank 1<p2>
</div>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
There are many ways to achieve it, consider using flex.
You need to adjust to position, top, left of box1 and box2 to put where you want to put.
.lightnovel1 {
display: flex;
justify-content: flex-start;
}