Mixing
How to place a card and form right next to each other using HTML and CSS? [on hold]
How to place a card and form right next to each other using HTML and CSS? [on hold]
Below is my code. Trying to get a Card to sit next to my Form (form in middle) and then another card on the right (3 items all in a line.)
Fill in the fields in the form to the right to find out your fixed-rate mortgage. This type of mortgage is sometimes referred to as a "Vanilla Wafer"
and the interest rate remains the same throughout the entire life of the loan.
</div>
</div>
</div>
<form action="">
APR%:
Loan Term (Years):
Loan Amount:
Down Payment:
</form>
Fill in the fields in the form to the right to find out your fixed-rate mortgage. This type of mortgage is sometimes referred to as a "Vanilla Wafer"
and the interest rate remains the same throughout the entire life of the loan.
</div>
</div>
</div>
Adding this so I can post because for some reason the site brings up an error saying I need to add more details.
This question appears to be off-topic. The users who voted to close gave this specific reason:
2 Answers
2
This will work you Fine.
Fill in the fields in the form to the right to find out your fixed-rate mortgage. This type of mortgage is sometimes referred to as a "Vanilla Wafer" and the interest rate remains the same throughout the entire life of the loan.
</div>
</div>
</div>
</div>
<form action="" style="float:left;width:50%">
APR%:
Loan Term (Years):
Loan Amount:
Down Payment:
<input type="text" id="pmt" name="mPmt" />
</div>
</form>@psujohnny03 add the extra code to your original question as an edit, so we can see it better. By the way what do you mean by card?
– Alec
2 days ago
Ok, adding code now. When I say card I am referring to the cards you can use from a site called MaterializeCSS.
– psujohnny03
2 days ago
Use display:flex; to wrap div.
display:flex;
wrap
Learn about flex:https://www.w3schools.com/css/css3_flexbox.asp
flex
.wrap{
display:flex;
}
Fill in the fields in the form to the right to find out your fixed-rate mortgage. This type of mortgage is sometimes referred to as a "Vanilla Wafer"
and the interest rate remains the same throughout the entire life of the loan.
</div>
</div>
</div>
<form action="">
APR%:
Loan Term (Years):
Loan Amount:
Down Payment:
</form>
</div>that what you mean??
– לבני מלכה
Jun 28 at 5:46
But
flex only gives you support after IE11 - caniuse.com/#feat=flexbox– weBBer
Jun 28 at 5:55
flex
@weBBer the OP didn't mantion that he needs it to IE....
– לבני מלכה
Jun 28 at 5:57
That I know, just added this for his information as you should have in my opinion. :)
– weBBer
Jun 28 at 6:00
Thank you very much. My goal is to have a card on the left, form in middle, and another card on the right. Although this code helped it shrunk the size of my card and threw it all the way left and took my form and threw it all the way right, instead of center. Maybe I should have included another card in my code to explain in it's entirety. I will paste my new code below. The layout is fine but my cards have become very skinny.
– psujohnny03
2 days ago