BeerusDev
Reputation: 1519
Images Side by Side in HTML/CSS
I cannot believe I am asking this question, but how can I get these two images to go side by side on the same level? I set both of the image containers to display: inline-block; and it is not placing them side by side, yet one above the other.
Live example:
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#b3ab7d"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#104723",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 5,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "window",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});.img_container {
border: none;
padding: 10px;
height: auto;
width: 45%;
justify-content: center;
align-items: center;
padding-top: 0px;
border-radius: 10px;
margin-top: 10px;
display: inline-block;
}
.landinghead {
color: black;
font-size: 30px;
text-align: center;
}
#img1 {
height: auto;
width: 400px;
justify-content: center;
align-items: center;
border-radius: 10px;
object-fit: cover;
}
#img2 {
height: auto;
width: 400px;
justify-content: center;
align-items: center;
border-radius: 10px;
object-fit: cover;
}
.projectInfo{
display: block;
text-align: center;
color: black;
margin-bottom: 10px;
font-weight: bold;
font-size: 130%;
}
#particles-js{
position:absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
<h3 class="landinghead">Projects Landing Page</h3>
<span class ="projectInfo">Here you will find a collection of Active/Ongoing Projects</span>
<div class="center">
<div class="img_container">
<a href="www.google.com">
<img src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" id="img1"/>
</a>
</div>
<div class="img_container">
<a href="www.google.com">
<img src="https://api.army.mil/e2/c/images/2021/01/20/153dc153/max1200.jpg" id="img2"/>
</a>
</div>
</div>
</body>Upvotes: 0
Views: 146
Answers (3)
DT7
Reputation: 13
In your image container, you can add the following.
float:left;
Full Code:
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#b3ab7d"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#104723",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 5,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "window",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});.img_container {
border: none;
float: left;
padding: 10px;
height: auto;
width: 45%;
justify-content: center;
align-items: center;
padding-top: 0px;
border-radius: 10px;
margin-top: 10px;
display: inline-block;
}
.landinghead {
color: black;
font-size: 30px;
text-align: center;
}
#img1 {
height: auto;
width: 400px;
justify-content: center;
align-items: center;
border-radius: 10px;
object-fit: cover;
}
#img2 {
height: auto;
width: 400px;
justify-content: center;
align-items: center;
border-radius: 10px;
object-fit: cover;
}
.projectInfo{
display: block;
text-align: center;
color: black;
margin-bottom: 10px;
font-weight: bold;
font-size: 130%;
}
#particles-js{
position:absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
<h3 class="landinghead">Projects Landing Page</h3>
<span class ="projectInfo">Here you will find a collection of Active/Ongoing Projects</span>
<div class="center">
<div class="img_container">
<a href="www.google.com">
<img src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" id="img1"/>
</a>
</div>
<div class="img_container">
<a href="www.google.com">
<img src="https://api.army.mil/e2/c/images/2021/01/20/153dc153/max1200.jpg" id="img2"/>
</a>
</div>
</div>
</body>More information on it HERE
Working for me when I add that.
Upvotes: 0
pasindu229
Reputation: 27
You can use display flex to class "center"
.center{
display:flex
}have look at this
Upvotes: 0
Luis Angel Pena Zuniga
Reputation: 190
You can use this code:
Add one flex container, float to left and edit the width and height value:
//Style.css
.container {
display: flex;
position: relative;
width: 100%;
}
.img_container {
width: 50%;
float: left;
}
#img1 {
height: 100%;
width: 100%;
}
#img2 {
height: 100%;
width: 100%;
}
//Html
<div class="center container">
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#b3ab7d"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#104723",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 5,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "window",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});.container {
display: flex;
position: relative;
width: 100%;
}
.img_container {
border: none;
padding: 10px;
height: auto;
width: 50%;
justify-content: center;
align-items: center;
padding-top: 0px;
border-radius: 10px;
margin-top: 10px;
float: left;
}
.landinghead {
color: black;
font-size: 30px;
text-align: center;
}
#img1 {
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
border-radius: 10px;
}
#img2 {
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.projectInfo{
display: block;
text-align: center;
color: black;
margin-bottom: 10px;
font-weight: bold;
font-size: 130%;
}
#particles-js{
position:absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Projects Landing Page</title>
</head>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<body>
<h3 class="landinghead">Projects Landing Page</h3>
<span class ="projectInfo">Here you will find a collection of Active/Ongoing Projects</span>
<div class="center container">
<div class="img_container">
<a href="www.google.com">
<img src="https://api.army.mil/e2/c/images/2021/01/26/4c5cde5d/max1200.jpg" id="img1"/>
</a>
</div>
<div class="img_container">
<a href="www.google.com">
<img src="https://api.army.mil/e2/c/images/2021/01/20/153dc153/max1200.jpg" id="img2"/>
</a>
</div>
</div>
</body>Upvotes: 4
Related Questions
- How to get images side by side
- Need helping putting images side by side
- aligning image side by side position (css + html)
- Getting 2 images right next to each other?
- How to lay 2 images side by side in html?
- HTML - Displaying Images side by side
- CSS - Display images side by side
- Putting 2 images side by side
- How to have an array of images side by side using css/html
- display images side by side