I need help with positioning two colored box elements within a container using CSS.
You can see my test page here:
The code for the content in the center area of the website is as follows:
HTML/CSS code:
#header2 {
background-color: #DEB887;
}
#container {
/* allows positioning an element at the center of its container */
margin: 0 auto;
overflow: hidden;
width: 100%;
}
#first {
/*background-color: #8FBC8F;*/
/* BACKGROUND GRADIENT: */
background-image: linear-gradient(to bottom, #35F2EC 0%, #16B7D6 50%, #016D94 100%);
width: 200px;
min-height: 300px;
border-radius: 10px;
float: left;
margin-bottom: 20px;
box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
}
#second {
background-color: #8FBC8F;
width: 200px;
min-height: 300px;
border-radius: 10px;
float: right;
margin-bottom: 20px;
box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
}<div id="container">
<div id="header2">
<p>TITLE</p>
</div>
<div id="first">
<p>BLA BLA BLA</p>
<p>BLA BLA BLA</p>
<p>BLA BLA BLA</p>
</div>
<div id="second">
<p>BLA BLA BLA</p>
<p>BLA BLA BLA</p>
<p>BLA BLA BLA</p>
</div>
</div>The #container div contains an external #header2 and two columns created by first and second divs.
I want the first column to be on the left side of the #container, while the second column should be on the right side of the #container.
To achieve this, I have used the float: left property for the #first column and float: right property for the #second column.
Is this a good solution or could it create potential issues?
Thanks,
Andrea