I encountered an issue while using display: block.
To better understand the problem I'm facing, please check out this example link:
Take a look at the HTML code below:
<div id="container">
<div id="titleBox">
<p id="myTitle">Promoting Investment in Agriculture</p>
</div>
<div id="columns">
<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>
<div id="reportBox">
<p>REPORT</p>
<div id="flagsContainer">
<div id="reportEng"></div>
<div id="reportFrn"></div>
<div id="reportSpn"></div>
</div>
</div>
</div>
And here's the corresponding CSS code:
#titleBox{
margin: 0 auto;
width: 350px;
background-color: #6da662;
height: 40px;
position:relative;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.28);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.28);
}
#myTitle{
/* centers an element within its container */
margin: 0 auto;
overflow: hidden;
color: #fff;
font-size: 16.5px;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
}
#columns{
display: block;
}
#reportBox{
margin: 0 auto;
margin-top: 25px;
width: 350px;
height: 150px;
background-color: #EFEFEF;
border: 1px solid #DFDFDF;
font-family: Verdana;
display: block;
}
#reportBox p{
text-align: center;
font-size: 12px;
font-weight: bold;
color: #004673;
padding-top: 5%;
}
#flagsContainer{
width: 222px;
height: 200px;
min-height: 200px;
margin: 0 auto;
}
#reportEng{
float: left;
width: 64px;
background-image: url(United-Kingdom2.png);
background-repeat: no-repeat;
margin-right: 10px;
height: 60%;
text-align: center;
}
#reportFrn{
float: left;
background-image: url(France2.png);
background-repeat: no-repeat;
width: 64px;
height: 60%;
text-align: center;
margin-right: 10px;
}
#reportSpn{
float: left;
background-image: url(Spain2.png);
background-repeat: no-repeat;
height: 60%;
width: 64px;
text-align: center;
}
#first{
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);
}
Below the #titleBox div, there is a container div called #columns containing two floated columns #first and #second.
My goal is to have the #reportBox div centered UNDER the #columns div instead of between the two columns.
Despite setting display:block on the #columns div and the #reportBox div, I haven't achieved the desired outcome. Any suggestions on how to display the #reportBox under the #columns div?
Thank you,
Andrea