I’m trying to design this webpage for this class I’m taking but having some trouble. I’ve only ever posted code to this site, but I’m going to try and include screenshots this time so if it doesn’t post the pictures I apologize it’s my first time.
So, essentially what I had to do was make a wireframe and then code it. I’m trying to float an aside element next to another element. I’m pretty new to HTML so what I tried to do was wrap the aside element in a section element and then float the aside element so that they would be in the same parent container, but even when I did that it would float the aside below where I want it.
Is there anyway to get the aside element to float like it is in [1]?
Not how I have it in [2].
Here’s what I have so far:
<!Doctype html>
<html>
<header>
<title>Homepage</title>
<h1>Pennsylvania</h1>
<style>
* {box-sizing: border-box}
body {font-family: sans-serif}
.mySlides {display: none}
img {vertical-align: middle;}
h1 {
text-align: center;
font-weight: bold;
font-size: 100px;
text-decoration: dashed;
text-shadow: white;
background-color: black;
color: #ffffff;
padding: 0px;
}
.links {
text-align: center;
border: -50px;
}
nav a{
padding: 20px;
width: 100%;
justify-content: space-between;
}
.background_info {
width: 60%;
border: solid 5px black
margin: 10px;
padding: 50px;
text-align: left;
}
.background_info h2 {
text-align: center;
font-weight: bold;
text-decoration: underline;
}
section .background_info{
width: 60%;
background-color: green;
}
.quick_facts {
width: 40%;
float: right;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
padding: 30px 0px 0px 0px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
background-color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: white;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 20%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</header>
<body>
<nav class="links">
<a href="./harrisburg.html">Harrisburg</a>
<a href="./pittsburgh.html">Pittsburgh</a>
<a href="./philadelphia.html">Philadelphia</a>
</nav>
<section>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="https://travel2next.com/wp-content/uploads/pennsylvania-map.jpg" alt="Map image of Pennsylvania" name="Pennsylvania_image" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://www.redfin.com/blog/wp-content/uploads/2023/12/GettyImages-172989468.webp" alt="Pennsylvania landscape" name="Pennsylvania_landscape" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Pennsylvania.svg" alt="Pennsylvania flag" name="Pennsylvania_flag" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div class="background_info">
<h2>About</h2>
<p>Pennsylvania was one of the United State's original 13 colonies, founded in 1681.
The state was named after William Penn, an influential quaker at the time of their settlement in America.
The capitol of pennsylvania is Harrisburg. With an area of just over 46,000 square miles,
Pennsylvania boasts a great multitude of animals, foliage, and waterways. The state animal of Pennsylvania
is a white tail deer, the state tree is an eastern hemlock, and the state flower is a mountain laurel. Pennsylvania
is home to a number of nationally recognized schools such as Penn State University and the University of Pennsylvania.</p>
</div>
</section>
<aside>
<div class="quick_facts">
<h3>Did you know?</h3>
<p>Pennsylvania's nickname as "The keystone state" is because it connects the Northeastern and
Southern United States, and the Atlantic seaboard and Midwest</p>
</div>
</aside>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
[1]: https://i.sstatic.net/md7ePRYD.png
[2]: https://i.sstatic.net/AJwIXpx8.png
6
It appears you are after something like this:
<html>
<style>
.background_info {
width: 100%;
background-color: green;
padding: 50px; /* padding inside the green box */
box-sizing: border-box;
}
.quick_facts {
width: 40%; /* relative width of the white box */
background-color: white;
padding: 10px;
float: right; /* floats to the right, allowing text to wrap */
margin: 0 0 20px 20px; /* margin between text and the white box */
}
</style>
<body>
<section>
<div class="background_info">
<aside>
<div class="quick_facts">
<h3>Did you know?</h3>
<p>Pennsylvania's nickname as "The keystone state" is because it connects the Northeastern and
Southern United States, and the Atlantic seaboard and Midwest.</p>
</div>
</aside>
<h2>About</h2>
<p>Pennsylvania was one of the United State's original 13 colonies, founded in 1681.
The state was named after William Penn, an influential quaker at the time of their settlement in America.
The capitol of pennsylvania is Harrisburg. With an area of just over 46,000 square miles,
Pennsylvania boasts a great multitude of animals, foliage, and waterways. The state animal of Pennsylvania
is a white tail deer, the state tree is an eastern hemlock, and the state flower is a mountain laurel. Pennsylvania
is home to a number of nationally recognized schools such as Penn State University and the University of Pennsylvania.</p>
<p>Another interesting fact is that Pennsylvania is one of the most historically significant states in the U.S.,
home to the Liberty Bell and Independence Hall.</p>
</div>
</section>
</body>
</html>
Which looks like this (depending on browser width):
Note that the order matters, you want the aside div before the rest of the content, so that it’s rendered at the top.