CODEWITHSUNDEEP
htmlcsscss-float
pentanol
pentanol

Reputation: 419

Form labels outside of form borders after floting it right

I've tried to float a form right inside a div container. The form contains two inputs: a label and a button. After that I noticed that the two labels outside under the borders of the form; not inside of it. How to solve this problem? The code is as follows: html

<div class="container">
        <a href="index.php"><img id="brand" alt="brand" src="img/brand1.png"></a>
        <form id="search-form" class="ccc">
            <input id="search-field"  name="s" placeholder="Find apartments (enter city, zip, state or country)" class="search-form_it" type="text"></input>
            <input id="search-button" type="submit" value=""><i class="fa fa-search"></i></input>
        </form>
</div>

css

#search-field{
border: medium none;
margin-top:25px;
margin-right:25px;
background-color: transparent;
max-width:350px;
width:100%;
height: 50px;
box-shadow: none;
font-size: 12px;
color: #F04122;
padding: 6px 10px !important;
box-sizing: border-box;
}
#search-button{
position:absolute;
display:block;
right: 50px;    
border: medium none;
background-color: transparent;
}
#search-form{
position:relative;
display:block;
max-width: 500px;
width: 100%;
height:30px;
display:inline;
padding:6px;
border-radius:0px;
border: 2px solid white;
float:right;}

The result is like this

enter image description here

Upvotes: 0

Views: 374

Answers (1)

Shadow
Shadow

Reputation: 4016

The issue is with your absolute positioning and with your margins. Removing them from the css of your #search-button and #search-field corrects the issue:

#search-field{
    border: medium none;
    background-color: transparent;
    max-width:350px;
    width:100%;
    height: 30px;
    box-shadow: none;
    font-size: 12px;
    color: #F04122;
    padding: 6px 10px !important
    box-sizing: border-box;
}
#search-button{
    display:block;
    float: right;
    height:30px;
    border: medium none;
}

Tested on jsfiddle and looks fine for me, link is: https://jsfiddle.net/5L0kpgpL/

Upvotes: 1

Related Questions