Issue
I'm facing an issue with CSS flexbox alignment in the main body section. The goal is to position two paragraphs (textp1 and textp2) side by side within the content div.
Despite my efforts, the paragraphs aren't aligning correctly, and the negative margin applied to textp1 is causing inconsistency. I've attached the relevant snippets of my CSS code below and here is a example: enter image description here
<div class="main-body-cont">
<div class="content">
<h6>EXISTING SINCE 26. FEBRUARY 2023</h6>
<h2>Just The Beginning</h2>
<div class="textp1 text-p">
<p>Welcome to vTMA - Trans Maldivian Airlines Virtual, a community where the thrill of aviation blends seamlessly with the freedom of virtual flight! More than a virtual airline, we're a vibrant collective of aviation enthusiasts, inspired by the real-world practices of Trans Maldivian Airways.
<p></p>
At vTMA, embark on a journey through meticulously recreated routes and schedules within the Microsoft Flight Simulator platform. Whether you're a seasoned pilot or just starting your aviation adventure, vTMA offers a supportive environment for all levels of expertise.</p>
</div>
<div class="textp2 text-p">
<p>Our commitment to authenticity shines through advanced flight planning tools, detailed route simulations, and a community that fosters camaraderie and shared passion for aviation. As a vTMA pilot, you'll have access to a spectrum of resources, tutorials, and engaging events designed to elevate your skills and deepen your love for virtual flying.
<p></p>
Join us at vTMA, where the skies are limitless, and the joy of aviation knows no bounds. Become a part of our community, share your passion, and experience the exhilaration of virtual flight with vTMA!</p>
</div>
</div>
<div class="img-right">
<img src="/Img/ABP1.png" class="ABP1">
</div>
</div>
.main-body-cont {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 105px;
}
.ABP1 {
width: 650px;
height: auto;
}
.content {
max-width: 150px;
margin-left: 15%;
margin-top: 3%;
}
.textp1 {
margin-left: -150px;
}
.textp2 {
max-width: 150px;
margin-left: 30px;
}
.content h2 {
font-weight: bold;
font-size: 50px;
white-space: nowrap;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 0;
}
.content h6 {
margin-left: 50px;
font-size: 18px;
white-space: nowrap;
letter-spacing: 6px;
color: #ed1c24;
}
.text-p {
font-size: 19px;
color: #868e96;
}
Solution
It's pretty simple, just put your items in a parent element/container and use justify-content
and align-items
:
HTML:
<div class="parent-element">
<div class="textp1 text-p">
<!-- Content here -->
</div>
<div class="textp2 text-p">
<!-- Content here -->
</div>
</div>
CSS:
.parent-element {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
flex-direction: row
makes the elements flow from left -> right, in line. justify-content: flex-start
will start the items at the top-left
of the flex box (parent). align-items: center
will align the items inside of parent-element
horizontally. Alternatively, you can use: gap: 1rem
(<-- replace your desired gap where 1rem
is) to make sure the items have a gap between them. gap
does not interfere with padding or margin unless you have a max-height
and/or max-width
of the parent-element
set preventing the parent-element
from expanding its size to leave a gap in between the child elements.
CSS flex is an amazing tool. You can seriously create entire websites using 99% CSS flex and completely get rid of block
, inline-block
, and inline
display elements (with a few exceptions; elements that use: text-overflow: ellipsis
I believe require display: block
, for example)
Answered By - quietWind01
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.