CODEWITHSUNDEEP
htmlcss
Pooya
Pooya

Reputation: 1558

what is the issue with elements align

I'm trying to make a search box like this:

enter image description here

as you see I cant set them align at all.

the real problem is, I cant set align in all browser. for example: I have to put 2px top in chrome and 3px top in ff

how can I do that:

here is jfiddle

css:

.home_kadr { padding:10px; text-align:center;}
.home_search {
    font-size:16px!important;
    font-family:Arial!important;
    font-style:italic!important;
    padding:14px!important;
    border:1px solid #d6bf99!important;
    border-radius:2px!important;
    margin:0px!important;
    /*border-right:none!important;*/
    border-top-right-radius:0px!important;
    border-bottom-right-radius:0px!important;
}
.home_btn {
    width:115px; height:42px;
    background:url(../images/home_search.png);
    display:inline-block;
    font-family:'b koodak';
    font-size:20px;
    padding:8px 8px 0px 8px;
    color:#FFF;
    text-align:center;
    border:none;
}

html:

    <div class="home_kadr">
        <div class="home_btn">جستجو</div><input type="text" name="fld_domainName" id="fld_domainName" class="wd-300 en home_search" />
    </div>

Upvotes: 1

Views: 58

Answers (3)

Prakash GPz
Prakash GPz

Reputation: 1523

make the following changes to the css:

.home_search {
  float: right;
}

.home_btn {
  /* display: inline-block; */
  float: right;
}

finally add the following element as last child of <div class="home_kadr">:

<div style="clear: both; "></div>

Upvotes: 0

Vaibhav Jain
Vaibhav Jain

Reputation: 3755

See here is the updated Link to jsfiddle.

This may be solve your problem for every browser.

Changes are:

 .home_kadr{
 display:inline-block;
 }

 .home_search {
 float:left;
 }

Upvotes: 1

drip
drip

Reputation: 12943

Float the text field and the submit button in order to align them.

Upvotes: 1

Related Questions