html - display:inline-block with border? -


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">      <head>          <style type="text/css">          body { margin:0;padding:0;}          </style>      </head>       <body>      <div>          <div style="width:1000px;margin:0 auto;">              <div style="width:700px;display:inline-block;">1</div>              <div style="width:300px;display:inline-block;">2</div>          </div>      </div>      </body>      </html>

i want these blocks flush, second block pushed down.. if change width of second block 296px works..

i don't want use float:left because require 1 more block clear:both;.

this have @ moment, reduced in size:

i don't want use float:left because requires 1 more block "clear:both;".

with float: left, can clear/contain floats without adding element clear: both. can adding overflow: hidden (or clearfix) on parent element.

if want stick display: inline-block..

the first thing need remove whitespace between 2 divs.

if want add border, can add wrapper elements , add borders that.

or, can use box-sizing: border-box shown here.


Comments

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

java - Output of Eclipse is rubbish -

jquery - Confused with JSON data and normal data in Django ajax request -