Working on an HTML newsletter and looking to create two divs that each take up 50% of the page, one on the left and one on the right.
Struggling with floats and tabs, none seem to be doing the trick. Any suggestions?
Appreciate any help! Thank you <3
Here's my code :)
#yellow {
height: 100%;
display: flex;
flex-direction: column;
background-color: rgb(214, 196, 0);
order: 2;
width: 100%;
}
#yellowL {
position: relative;
float: left;
width: 50%;
margin: auto;
order: 1;
}
#yellowR {
position: relative;
float: right;
width: 50%;
margin: auto;
order: 2;
}
and here's my HTML :)
<body id="NewsletterPRONA">
<div id="news">
<h1>News</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum, urna nec vulputate molestie, neque leo ultricies mi, ut dignissim magna magna vitae ex. Nunc eu massa purus. Vivamus velit lacus, vulputate a neque ut, faucibus tincidunt elit. Sed volutpat, nunc quis vulputate sagittis, ipsum metus elementum enim, sed ornare velit elit ac nibh.</p>
</div>
<div id="yellow">
<h1 id="h1v2">Geschäftsverlauf / Déroulement des affaires</h1>
<div id="yellowL">
<h1 id="h1v2">Offerten</h1>
<p>
</p>
<h1 id="h1v2">Projekte</h1>
<p>
</p>
</div>
<div id="yellowR">
<h1 id="h1v2">Offres</h1>
<h2>Bruit</h2>
<p>
</p>
<h2>Sols</h2>
<p>
</p>
<h2>Déchets</h2>
<p>
</p>
<h2>EIE</h2>
<p>
</p>
<h2>Physique et acoustique du bâtiment</h2>
<p>
</p>
<h1 id="h1v2">Projets</h1>
<h2>Bruit</h2>
<p>
</p>
</div>
</div>