Make two divs appear aside each other fails even when it shouldn't

Question

I'm trying to make two div's appear aside each other, but it just isn't working.

I'm trying to create a search bar and button that look joined together. I'm almost there, except that my button appears below, and not inline with the div.

Shouldn't this work? Where am I going wrong, and how do I get this right?

<!DOCTYPE html>
<html>
 <head>
  <title>Search Bar</title>
<style>

input {
    border: none;
    height: 18px;
    outline: none;
    padding: 5px;
}

button {
    border: 1px solid rgba(0, 39, 59, 0.2);
    margin: 0;
    height: 28px;
    padding: 0;
    width:100px;
}

.outer {
    width: 500px;
    border: 1px solid #ccc;
    padding: 10px;
}

.inner {
    width: 395px;
    border: 1px solid #ccc;
    border-right:none;
}

.button {
    display: inline-block;
    float: right;
}

</style>

</head>

<body>

<div class="outer">
    <div class="inner"><input type="text"></div>
    <div class="button"><button>Search</button></div>
</div>

</body>
</html>

enter image description here

score 1 · Accepted Answer · answered May 15 '14 at 05:20

1

change css as

.inner {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #CCCCCC -moz-use-text-color #CCCCCC #CCCCCC;
    border-image: none;
    border-style: solid none solid solid;
    border-width: 1px medium 1px 1px;
    display: inline-block;
    float: left;
    width: 395px;
}
input {
    border: medium none;
    height: 18px;
    outline: medium none;
    padding: 5px;
    width: 380px;
}
.button {
    display: inline-block;
    overflow: hidden;
}

button {
    border: 1px solid rgba(0, 39, 59, 0.2);
    height: 28px;
    margin: 0;
    padding: 0;
    width: 100px;
}

Hope this will work fine for you....

answered May 15 '14 at 05:20

saikiran.vsk

1,788
1
10
11

This works good across all browsers, except when I add the .outer container, the space below isn't equal to the space top, left and right. Know what might me causing this and how to fix it? – jmenezes May 15 '14 at 05:39
for outer class .outer { border: 1px solid #CCCCCC; padding: 10px; width: 500px; } Is it not working. write what you are using... – saikiran.vsk May 15 '14 at 06:04
Please see the image I uploaded. I'm using you same code, except with changes to the colors. See the bottom, it has extra padding. – jmenezes May 15 '14 at 07:40
Add display: -moz-box; for Firefox browser. I'm searching for other browsers... And decrease the padding to 4px – saikiran.vsk May 15 '14 at 09:48

score 0 · Answer 2 · answered May 15 '14 at 05:09

0

add

display:inline-block;

to .inner

http://jsfiddle.net/MrdHc/

answered May 15 '14 at 05:09

cjmling

6,896
10
43
79

score 0 · Answer 3 · edited May 23 '17 at 11:57

fiddle: http://jsfiddle.net/Varinder/CD3kS/

setting display:inline-block will get you there.

now there are a few interesting things with elements that are inline-block

they get default letter spacing around them which is normally 4px

they need a display:inline;zoom:1; hack to work in ie7

updated css bits:

.outer {
    ...
    vertical-align:middle;
}

.inner {
    ...
    display:inline-block;
    *display:inline;
    *zoom:1;
}

.button {
    display: inline-block;
    *display:inline;
    *zoom:1;
    /*float: right*/
    margin-left:-4px;
}

.button button { height:30px; }

Make two divs appear aside each other fails even when it shouldn't

3 Answers3