html - How can I get data inside a DIV to appear below other DIVs -

i have following html:

<div>    <div class="float-left gutter-right">       xx    </div>    <div class="float-left gutter-right">       yy    </div> </div> <div> zz </div> 

i have xx , yy appear next each other , zz appear below. not happening.

how can make zz appears below?

approach 1

use float: left + clear: both.

html:

<div>     <div class="float-left gutter-right">xx</div>     <div class="float-left gutter-right">yy</div> </div> <div class="clear">zz</div> 

css:

div.float-left { float: left; } div.clear { clear: both; } 

explanation:

i used class float-left of first 2 divs may come in 1 line. add class of .clear last div bring in seprate line have no object floating neither left or right of it.

demonstration 1.

---

approach 2

use display: inline.

html:

<div>     <div class="float-left gutter-right inline">xx</div>     <div class="float-left gutter-right inline">yy</div> </div> <div class="clear">zz</div> 

css:

div.inline { display: inline; } 

explanation:

i have added class .inline first 2 divs , applied style display: inline class , 2 first div displayed inline , don't need clear:both last div.

demonstration 2.