Mixing
Float each card left - horizontal line of cards
-3
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
.right {
float: right;
top:0;
right:0;
position: absolute;
z-index: 2;
}<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="right">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>I want these flip cards to appear alongside each other in a horizontal line. I tried to make one float left but it didn't, really work out. What am I doing wrong? I just want these to appear in a horizontal line, with a slight gap between each card. It seems to naturally appear in a vertical line on the page.
html html5 css3
asked Jan 2 at 23:56
JessBeeJessBee
11
|
show 2 more comments
-3
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
.right {
float: right;
top:0;
right:0;
position: absolute;
z-index: 2;
}<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="right">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>I want these flip cards to appear alongside each other in a horizontal line. I tried to make one float left but it didn't, really work out. What am I doing wrong? I just want these to appear in a horizontal line, with a slight gap between each card. It seems to naturally appear in a vertical line on the page.
html html5 css3
asked Jan 2 at 23:56
JessBeeJessBee
11
Please warn people before linking to a bunch of gruesome photos of skin diseases?
– Daniel Beck
Jan 2 at 23:59
Sorry, you will be seeing some unpleasant pictures
– JessBee
Jan 3 at 0:15
I feel this is really easy, but I can't seem to work it out since yesterday.
– JessBee
Jan 3 at 0:16
Do you want that one to stay in the top right corner or be in the horizontal line?
– ecg8
Jan 3 at 0:55
Hi JessBee, welcome to StackOverflow. Would you please give us a snippet of your html and css code so we can try to determine where the error is?
– elbrant
Jan 3 at 2:06
|
show 2 more comments
-3
-3
-3
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
.right {
float: right;
top:0;
right:0;
position: absolute;
z-index: 2;
}<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="right">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>I want these flip cards to appear alongside each other in a horizontal line. I tried to make one float left but it didn't, really work out. What am I doing wrong? I just want these to appear in a horizontal line, with a slight gap between each card. It seems to naturally appear in a vertical line on the page.
html html5 css3
asked Jan 2 at 23:56
JessBeeJessBee
11
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
.right {
float: right;
top:0;
right:0;
position: absolute;
z-index: 2;
}<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="right">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>I want these flip cards to appear alongside each other in a horizontal line. I tried to make one float left but it didn't, really work out. What am I doing wrong? I just want these to appear in a horizontal line, with a slight gap between each card. It seems to naturally appear in a vertical line on the page.
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
.right {
float: right;
top:0;
right:0;
position: absolute;
z-index: 2;
}<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="right">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
.right {
float: right;
top:0;
right:0;
position: absolute;
z-index: 2;
}<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="right">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<br>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>html html5 css3
html html5 css3
asked Jan 2 at 23:56
JessBeeJessBee
11
asked Jan 2 at 23:56
JessBeeJessBee
11
edited Jan 3 at 2:18
JessBee
asked Jan 2 at 23:56
JessBeeJessBee
11
asked Jan 2 at 23:56
JessBeeJessBee
11
asked Jan 2 at 23:56
JessBeeJessBee
11
11
Please warn people before linking to a bunch of gruesome photos of skin diseases?
– Daniel Beck
Jan 2 at 23:59
Sorry, you will be seeing some unpleasant pictures
– JessBee
Jan 3 at 0:15
I feel this is really easy, but I can't seem to work it out since yesterday.
– JessBee
Jan 3 at 0:16
Do you want that one to stay in the top right corner or be in the horizontal line?
– ecg8
Jan 3 at 0:55
Hi JessBee, welcome to StackOverflow. Would you please give us a snippet of your html and css code so we can try to determine where the error is?
– elbrant
Jan 3 at 2:06
|
show 2 more comments
Please warn people before linking to a bunch of gruesome photos of skin diseases?
– Daniel Beck
Jan 2 at 23:59
Sorry, you will be seeing some unpleasant pictures
– JessBee
Jan 3 at 0:15
I feel this is really easy, but I can't seem to work it out since yesterday.
– JessBee
Jan 3 at 0:16
Do you want that one to stay in the top right corner or be in the horizontal line?
– ecg8
Jan 3 at 0:55
Hi JessBee, welcome to StackOverflow. Would you please give us a snippet of your html and css code so we can try to determine where the error is?
– elbrant
Jan 3 at 2:06
Please warn people before linking to a bunch of gruesome photos of skin diseases?
– Daniel Beck
Jan 2 at 23:59
Please warn people before linking to a bunch of gruesome photos of skin diseases?
– Daniel Beck
Jan 2 at 23:59
Sorry, you will be seeing some unpleasant pictures
– JessBee
Jan 3 at 0:15
Sorry, you will be seeing some unpleasant pictures
– JessBee
Jan 3 at 0:15
I feel this is really easy, but I can't seem to work it out since yesterday.
– JessBee
Jan 3 at 0:16
I feel this is really easy, but I can't seem to work it out since yesterday.
– JessBee
Jan 3 at 0:16
Do you want that one to stay in the top right corner or be in the horizontal line?
– ecg8
Jan 3 at 0:55
Do you want that one to stay in the top right corner or be in the horizontal line?
– ecg8
Jan 3 at 0:55
Hi JessBee, welcome to StackOverflow. Would you please give us a snippet of your html and css code so we can try to determine where the error is?
– elbrant
Jan 3 at 2:06
Hi JessBee, welcome to StackOverflow. Would you please give us a snippet of your html and css code so we can try to determine where the error is?
– elbrant
Jan 3 at 2:06
|
show 2 more comments
1 Answer
1
active
oldest
votes
0
You can use display: inline-block for .flip-card.
body {
font-family: Arial, Helvetica, sans-serif;
width: 1300px; /* enough space for 4 flip card */
overflow-x: scroll /* horizontal scrollable */
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
display: inline-block; /* to appear alongside each other in a horizontal line */
margin: 10px /* a slight gap between each card */
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
/* Remove unnecessary .right style */<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<!-- remove parent element with class name .right because it's unnecessary -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>answered Jan 3 at 7:36
MordecaiMordecai
1,0671212
Thanks! Amazing, just what I wanted!!
– JessBee
Jan 3 at 21:22
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54014718%2ffloat-each-card-left-horizontal-line-of-cards%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can use display: inline-block for .flip-card.
body {
font-family: Arial, Helvetica, sans-serif;
width: 1300px; /* enough space for 4 flip card */
overflow-x: scroll /* horizontal scrollable */
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
display: inline-block; /* to appear alongside each other in a horizontal line */
margin: 10px /* a slight gap between each card */
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
/* Remove unnecessary .right style */<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<!-- remove parent element with class name .right because it's unnecessary -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>answered Jan 3 at 7:36
MordecaiMordecai
1,0671212
Thanks! Amazing, just what I wanted!!
– JessBee
Jan 3 at 21:22
add a comment |
0
You can use display: inline-block for .flip-card.
body {
font-family: Arial, Helvetica, sans-serif;
width: 1300px; /* enough space for 4 flip card */
overflow-x: scroll /* horizontal scrollable */
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
display: inline-block; /* to appear alongside each other in a horizontal line */
margin: 10px /* a slight gap between each card */
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
/* Remove unnecessary .right style */<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<!-- remove parent element with class name .right because it's unnecessary -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>answered Jan 3 at 7:36
MordecaiMordecai
1,0671212
Thanks! Amazing, just what I wanted!!
– JessBee
Jan 3 at 21:22
add a comment |
0
0
0
You can use display: inline-block for .flip-card.
body {
font-family: Arial, Helvetica, sans-serif;
width: 1300px; /* enough space for 4 flip card */
overflow-x: scroll /* horizontal scrollable */
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
display: inline-block; /* to appear alongside each other in a horizontal line */
margin: 10px /* a slight gap between each card */
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
/* Remove unnecessary .right style */<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<!-- remove parent element with class name .right because it's unnecessary -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>answered Jan 3 at 7:36
MordecaiMordecai
1,0671212
You can use display: inline-block for .flip-card.
body {
font-family: Arial, Helvetica, sans-serif;
width: 1300px; /* enough space for 4 flip card */
overflow-x: scroll /* horizontal scrollable */
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
display: inline-block; /* to appear alongside each other in a horizontal line */
margin: 10px /* a slight gap between each card */
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
/* Remove unnecessary .right style */<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<!-- remove parent element with class name .right because it's unnecessary -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>body {
font-family: Arial, Helvetica, sans-serif;
width: 1300px; /* enough space for 4 flip card */
overflow-x: scroll /* horizontal scrollable */
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
display: inline-block; /* to appear alongside each other in a horizontal line */
margin: 10px /* a slight gap between each card */
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
/* Remove unnecessary .right style */<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<!-- remove parent element with class name .right because it's unnecessary -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>body {
font-family: Arial, Helvetica, sans-serif;
width: 1300px; /* enough space for 4 flip card */
overflow-x: scroll /* horizontal scrollable */
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
display: inline-block; /* to appear alongside each other in a horizontal line */
margin: 10px /* a slight gap between each card */
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
/* Remove unnecessary .right style */<h1>Hover over the cards to learn about the STIs and BBVs.</h1>
<h3>Hover over the image below:</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Gonorrhea</h1>
<p>Positives - Can be cured<br><br>
Negatives - Some strains cannot be cured. If left untreated it can lead to infertility or death.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/gonorrhoea/">here</a> to learn more
</p>
</div>
</div>
</div>
<!-- remove parent element with class name .right because it's unnecessary -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Chlamydia</h1>
<p>Positives - This is easily treated and cured with antibiotics.<br><br>
Negatives - If left untreated can lead to infertility.<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/chlamydia/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>Syphilis</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/syphilis/">here</a> to learn more
</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>HIV</h1>
<p>Positives - .<br><br>
Negatives - .<br><br>
Click <a href="https://playsafe.health.nsw.gov.au/common-stis/hiv-aids/">here</a> to learn more
</p>
</div>
</div>
</div>answered Jan 3 at 7:36
MordecaiMordecai
1,0671212
answered Jan 3 at 7:36
MordecaiMordecai
1,0671212
answered Jan 3 at 7:36
MordecaiMordecai
1,0671212
answered Jan 3 at 7:36
MordecaiMordecai
1,0671212
1,0671212
Thanks! Amazing, just what I wanted!!
– JessBee
Jan 3 at 21:22
add a comment |
Thanks! Amazing, just what I wanted!!
– JessBee
Jan 3 at 21:22
Thanks! Amazing, just what I wanted!!
– JessBee
Jan 3 at 21:22
Thanks! Amazing, just what I wanted!!
– JessBee
Jan 3 at 21:22
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54014718%2ffloat-each-card-left-horizontal-line-of-cards%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please warn people before linking to a bunch of gruesome photos of skin diseases?
– Daniel Beck
Jan 2 at 23:59
Sorry, you will be seeing some unpleasant pictures
– JessBee
Jan 3 at 0:15
I feel this is really easy, but I can't seem to work it out since yesterday.
– JessBee
Jan 3 at 0:16
Do you want that one to stay in the top right corner or be in the horizontal line?
– ecg8
Jan 3 at 0:55
Hi JessBee, welcome to StackOverflow. Would you please give us a snippet of your html and css code so we can try to determine where the error is?
– elbrant
Jan 3 at 2:06