Kirill Firsov Kirill Firsov - 1 year ago 89
CSS Question

display:inline-block with border?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" xml:lang="ru" lang="ru">
<style type="text/css">
body { margin:0;padding:0;}
<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>

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
because it will require one more block with

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download