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
Post a Comment