1

I have a little form that is inside a larger div:

<div id="confirmEmailContainer"> <form class="edit_user" id="edit_user_2" action="/users/2" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="hWjOQEpKyMKVrk9+vWEeenl3D49rVe4hXFKgF4lza09xXRo0HENKMqGRpq9xUflWqbGJUdoxrmQrsksQWV5s7g==" /> <div class="field"> <label for="user_email">Email</label> <span class="required">*</span> <br> <div> <input size="30" style="display: inline;" type="text" value="[email protected]" name="user[email]" id="user_email" /> <span id="emailConfirmedStatus"> <div class="unconfirmed" style="display: block"><img style="vertical-align:middle" src="/assets/x-mark-621493006f6052df98aa84352a33f21bccabfc670129ca9572009545745040d9.png" alt="X mark" width="16" height="16" /> Unconfirmed</div> <div class="confirmed" style="display: none"><img style="vertical-align:middle" src="/assets/checkmark-b87ae8ffea696b9c9587f26fdb656af7a21da4f7f73da01fc4bef9b35a1b9465.svg" alt="Checkmark" width="16" height="16" /> Confirmed</div> </span> </div> </div> <div class="actions buttonContainer"> <input type="submit" name="commit" value="Send Confirmation Email" id="submit" class="button btn" data-disable-with="Send Confirmation Email" /> </div> </form> </div>

I do not specify CSS width properties anywhere, including the form or its container:

#confirmEmailContainer { background-color: #fff; text-align: left; } form { margin: 4% 15%; font-family: Manuelle; font-size: 14px; }

but yet the container is almost taking up the entire width of the content area -- https://jsfiddle.net/70pgd6jn/ . How do I make the form only occupy the width of its elements ?

Improve this question

2 Answers 2

Reset to default
2

You might be looking for the display: inline-block property, which will permit your container element to only occupy the space it requires.

#confirmEmailContainer { background-color: #fff; text-align: left; display: inline-block; }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That doesn't work. Look at the updated Fiddle with your suggestion -- jsfiddle.net/70pgd6jn/1 .
Oh wait, you mean tto say "display:inline-block;". That works.
0

you should add float: left to #confirmEmailContainer and overflow: hidden to #content

Improve this answer

Comments