Kirill Firsov Kirill Firsov - 8 days ago 6
CSS Question

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, but currently the second block is pushed down..
If I change the width of second block to 296px then it works..

I don't want to use
float:left
because it will require one more block with
clear:both;
.

Answer

This is what you have at the moment, but reduced in size:

I don't want to use float:left because it requires one more block with "clear:both;".

With float: left, you can clear/contain the floats without adding an element with clear: both. You can do this by adding overflow: hidden (or clearfix) on the parent element.

If you want to stick with display: inline-block..

The first thing you need to do is remove the whitespace between the two divs.

If you want to add a border, you can add wrapper elements and add the borders to that.

Or, you can use box-sizing: border-box as shown here.