CODEWITHSUNDEEP
htmlcss
Kalyan
Kalyan

Reputation: 307

W3schools CSS Contact Form merging with another div

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<p>Please open this in full screen</p>
<form class="w3-container w3-half">
<label>Name</label>
<input type="text" class="w3-input w3-border"/><br/>
<input type="submit" class="w3-button w3-black"/>
</form>
<p class="w3-padding w3-center w3-card-4">© Copyright 123456789. All rights Reserved.</p>

As you seen that the form is merging in the copyright bar. How to prevent this merging purely using w3-css. I want the form not to merge in the copyright bar. And display form above the copyright bar separately.

Upvotes: 1

Views: 204

Answers (2)

Usagi Miyamoto
Usagi Miyamoto

Reputation: 6329

Just an wild idea, but try w3-container instead of w3-padding...

Edit

As other comment states, w3-half contains float. So your footer should contain clear...

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<p>Please open this in full screen</p>
<form class="w3-container w3-half">
<label>Name</label>
<input type="text" class="w3-input w3-border"/><br/>
<input type="submit" class="w3-button w3-black"/>
</form>
<p class="w3-padding w3-center w3-card-4" style="clear: both;">© Copyright 123456789. All rights Reserved.</p>

Upvotes: 1

Charles Cavalcante
Charles Cavalcante

Reputation: 1618

The w3-half class have float: left; width: 49.99999%;, if you don´t need two columns just remove it.

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<p>Please open this in full screen</p>
<form class="w3-container">
<label>Name</label>
<input type="text" class="w3-input w3-border"/><br/>
<input type="submit" class="w3-button w3-black"/>
</form>
<p class="w3-padding w3-center w3-card-4">© Copyright 123456789. All rights Reserved.</p>

Upvotes: 1

Related Questions