CODEWITHSUNDEEP
css
prakamya406
prakamya406

Reputation: 13

Should i use anything other than float?

I want two add two forms one on left and one on right of the page and then what i write should be displayed below them.But the problem is it is being shown between the two forms.

<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space       between the two forms</p>

CSS

.login{
float:left;
}

.signup{
 float:right;
}

Upvotes: 0

Views: 1042

Answers (3)

Ragul Parani
Ragul Parani

Reputation: 621

The use of floated element is highly discouraged since there are a lot of other better alternatives that can be used instead. Best alternatives are

  1. display: inline-block;

CSS

.login{
display:inline-block;
}

.signup{
 display:inline-block;
}
  1. Flexbox

If you still want to use floated elements you can use a clearfix. Clearfix is a way an element automatically clears its child elements. For more information read How to use clearfix

Upvotes: 2

Arti
Arti

Reputation: 3071

Adding style clear:both to your paragraph will help.

.clear
{
  clear:both;
}

<p class="clear">This content should be displayed below but it is displayed in space between the two forms</p>

Upvotes: 0

Gowtham
Gowtham

Reputation: 1597

Mention the Width property width:50%; it will work

.login{
float:left;
width:50%;  
}

.signup{
 float:right;
  width:50%; 
}
<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space       between the two forms</p>

Upvotes: 0

Related Questions