Miguel Migou Miguel Migou - 3 months ago 10
CSS Question

Two divs of 50%

I'm doing a HTML newsletter and i want two divs who take 50% of the page, one on the left and one on the right.

But the problem is that I tried with floats and tabs but no one is doing the job.

Do you have propostitions? Thank's <3

There'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 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>

Answer

Try this DEMO

Change the CSS:

#yellow {
        height: 100%;
        background-color: rgb(214, 196, 0);
        order: 2;
        width: 100%;
    }

    #yellowL {
        float: left;
        width: 50%;
        margin: auto;
        order: 1;
    }

    #yellowR {
        position: relative;
        float: right;
        width: 50%;
        margin: auto;
        order: 2;
    }
Comments