html - Doubts related to the use of display: block CSS propery, my example don't work -
i finding problem using display: block.
if open example link can understand problem: http://onofri.org/example/example3/
the html code is:
<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 css code is:
#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{ /* consente di posizionare un elemento al centro del suo contenitore */ 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; /*width: 133px;*/ background-image: url(france2.png); background-repeat: no-repeat; width: 64px; height: 60%; text-align: center; margin-right: 10px; } #reportspn{ float: left; /*width: 133px;*/ background-image: url(spain2.png); background-repeat: no-repeat; height: 60%; width: 64px; text-align: center; } #first{ /*background-color: #8fbc8f;*/ /* sfumatura background: */ background-image: -ms-linear-gradient(top, #35f2ec 0%, #16b7d6 50%, #016d94 100%); background-image: -moz-linear-gradient(top, #35f2ec 0%, #16b7d6 50%, #016d94 100%); background-image: -o-linear-gradient(top, #35f2ec 0%, #16b7d6 50%, #016d94 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #35f2ec), color-stop(0.5, #16b7d6), color-stop(1, #016d94)); background-image: -webkit-linear-gradient(top, #35f2ec 0%, #16b7d6 50%, #016d94 100%); background-image: linear-gradient(to bottom, #35f2ec 0%, #16b7d6 50%, #016d94 100%); width: 200px; min-height: 300px; border-radius: 10px; float: left; /*margin-right: 15px;*/ margin-bottom: 20px; box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37); -moz-box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37); -webkit-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-left: 15px;*/ margin-bottom: 20px; box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37); -moz-box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37); -webkit-box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37); } as can see, under #titlebox div, have container div named #columns contain 2 floated columns #first , #second
now want #reportbox div appears centered under #columns div , not (as now) between 2 columns.
trying optain behavior have try set display:block on #columns div , on #reportbox div don't work.
why? have show #reportbox under #columns div?
tnx
andrea
try
clear: both on #reportbox
reason being floated elements float in relation following elements. putting clear: both on element means want following element appear after of floating elements. has nothing display: block;. div display: block default (unless of course apply float)
Comments
Post a Comment