CODEWITHSUNDEEP
htmlcss
The Bear
The Bear

Reputation: 51

input element overflowing outside of div

I want to position an input element inside a div , but for some reason the input element is overflowing the div. What is the issue?

http://jsfiddle.net/aklintsevich/p1o584wg/

#third {
  background-color: #22AFA0;
}

#contact {
  background-color: blue;
  margin: 0px auto 30px auto;
  position: relative;
  top: 30%;
  width: 65%;
  height: 30%;
  background-color: red;
}

.email_info {
  height: 40%;
  width: 45%;
  position: absolute;
  background-color: green;
}

.message {
  position: absolute;
  right: 0px;
  height: 100%;
  width: 45%;
  background-color: green;
}

#message_icon {
  height: 40%;
  width: 20%;
  background-color: blue;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

#message_icon:before {
  color: white;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 80px;
  font-size: 2.5em;
  content: "\e610";
}

.text_position {
  float: right;
  position: absolute;
}

.top {
  top: 0px;
}

.bottom {
  bottom: 0px;
}

#form_button {
  position: relative;
  width: 65%;
  height: 20%;
  /*background-color:orange;*/
}

.icon {
  width: 20%;
  height: 100%;
  background-color: blue;
  border-right: 1px solid white;
}

.icomoon {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.white_border {
  border: 2px solid white;
}

.center_text {
  text-align: center;
}

#name_font:before {
  font-size: 2.5em;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 80px;
  color: white;
  content: "\e611";
}

#email_font:before {
  font-size: 2.5em;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 80px;
  color: white;
  content: "\e60f";
}
<section class="full" id="third">
  <div id="contact">
    <form action="#" method="post" id="form">
      <div class="email_info top white_border icomoon">
        <div id="name_font" class="icon center_text">
        </div>
        <div>
          <input type="text" name="firstname">
        </div>
      </div>
      <div class="email_info bottom white_border icomoon">
        <div id="email_font" class="icon center_text">
        </div>
        <div>
          <input type="text" name="firstname">
        </div>
      </div>
    </form>
  </div>
</section>

Upvotes: 2

Views: 2451

Answers (3)

Shakhawat hosen
Shakhawat hosen

Reputation: 1

input { box-sizing: border-box; }

Upvotes: -2

The Bear
The Bear

Reputation: 51

Divs have a default display of block,therefore, to have two divs to be able to line up on the same line you have to declare them as inline-block.

.email_info{
    display:inline-block;
}

Upvotes: 0

Gayan Charith
Gayan Charith

Reputation: 7501

set the attribute 'overflow' to 'auto' in relevant div s. as an example,

.email_info{    
    overflow : auto;
}

Upvotes: 1

Related Questions