As a beginner in web design, I've made progress but still have questions. Can someone help explain this to me?
Here is how a specific section on my website is set up: https://i.sstatic.net/8ntpR.png
I'm working on splitting the screen with 40% image and 60% text. Everything seems fine, but why is the text showing up at the bottom instead of the top? Did I make a simple mistake?
Below is my HTML code:
<section>
<div class="about">
<div class="about_img"></div>
<div class="about_text">
<h1>Some Text</h1>
<p>Some supporting text</p>
</div>
</section>
And here is the CSS for the section:
.about{
width: 100%;
height: 300px;
background-color: #F0F0F0;
min-height: auto;
display: inline-block;
}
.about_img{
width: 40%;
height: 100%;
background-image: url("/assets/alex-image.JPG");
background-size: cover;
display: inline-block;
}
.about_text{
width: 20%;
display:inline-block;
position: relative;
margin-left: 50px;
}
If you need more information, please ask. You can also view my site at
Thank you,