CODEWITHSUNDEEP
htmlcss
David Rose
David Rose

Reputation: 59

div and form in the same line

it is in the same line but the form has diffrent height... any idea?

Code:

<div id="link-social">
<form class="search" method="post" action="">
    <input id="search-box" type="text">
</form>
<a href="http://instagram.com/" class="instagram"></a>
<a href="http://facebook.com/" class="facebook"></a>
</div>

#link-social {
   background:url(img/wbg.png) repeat;
   width:388px;
   height:56px;
   float:left;
   text-align:left;
   display: inline-block;
}

.search {
    display: inline;
}

.facebook {
background-image: url('img/facebook.png');
width:29px;
height:29px;
display: inline-block;
}

.instagram {
background-image: url('img/instagram.png');
width:29px;
height:29px;
display: inline-block;
}

Upvotes: 2

Views: 1722

Answers (6)

extremeFE
extremeFE

Reputation: 40

Try the following css:

.search {
    top: -10px;
    position: relative;
    display:inline;
}

Upvotes: 0

rabar kareem
rabar kareem

Reputation: 630

Make Your form display: block; because display: inline; its height and width are depending on its content Here is the solution Here is the solution

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can use #link-social *{display: inline-block;} or simply you should change the inline with inline-block in your .search.

The good thing you could display all of your element as table-cell and align it middle.

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

MNAKE THIS

DEMO

.search {
   float:left;
    line-height:29px;

}

Upvotes: 0

artem_golovin
artem_golovin

Reputation: 154

Try to put the icons in the different div tags and use float property on the divs or any column framework like twitter bootstrap or pure (http://purecss.io/)!

Check that fiddle: http://jsfiddle.net/z8ENB/

<div id="field">
<form class="search" method="post" action="">
    <input id="search-box" type="text">
</form>
</div>
<div id="link-social">
<a href="http://instagram.com/" class="instagram"></a>
<a href="http://facebook.com/" class="facebook"></a>
</div>

div {
    margin-right: 5px;
    float:left;
}

Upvotes: 0

Sudip
Sudip

Reputation: 2051

Use reset class for CSS

In this case, use

form {  
margin:0;  
padding:0;  
}

Upvotes: 0

Related Questions