bu246 bu246 - 3 months ago 21
CSS Question

Html paragraph and fieldset in the same line

I want the

<div>
's child fieldset and the paragraph to be on the same line.

The Code:



fieldset {
width: 180px;
}
#login p {
display: inline;
float: right;
}

<div id="login">
<fieldset>
<legend>Login</legend>
Username <br>
<input type="text" name="username">
<br>
Password <br>
<input type="text" name="password"> <br>
<br>
<input type="submit" name="submit">
</fieldset>
<p>Here you can login or signup for our website</p>
</div>




Answer

The fieldset is a block-element too! You have to set display:inline for fieldset too, like the following solution:

Solution using only display:inline without float:

#login {
  background:blue;
}
fieldset {
  display:inline;
  width:180px;
}
#login p {
  display:inline;
  vertical-align:top;
}
<div id="login">
  <fieldset>
    <legend>Login</legend>
    Username  <br>
    <input type="text" name="username">
    <br>
    Password  <br>
    <input type="text" name="password"> <br>
    <br>
    <input type="submit" name="submit">
  </fieldset>
  <p>Here you can login or signup for our website</p>
</div>
<div>Hello World</div>

Solution using float with clear (to avoid the chaos!):

By using float you have to set the clear property!

#login {
  background:blue;
}
#login:after {
  content:" ";
  display:block;
  clear:both;
}
fieldset {
  float:left;
  width: 180px;
}
#login p {
  display: inline;
  float: left;
}
<div id="login">
  <fieldset>
    <legend>Login</legend>
    Username  <br>
    <input type="text" name="username">
    <br>
    Password  <br>
    <input type="text" name="password"> <br>
    <br>
    <input type="submit" name="submit">
  </fieldset>
  <p>Here you can login or signup for our website</p>
</div>
<div>Hello World</div>