Margin and positioning of input elements

Question

I want to partition a block into two separate smaller blocks. For that, I am using the following HTML:

<div style="width: 300px; height: 200px; background-color: red; ">
    <div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
    </div>
    <div style="display: inline-block; width: 196px; height: 200px; background-color: green;">
    </div>
</div>

Result:

Preview #1

Here's the first problem: As you can see, there is still some of the (red) background visible between the two boxes (grey & green). I don't know how to get rid of that space - both div elements already have a margin, border and padding of 0. When I increase the width of the green div element to 200px (as it should be), the element jumps out of its parent since it grew too large.

Is there any default padding, or a rule that browsers must add some space between simple elements? If so, how can I get rid of it?

The second issue arises when I add a input tag to the green div:

<div style="width: 300px; height: 200px; background-color: red; ">
    <div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
    </div>
    <div style="display: inline-block; width: 196px; height: 200px; background-color: green;">
        <input type='submit' value='Details'/> <!-- new -->
    </div>
</div>

Now, for some reason, the green div is forced down again:

Preview #2

The input element (and the containing div by extension) is moved down to the bottom of the red div. I found out I can stop that by using position: absolute but I'm confused as to why it behaves like this at all. It seems like there's something more subtle going wrong, but I don't know what.

Thanks for your help.

http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — CBroe, May 10 '14 at 17:32

score 2 · Accepted Answer · answered May 10 '14 at 17:32

2

enter image description here

Instead of display:inline-block use float

<div style="width: 300px; height: 200px; background-color: red; ">
    <div style="float: left; width: 100px; height: 200px; background-color: lightblue;">
    </div>
    <div style="float: right; width: 200px; height: 200px; background-color: green;">
        <input type='submit' value='Details'/> <!-- new -->
    </div>
</div>

DEMO

answered May 10 '14 at 17:32

mohamedrias

18,326
2
38
47

That works, thanks. Do you know *why* the input element messes up the formatting when I use `inline-block`? – s3rius May 10 '14 at 17:37

score 0 · Answer 2 · answered May 10 '14 at 17:35

<div style="width: 300px; height: 200px; background-color: red; ">
    <div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
    </div>
    <div style="display: inline-block;position:fixed; width: 200px; height: 200px; background-color: green;">
          <input type='submit' value='Details'/>
    </div>
</div>

Demo: http://jsfiddle.net/hsakapandit/c6AUF/

Margin and positioning of input elements

2 Answers2