CODEWITHSUNDEEP
htmlcss
bu246
bu246

Reputation: 47

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>

Upvotes: 1

Views: 751

Answers (2)

Sebastian Brosch
Sebastian Brosch

Reputation: 43594

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>

Upvotes: 1

Friend
Friend

Reputation: 516

Try this css 

#login fieldset {
    width: 180px;
   float:left;
 }

    #login p {
    float:left;

 }

Upvotes: 1

Related Questions