I tried putting a fontawesome fullscreen icon on the bottom of this iframe, but the div it’s in (background made green for your convenience) is halfway below the parent div. Here’s the code:
HTML:
<html>
<head>
<title>funnies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/204c1cf7c6.js" crossorigin="anonymous"></script>
</head>
<body>
<iframe id="game-frame" scrolling="no" frameborder="0" width="75%" height="80%" cellspacing="0" src="https://example.com"></iframe>
<div id="game-options">
<b><p class="logo-options">Skool</p></b>
<div class="icons-options">
<i class="fa-solid fa-expand" style="color: #ffffff;"></i>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
body, html {
height: 100%;
width: 100%;
font-family: Arial;
}
p{
margin: 0;
}
#game-frame{
margin: 0 auto;
display: block;
border-top: 0.5vw solid black;
border-left: 0.5vw solid black;
border-right: 0.5vw solid black;
border-radius: 1vw 1vw 0px 0px;
}
#game-options{
max-width: 75%;
margin: 0 auto;
border: 0.5vw solid black;
display: block;
border-radius: 0px 0px 1vw 1vw;
color: #ffffff;
background-color: #000000;
}
.logo-options{
padding-left: 15px;
}
.icons-options{
padding-right: 15px;
margin: 0;
display: inline-block;
float: right;
background-color: #00FF00;
}
What’s wrong? I’m a beginner CSS dev, so (please) don’t downvote. Thanks for any help!
>Solution :
If you want the two elements to be on the same line, then you should set both to have display: inline-block.
#game-options > b {
display: inline-block;
}
However, you might want to consider using flexbox instead. In this case, you can remove the display and float properties, then add the following:
#game-options{
/ * other properties */
display: flex;
justify-content: space-between;
}