html - only top-border is showing not complete border around container -

html - only top-border is showing not complete border around container -

border not displayed properly.side , bottom ones missing. here shorthand property acting top-border property. if apply height tag container container borders displayed correctly should work on own.

css

.container { border:1px solid black; } .container div { width: 15px; border: 1px solid blue; margin: 1px; }

html

<div style="width: 200px; " class="container"> <div style="float: left;">1</div> <div style="float: left;">2</div> <div style="float: left;">3</div> <div style="float: left;">4</div> <div style="float: right;">5</div> <div style="float: right;">6</div> <div style="float: right;">7</div> <div style="float: right;">8</div> </div>

update container class below.

.container { border:1px solid black; display:table; }

fiddle demo

html css layout border