Streaming live at 10am (PST)

How to create a horizontal form where the text label is above the input box?


This is what I want to build:

A horizontal form where each text label is directly above each label input box.

This is what I have so far:

A Form, Container, and 14 div blocks. One div block for each element.

The problem: When I float:left each element in each div, and make the width less than 100% (e.g. 10%) the elements are not stacking on top of each other, and they are not stacking next to each other, horizontally.

What is the best way to accomplish this?


Hi @Carlos_T, if I understand your desired layout- perhaps you could try floating the container blocks, and then putting the label + input elements within those containers?

For example:

How would you like to see the layout respond to the smaller breakpoints?


RE: Breakpoints: Ideally, elements on the left would remain above elements to the right.
Lender's Name
Starting Balance
Start Date
Current Balance
Interest Rate
Value of Home