CSS issues with float and parent child relationship for borders -

i new css , not understand why having following issues border , float.

issue 1. left float work if have .main div {float: left;}, not if have .main or div.main?

issue 2. parents div's border being apllied child divs, not sure why?

 .main div {float:left; padding:10px; border: 1px solid #000;}   <div class="main">     <div> option1</div>     <div> option2</div>   </div> 

1. you should consider using display:inline-block; instead of float:left - there no reason use floats imo.

2. if want select 1 level down in markup, use : .main > div

also --> issue 1. left float work if have .main div {float: left;}, not if have .main or div.main?

you mentioning 3 different selectors:

• .main div = divs descendants of elements class main
• .main = elements class main
• div.main = divs have class main
• .main > div = divs children of elements class main

i think you're trying 1 of following:

.main{display:inline-block;border:1px solid #000;} .main > div{display:inline-block;padding:10px;} 

or:

.main > div{border:1px solid #000;display:inline-block;margin:0 10px;padding:10px;}