CODEWITHSUNDEEP
htmlcssformswidth
user1694077
user1694077

Reputation:

Why won't these form elements with width 50% display on one line?

I have two form elements (a text input and a submit button), that I want to display on one line, both with a width of 50%. This doesn't work with the following HTML/CSS:

HTML

  <form name="newsletter" target="#" method="post" class="group">
    <input name="email" type="text" placeholder="email here..." />
    <input name="submit" type="submit" class="button" value="subscribe" />
  </form>

CSS

* {
    box-sizing:border-box;
}

input[type="text"] {
    margin: 0;
    width: 50%;
    font-size: 0.75rem; /* 16x0.75=12px */
    padding: 0.625em;
    border: 1px solid black;
    border-radius: 0.3125em 0.3125em 0.3125em 0.3125em;
}

input[type="submit"] {
    margin: 0;
    width: 50%;
    font-size: 0.75rem; /* 16x0.75=12px */
    padding: 0.625em;
    border: none;
    border-radius: 0.3125em 0.3125em 0.3125em 0.3125em;
    text-transform: uppercase;
}

Setting them to display:block or inline-block doesn't help either. But when I set them both to width:50%, and float:left and float:right they stay on one line without a problem.

Why is that?

Upvotes: 1

Views: 2060

Answers (3)

Ali Seyfollahi
Ali Seyfollahi

Reputation: 2902

Try this style:

input{float:left}

Upvotes: 1

cimmanon
cimmanon

Reputation: 68339

You have whitespace (newlines, tabs, etc.) between your elements. Remove it (or comment it out), and they fit as you would expect:

http://tinker.io/9a125

  <form name="newsletter" target="#" method="post" class="group">
    <input name="email" type="text" placeholder="email here..." /><!--
    --><input name="submit" type="submit" class="button" value="subscribe" />
  </form>

Inline* elements honor whitespace between them. The reason floating works is because the elements are no longer inline.

Upvotes: 5

user1157393
user1157393

Reputation:

It could be that you have also set a border of 1px which will add to the 50%.

Upvotes: 0

Related Questions