I have a logo on the far left. There is a div container in the middle and a div container on the far left. All packed together in a div container.
I have the middle container on margin: auto; adjusted so that it has the same distance on both sides.
The problem is that if I move the logo left or right, the middle container also moves. How can I ensure that the middle container always stays in the middle no matter what happens left or right?
body {
margin: 0%;
font-family: Arial, Helvetica, sans-serif;
}
.container1 {
height: 70px;
background-color: #e7e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.container12 {
margin-left: 50px;
}
.container12 h1 {
font-size: 20px;
}
.container13 {
margin-right: 25px;
}
.container13 a {
margin: 0%;
text-decoration: none;
color: black;
float: inline-start;
}
.container13 a:hover {
text-decoration: underline;
}
.trennlinie {
border-right: 1px solid grey;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 12.5px;
}
.trennliniehilfe {
padding-left: 12.5px;
padding-top: 15px;
padding-bottom: 15px;
}
.container2 {
height: 80px;
border-bottom: 1px solid rgb(187, 187, 187);
display: flex;
align-items: center;
}
.airbnblogo {
width: 50px;
}
.airbnbcont {
margin-left: 110px;
;
}
.mittecontainer {
display: flex;
margin: auto;
float: inline-start;
background-color: rgb(214, 212, 212);
border: 2px solid black;
border-radius: 15px;
padding-right: 5px;
}
.mittecontainer p {
margin-left: 11.5px;
}
.part3 {
display: flex;
align-items: center;
margin-right: 35px;
}
.derretter {
margin-right: 15px;
}
.interneticon {
margin-right: 15px;
width: 30px;
}
.Pics img {
width: 250px;
vertical-align: middle;
}
.Pics {
display: flex;
justify-content: center;
margin-top: 80px;
border: 2px solid white;
}
.p1 {
border-right: 1px solid grey;
padding-right: 12.5px;
}
.p2 {
border-right: 1px solid grey;
padding-right: 12.5px;
}
.Pics p {
display: flex;
justify-content: center;
}
.pics2 {
background-color: black;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
border-radius: 10px;
}
.pics2 p {
background-color: black;
color: white;
border: 2px solid white;
border-radius: 15px;
padding: 5px;
}
.pics2 p:hover {
background-color: white;
color: black;
}
.ia {
width: 30px;
}
<!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>Airbnb.com</title>
</head>
<body>
<div class="container1">
<div class="container12">
<h1>Hier kommt das Airbnb 2022: Winter-Update</h1>
</div>
<div class="container13">
<a class="trennlinie" href="">Film abspielen</a>
<a class="trennliniehilfe" href="">Alle Neuigkeiten entdecken</a>
</div>
</div>
<div class="container2">
<div class="airbnbcont">
<img class="airbnblogo" src="airbnb.png">
</div>
<div class="mittecontainer">
<p class="p1">Irgendwo</p>
<p class="p2">Eine Woche</p>
<p>Gäste hinzufügen</p>
</div>
<div class="part3">
<div class="derretter">
<p>Als Gastgeber:in loslegen</p>
</div>
<div class="interneticon">
<img class="ia" src="internet.png" alt="">
</div>
<div>
<img class="ia" src="menu.png" alt="">
</div>
</div>
</div>
<div class="Pics">
<div class="pics2">
<img src="din1.jpg"> <br>
<p>Jetzt Flug sichern!</p>
<p>Weitere Infos</p>
<p>Standort</p>
</div>
</div>
</body>
</html>
Inside the container2 class in the style tag, replace display: flex; to be display: grid; and add grid-template-columns: 25% 50% 25%;. Like this:
.container2 {
height: 80px;
border-bottom: 1px solid rgb(187, 187, 187);
display: grid;
grid-template-columns: 25% 50% 25%;
align-items: center;
}
And don't forget if there are too many CSS styles, then make an external CSS link so that giving css styles is easier.
Related
I'm creating a react component, but I don't know how to lay out the items.
It currently looks like this because of the Audio component:
I want both of the images to be aligned vertically to one another, like this:
#finish-content {
width: 100%;
position: relative;
border: 1px solid black;
border-radius: 25px;
margin-left: 1.5rem;
text-align: center;
}
.game-finish-flex {
display: flex;
flex-direction: column;
}
.game-finish-upper {
display: flex;
justify-content: center;
}
.game-finish-image, .game-finish-image-secundar {
border-radius: 15px;
}
.game-finish-image {
margin-top: 1rem;
width: 300px;
height: 200px;
}
.game-finish-image-secundar {
width: 300px;
height: 150px;
}
.message-finish {
border: 1px solid black;
border-radius: 1.5rem;
width: 50%;
margin: 1.5rem auto;
height: 2.5rem;
width: 300px;
line-height: 2.5rem;
}
.circle-audio {
color: #fff;
border: 1px solid black;
border-radius: 50%;
}
.fa-stack-custom {
cursor: pointer;
margin-left: 1rem;
}
span.audio-gameinfo {
margin-left: 0rem;
margin-bottom: 0.5rem;
}
.audio-finish {
margin-top: 1rem;
}
.game-details-image {
margin-top: 2rem;
border-radius: 15px;
width: 15rem;
height: 15rem;
}
.game-answers-image {
border-radius: 15px;
width: 15rem;
height: 15rem;
margin: 0 !important;
padding: 0 !important;
}
.draggable-game-image {
border-radius: 15px;
margin: 0 1rem 1rem 1rem;
}
#media (max-width: 800px)
{
.game-answers-image {
width: 12rem;
height: 12rem;
}
}
<div id="quiz-container">
<div class="row">
<div id="finish-content">
<div class="game-finish-flex">
<div class="game-finish-upper">
<div class="game-image-wrapper"><img class="game-finish-image" src="/Untitled.png" alt="test"></div>
<span class="fa-stack fa-stack-custom audio-finish"><i
class="far fa-circle fa-stack-2x circle-audio"></i><i
class="fa fa-volume-up fa-stack-1x"></i></span>
</div>
<div class="message-finish">test</div>
<div class="game-image-wrapper"><img class="game-finish-image-secundar" src="/Untitled.png" alt="test">
</div>
</div><button class="btn btn-outline-success next-button">Next</button>
</div>
</div>
</div>
How can I change the layout to look like in the second picture, without deleting the Audio component?
Thanks.
from the looks of your code and the picture. Let me walk through my solution to the problem. Get rid of the audio component as it is interrupting with the flow of the box you want to align. Second, make sure both the images are the same width, which can be done as a percentage of the parent container. Now, I'm assuming you still want that audio component on your site, so a couple of solutions can be:
Position this audio box inside the div of the upper image. Use negative margins/positioning to make sure it stays at the right of this box. This can be achieved using something like position:absolute, right:0, margin-right: -10%, transform: translateX(10%).
Make the parent container width: 50%, margin: 0 auto. So it's center. Now align-items: flex-start. This will make the first items aligned, as flexbox isn't trying to center them by distributing their individual widths and space around them.
Can the audio icon be anywhere? IF so, try this snippet.
#finish-content {
border: 1px solid black;
border-radius: 25px;
margin-left: 1.5rem;
text-align: center;
}
.game-finish-flex {
display: flex;
flex-direction: column;
justify-content: center;
}
.game-finish-upper {
display: flex;
justify-content: center;
}
.game-finish-image,
.game-finish-image-secundar {
border-radius: 15px;
}
.game-finish-image {
margin-top: 1rem;
width: 300px;
height: 200px;
}
.game-finish-image-secundar {
width: 300px;
height: 150px;
}
.message-finish {
border: 1px solid black;
border-radius: 1.5rem;
width: 50%;
margin: 1.5rem auto;
height: 2.5rem;
width: 300px;
line-height: 2.5rem;
}
.circle-audio {
color: #fff;
border: 1px solid black;
border-radius: 50%;
}
.fa-stack-custom {
cursor: pointer;
margin-left: 1rem;
}
span.audio-gameinfo {
margin-left: 0rem;
margin-bottom: 0.5rem;
}
.audio-finish {
position: relative;
display: flex;
top: 60px;
right: -50px;
align-content: flex-end;
justify-content: flex-end;
}
.game-details-image {
margin-top: 2rem;
border-radius: 15px;
width: 15rem;
height: 15rem;
}
.game-answers-image {
border-radius: 15px;
width: 15rem;
height: 15rem;
margin: 0 !important;
padding: 0 !important;
}
.draggable-game-image {
border-radius: 15px;
margin: 0 1rem 1rem 1rem;
}
#media (max-width: 800px) {
.game-answers-image {
width: 12rem;
height: 12rem;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>home</title>
</head>
<body>
<div id="quiz-container">
<div class="row">
<div id="finish-content">
<div class="game-finish-flex">
<div class="game-finish-upper">
<div class="game-image-wrapper">
<div class="audio-finish">
<span class="fa-stack fa-stack-custom">
<i class="far fa-circle fa-stack-2x circle-audio"></i>
<i class="fa fa-volume-up fa-stack-1x"></i>
</span>
</div>
<img class="game-finish-image" src="https://i.stack.imgur.com/Rkwue.png" alt="test">
</div>
</div>
<div class="message-finish">test</div>
<div class="game-image-wrapper"><img class="game-finish-image-secundar"
src="https://i.stack.imgur.com/4QcJ1.png" alt="test">
</div>
</div>
<button class="btn btn-outline-success next-button">Next</button>
</div>
</div>
</div>
</body>
</html>
This is my code which works - used vehicle platform - HTML with flex, but isn't quite esthetically pleasing:
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.itemwrapper1 img {}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
width: 600px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
margin-left: -450px;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
margin-left: -200px;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Car , Van, Caravan Dealer | Quality Used Cars</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<header class="infog">
header
</header>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
black
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column1'>
2003 TOYOTA RAV4 2.0 GX
</div>
<div class='column1 priceg'>
£8995
</div>
</div>
<div class='row'>
<div class='column img-nac1'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column ncat'>
rowtt
</div>
</div>
</div>
<div class='some-page-wrapper'>
<div class='row'>
<div class='column img-nac'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/2013_Toyota_RAV4_XLE_AWD_front_left.jpg/1280px-2013_Toyota_RAV4_XLE_AWD_front_left.jpg">
</div>
<div class='column at1'>
<h3>2004 TOYOTA RAV4 2.0</h4>
black
</div>
<div class='column priceh'>
<h3>£6000</h4>
</div>
</div>
</div>
<footer class="infog">
footer
</footer>
</body>
</html>
The problem is that I'm trying to make it so that if the image is large it's still alongside the text, like this from my page:
The blue line below is actually a bit of the next image... I didn't screencap well.
I've not figured out how to with the CSS and max-width size to do this, resulting in:
The car description in the second flexbox (column and ncat classes) doesn't show up.
But it works fine with the smaller image; I'm trying to make it big enough for people to see.
This isn't the final version, as I'm adding Roboto font etc. in the CSS, but it's almost working.
I'd much appreciate any advice on how to ensure I can get this to work in flexbox.
Just update your CSS with the following code
body {
font-family: Verdana, sans-serif;
font-size: 16px;
line-height: 18px;
}
header.infog {
background-color: #333;
color: #FFF;
margin-bottom: 25px;
padding: 30px;
}
footer.infog {
background-color: #333;
color: #FFF;
margin-top: 20px;
margin-bottom: 25px;
padding: 10px;
}
.mainwrapper {
border: 2px solid;
display: table;
margin-left: 50px;
width: 900px;
}
.itemwrapper {
display: table-row;
width: 90px;
margin-right: -40px;
}
.itemwrapper1 {
display: table-row;
margin-left: -356em;
width: 100px;
}
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
margin-left: 40px;
color: #333;
margin: 0;
display: flex;
flex-direction: column;
padding: 20px;
}
.column1 {
margin-left: 40px;
background-color: blue;
color: #FFF;
margin: 0;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
padding: 20px;
}
.priceg {
font-size: 29px;
color: red;
padding-left: 500px;
}
.img-nac img {
max-width: 330px;
}
.img-nac1 img {
max-width: 460px;
}
.ncat {
flex-direction: row;
text-align: right 50px;
}
.ncat1 {
flex-direction: row;
text-align: right 50px;
}
.at1 {
white-space: nowrap;
margin-top: -20px;
}
.priceh {
margin-left: 180px;
margin-top: -20px;
}
.mainwrapper {
margin-bottom: 20px;
}
I want my second div to be on the same position with the first one. If text above first blue box is longer, than my second div appears like it off the box line. Changing relative position would not make it better, if the text above blue box would be shorter, than second box appears more below and it looks awful. All values changed dynamically, that why i need not just change position manually.
.char-span {
font-size: 13px !important;
display: block;
margin: 0px !important;
}
.bot-char-all {
margin-top: -10px;
float: left;
min-width: 120px;
}
.bot-char {
padding-top: 5px;
float: left;
}
char {
margin-bottom: 5px;
margin-right: 20px;
width: 200px;
display: inline-block;
}
.char-pre {
margin-top: 5px;
padding: 10px 5px;
border: 2px solid #192E7B;
}
.box-vals {
margin-right: 50px;
float: left;
margin-bottom: 10px;
}
.char, .char-value {
display: inline-block;
width: 100px;
}
.char-pre-val.snow-val {
background: #CFD1AF;
}
.char-pre-val {
margin-top: 5px;
padding: 10px;
color: white;
}
.char-val-span {
margin: 0 auto;
display: table;
font-size: 20px;
position: relative;
top: 2px;
}
<div class='bot-column'>
<div class='bot-char-val'>
<div class='bot-char-all'>
<div class='bot-char'>
<div class='char'><span class='char-span'>Charakteristischer Wert der Schneelast</span>
<div class='char-pre snow'><span id='snowLoad-print' class='char-val-span long'>s<sub>k</sub> = 0.85 kN/m<sup>2</sup></span></div>
</div>
</div>
</div>
<div class='box-vals'>
<div class='char-value'><span class='char-span'>Snow</span>
<div class='char-pre-val snow-val'> <span id='snowLoadZone-print' class='char-val-span'>2*</span> </div>
</div>
</div>
</div>
</div>
This is classic CSS aligment with flex.
Try adding the following to .bot-char-val:
.bot-char-val {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
}
And remove floats and margins from:
.box-vals {
float: none;
margin-bottom: 0;
}
.bot-char-all {
float: none;
}
.char-span {
font-size: 13px !important;
display: block;
margin: 0px !important;
}
.bot-char-all {
margin-top: -10px;
float: left;
min-width: 120px;
}
.bot-char {
padding-top: 5px;
float: left;
}
char {
margin-bottom: 5px;
margin-right: 20px;
width: 200px;
display: inline-block;
}
.char-pre {
margin-top: 5px;
padding: 10px 5px;
border: 2px solid #192E7B;
}
.box-vals {
margin-right: 50px;
float: left;
margin-bottom: 10px;
}
.char, .char-value {
display: inline-block;
width: 100px;
}
.char-pre-val.snow-val {
background: #CFD1AF;
}
.char-pre-val {
margin-top: 5px;
padding: 10px;
color: white;
}
.char-val-span {
margin: 0 auto;
display: table;
font-size: 20px;
position: relative;
top: 2px;
}
.box-vals {
float: none;
margin-bottom: 0;
}
.bot-char-all {
float: none;
}
.bot-char-val {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
}
<div class='bot-column'>
<div class='bot-char-val'>
<div class='bot-char-all'>
<div class='bot-char'>
<div class='char'><span class='char-span'>Charakteristischer Wert der Schneelast</span>
<div class='char-pre snow'><span id='snowLoad-print' class='char-val-span long'>s<sub>k</sub> = 0.85 kN/m<sup>2</sup></span></div>
</div>
</div>
</div>
<div class='box-vals'>
<div class='char-value'><span class='char-span'>Snow</span>
<div class='char-pre-val snow-val'> <span id='snowLoadZone-print' class='char-val-span'>2*</span> </div>
</div>
</div>
</div>
</div>
You can use display flex to parent and align-self: flex-end; to child will solve your problem.
.char-span {
font-size: 13px !important;
display: block;
margin: 0px !important;
}
.bot-char-all {
margin-top: -10px;
float: left;
min-width: 120px;
}
.bot-char {
padding-top: 5px;
float: left;
}
char {
margin-bottom: 5px;
margin-right: 20px;
width: 200px;
display: inline-block;
}
.char-pre {
margin-top: 5px;
padding: 10px 5px;
border: 2px solid #192E7B;
}
.box-vals {
margin-right: 50px;
float: left;
margin-bottom: 10px;
}
.char,
.char-value {
display: inline-block;
width: 100px;
}
.char-pre-val.snow-val {
background: #CFD1AF;
}
.char-pre-val {
margin-top: 5px;
padding: 10px;
color: white;
}
.char-val-span {
margin: 0 auto;
display: table;
font-size: 20px;
position: relative;
top: 2px;
}
.box-vals {
align-self: flex-end;
margin-bottom: 0;
}
.bot-char-all {
align-self: flex-end;
}
.bot-char-val {
display: flex;
flex-flow: row nowrap;
}
<div class='bot-column'>
<div class='bot-char-val'>
<div class='bot-char-all'>
<div class='bot-char'>
<div class='char'><span class='char-span'>Charakteristischer Wert der Schneelast</span>
<div class='char-pre snow'><span id='snowLoad-print' class='char-val-span long'>s<sub>k</sub> = 0.85 kN/m<sup>2</sup></span></div>
</div>
</div>
</div>
<div class='box-vals'>
<div class='char-value'><span class='char-span'>Snow</span>
<div class='char-pre-val snow-val'> <span id='snowLoadZone-print' class='char-val-span'>2*</span> </div>
</div>
</div>
</div>
</div>
Minimal example with flex-box:
.bot-column {
max-width: 220px; /* for demo purposes */
}
.bot-char-val {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
}
.bot-char-all,
.box-vals {
padding: 1em;
width: 50%;
}
.char-pre {
border: 2px solid #192E7B;
padding: 0.2em 1em;
}
.char-pre-val {
background: #CFD1AF;
color: white;
padding: 0.2em 1em;
}
<div class='bot-column'>
<div class='bot-char-val'>
<div class='bot-char-all'>
<div class='bot-char'>
<div class='char'><span class='char-span'>Charakteristischer Wert der Schneelast</span>
<div class='char-pre snow'><span id='snowLoad-print' class='char-val-span long'>s<sub>k</sub> = 0.85 kN/m<sup>2</sup></span></div>
</div>
</div>
</div>
<div class='box-vals'>
<div class='char-value'><span class='char-span'>Snow</span>
<div class='char-pre-val snow-val'> <span id='snowLoadZone-print' class='char-val-span'>2*</span> </div>
</div>
</div>
</div>
</div>
so I'm trying to do a "cast" section for one of my assignments and I want the actor's character to appear when the actor is hovered over. How would I achieve this? When hiding the display of the deadpool div, it leaves a big gap in the page. I want this to not show until Ryan Reynolds is hovered over.
article {
display: flex;
flex-wrap: wrap;
margin: auto;
padding-top: 12px;
padding-bottom: 12px;
background-color: #8b2323;
width: 48vw;
min-height: 200px;
min-width: 391px;
font-family: verdana, sans-serif;
justify-content: center;
}
.castcontainer {
flex-wrap: wrap;
min-width: 215px;
width: 20%;
height: 30%;
overflow: hidden;
padding: 5px;
}
#cast {
border-radius: 50%;
width: 100%;
}
.cast2 {
display: none;
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
.cast:hover+.cast2 {
display: block;
}
.cast {
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
p {
background: white;
}
<article>
<div class="castcontainer">
<div class="cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast">
<p><b>Ryan Reynalds</b></p>
</div>
</div>
<div class="castcontainer">
<div class="cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast">
<p><b>Wade Wilson</b></p>
</div>
</div>
</article>
Let me offer a more radical departure from your current code:
.cast * {
box-sizing: border-box;
}
.cast {
border-radius: 10px;
background: #8b2323;
font-family: Verdana, sans-serif;
text-align: center;
padding: 12px;
}
.cast img {
border-radius: 50%;
max-height: 300px;
}
.cast strong {
background: white;
display: block;
border-radius: 10px;
margin-top: 5px;
}
.cast .actor,
.cast .role {
width: 100%;
}
.cast .actor {
display: block;
z-index: 2;
}
.cast .role {
display: none;
z-index: 1;
}
.cast:hover .actor {
display: none;
}
.cast:hover .role {
display: block;
}
<article class="cast">
<div class="actor">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg">
<strong>Ryan Reynalds</strong>
</div>
<div class="role">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg">
<strong>Wade Wilson</strong>
</div>
</article>
This reduces the number of child elements and (in my opinion) makes selecting which element to show/hide that much easier. You're targeting the :hover event of the parent wrapper and instead of trying to use an ID (which cannot be reused) you're targeting .actor and .role.
One concern would be to make sure that the images for each were the same dimension, otherwise on change you could get some transition that was unappealing if the box had to resize.
Might this be what you're looking to do?
Added:
article:hover .cast {
display: none;
}
article:hover .cast2 {
display: block;
}
article {
display: flex;
flex-wrap: wrap;
margin: auto;
padding-top: 12px;
padding-bottom: 12px;
background-color: #8b2323;
width: 48vw;
min-height: 200px;
min-width: 391px;
font-family: verdana, sans-serif;
justify-content: center;
}
article:hover .cast {
display: none;
}
article:hover .cast2 {
display: block;
}
.castcontainer {
flex-wrap: wrap;
min-width: 215px;
width: 20%;
height: 30%;
overflow: hidden;
padding: 5px;
}
#cast {
border-radius: 50%;
width: 100%;
}
.cast2 {
display: none;
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
.cast:hover+.cast2 {
display: block;
}
.cast {
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
p {
background: white;
}
<article>
<div id="one" class="castcontainer">
<div class="cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast">
<p><b>Ryan Reynalds</b></p>
</div>
</div>
<div id="two"class="castcontainer">
<div class="cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast">
<p><b>Wade Wilson</b></p>
</div>
</div>
</article>
<article>
<div class="castcontainer" id="show1">
<div class="cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" class="castImg" id="CastImgRef">
<p><b>Ryan Reynalds</b></p>
</div>
</div>
<div class="castcontainer" id="show2">
<div class="cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" class="castImg">
<p><b>Wade Wilson</b></p>
</div>
</div>
</article>
jQuery(function ($) {
$('#show1').hover(function () {
$(this).find('img').attr('src', function (i, src) {
return src.replace('https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg', 'http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg')
})
$('#textChange').text('Wade Wilson');
}, function () {
$(this).find('img').attr('src', function (i, src) {
return src.replace('http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg', 'https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg')
})
$('#textChange').text('Ryan Reynalds');
})
})
Add thisjquery and it will work fine
https://jsfiddle.net/dLwxm2ox/8/
article {
display: flex;
flex-wrap: wrap;
margin: auto;
padding-top: 12px;
padding-bottom: 12px;
background-color: #8b2323;
width: 48vw;
min-height: 200px;
min-width: 391px;
font-family: verdana, sans-serif;
justify-content: center;
}
article:hover .cast {
display: none;
}
article:hover .cast2 {
display: block;
}
.castcontainer {
flex-wrap: wrap;
min-width: 215px;
width: 20%;
height: 30%;
overflow: hidden;
padding: 5px;
}
#cast {
border-radius: 50%;
width: 100%;
}
.cast2 {
display: none;
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
.cast:hover+.cast2 {
display: block;
}
.cast {
text-align: center;
background-color: #8b1a1a;
border-radius: 10px;
padding: 10px;
}
p {
background: white;
}
<article>
<div id="one" class="castcontainer cast">
<img src="https://pbs.twimg.com/profile_images/741703039355064320/ClVbjlG-.jpg" id="cast">
<p><b>Ryan Reynalds</b></p>
</div>
<div id="two"class="castcontainer cast2">
<img src="http://cdn03.cdn.justjared.com/wp-content/uploads/headlines/2017/08/joi-harris-rip.jpg" id="cast">
<p><b>Wade Wilson</b></p>
</div>
</article>
The inner div seems to be unnecessary where class="cast" and class="cast2". Remove the div's and add the class to its parent.
so I am doing this project and i've started to run into problems with display properties and elements not positioning as i would want them to. Here's what i have so far: https://codepen.io/benasl/pen/zdMbKQ
* {
box-sizing: border-box;
}
html, body {
margin:0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin:0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: inline-block;
width: 100%;
}
.left {
padding-right: 10px;
width: 50%;
border-right: 1px solid #797977;
display: flex;
float: left;
}
.below {
display: flex;
clear: both;
width: 50%;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
width: 50%;
display: flex;
}
aside {
width: 40%;
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
display: inline-block;
float: left;
margin-right: 15px;
}
section {
display: inline-block;
float: left;
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size:bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background:#868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border:none;
color:#c3c3c2;
cursor: pointer;
transition:all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
<div id="container">
<div class="wrapper">
<div class="left">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about"><p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p></div>
</div>
<div class="right">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on
the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about"><p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p></div>
</div>
</div>
</div>
</div>
Everything was okay before i added the .below class with all its content, what i need is .left to be on the left and .rightto be in the right..
I've tried all sorts of display properties, none of them seem to work.
Note, your markup and CSS can be cleaned up a lot, though I choose not to do that for your.
If you move the .below element's into each .left/.right element, add flex-wrap: wrap to the .left/.right rules, and use calc() for the aside's width (so it take border/margin into account), you'll get a good start of both see how Flexbox works and to restructure your markup.
Updated codepen
Stack snippet
* {
box-sizing: border-box;
}
html, body {
margin:0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin:0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: inline-block;
width: 100%;
}
.left {
padding-right: 10px;
width: 50%;
border-right: 1px solid #797977;
display: flex;
float: left;
flex-wrap: wrap;
}
.below {
display: flex;
clear: both;
width: 100%;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
width: 50%;
display: flex;
flex-wrap: wrap;
}
aside {
width: calc(40% - 18px);
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
margin-right: 15px;
}
section {
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size:bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background:#868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border:none;
color:#c3c3c2;
cursor: pointer;
transition:all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
<div id="container">
<div class="wrapper">
<div class="left">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
<div class="right">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on
the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
</div>
</div>
Add display: flex to the wrapper.
Wrap top left content in a new wrapper (in this case .left-top) to separate it from below.
Separate left and right and add flex-direction: column to stack left-top and below.
*Avoid mixing flex and float
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
background: #282828;
font-family: 'Open Sans', sans-serif;
}
p {
font-size: 12px;
text-align: justify;
color: #aec7d5;
}
#container {
min-width: 320px;
max-width: 782px;
height: auto;
background: #333333;
padding: 5px;
height: 300px;
display: block;
margin: 0 auto;
margin-top: 10%;
}
.wrapper {
padding: 15px 10px;
display: flex;
width: 100%;
}
.left {
padding-right: 10px;
border-right: 1px solid #797977;
display: flex;
}
.below {
display: flex;
padding-right: 10px;
}
.rating {
display: flex;
float: left;
margin-right: 10px;
border-right: 1px dotted #c3c3c2;
}
.about {
display: inline-block;
float: left;
}
.rate {
font-size: 20px;
display: inline-block;
}
.star {
display: inline-block;
height: 30px;
width: 30px;
}
.right {
padding-left: 20px;
display: flex;
}
aside {
width: 40%;
height: 95px;
overflow: hidden;
border: 1.5px solid #bbbbbb;
display: inline-block;
float: left;
margin-right: 15px;
}
section {
display: inline-block;
float: left;
width: 60%;
}
aside img {
height: 100%;
width: auto;
position: relative;
left: -20px;
}
.height {
height: auto;
top: -50px;
}
h1 {
font-family: arial;
font-size: bold;
color: white;
font-size: 18px;
}
.movieTitle {
margin: 0;
text-transform: capitalize;
min-height: 45px;
}
.genre {
text-transform: uppercase;
color: #aec7d5;
font-size: 10px;
font-weight: 300;
margin: 0;
margin-bottom: 10px;
}
.btn {
background: #868684;
padding: 6px 20px 6px 10px;
border-radius: 5px;
border: none;
color: #c3c3c2;
cursor: pointer;
transition: all 0.15s;
}
.btn:hover {
background: #767676;
}
.btn .arrow {
margin-right: 5px;
}
.left,
.right {
flex-direction: column;
}
<div id="container">
<div class="wrapper">
<div class="left">
<div class="left-top">
<aside><img src="orh82o67aDQra74Tlp4-o.jpg"></aside>
<section>
<h1 class="movieTitle">A Bug's life</h1>
<h2 class="genre">Animation, Adventure, Comedy</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
<div class="right">
<div class="right-top">
<aside><img class="height" src="MV5BNTM5OTg2NDY1NF5BMl5BanBnXkFtZTcwNTQ4MTMwNw##._V1_UX182_CR0,0,182,268_AL_.jpg"></aside>
<section>
<h1 class="movieTitle">All Quiet on the Western Front</h1>
<h2 class="genre">Drama, War</h2>
<button class="btn"><img class="arrow" src="Layer%207%20copy.png">more</button>
</section>
</div>
<div class="below">
<div class="rating">
<img class="star" src="star.png">
<h1 class="rate">8.1</h1>
</div>
<div class="about">
<p>A misfit ant, looking for "warriors" to save his colony from greedy grasshoppers, recruits a group of bugs that turn out to be an inept circus troupe.</p>
</div>
</div>
</div>
</div>
</div>