Menu
<!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;.
386
The borders are placed as they are because the border edge of inline elements is controlled by the font-size, not the line-height. In other words, if a SPAN element has a font-size of 12pt and a line-height of 36pt, its content area is 12pt high, and the content area is what will be surrounded with the border.
The border-inline-style property is an inbuilt property in CSS which is used to set the individual logical block inline-border-style property values in a single place in the style sheet. It sets the inline border-style top(left), and bottom(right) of the defining border element.
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.
overflow: hiddenoverflow: hiddenIf 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.
170
If you want to use 2 elements in line (1000px total for 300+700px) - just set font-size:0 for container. This is very logical in this case and now you can use all benefits from inline-blocks, like align:justify!
21
You can only give display:inline-block to elements that are naturally inline (e.g. span, a) Otherwise your element won't render correctly in older browsers (e.g. IE7-)
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
