html - Horozontal distribution/alignment -


in jsfiddle http://jsfiddle.net/byronyasgur/kugba/3/ trying red on right match yellow, confused why inside box needs 338px wide, or figure related to. if make less third box pops down next row.

there 4 boxes represent fact there number of boxes in design.

html

<div id="outer">     <div id="container" >         <div class="content">content</div>         <div class="content">content</div>         <div class="content">content</div>         <div class="content">content</div>     </div> </div> 

css

#outer{     width:330px;     margin: 0 auto;     padding: 0;     background: yellow;  }  #container{     /* background: orange; */     padding: 0;     margin-left: -5px;     margin-right: -5px;       width:338px; } .content {     width: 100px;     background: red;     margin: 5px;     display: inline-block;     height: 40px; } 

it's standard behavior of inline elements. when there no more space left, on new line. text inside div, if doesn't fit in 1 line, goes on next one...


Comments

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -