I am building an app using KnackHQ, which is a online database builder that allows you to generate custom forms and display content on an embedded element. Each part of the form is divided into DIV tags, so css can independently be applied to each one. I am trying to create a form that has 2 columns by the divs in the left and right columns as follows:
CSS Code
.left
{
width: 60%;
float: none;
display: block;
clear: left;
}
.right
{
width: 30%;
float: right;
clear: right;
}
So what I want, as shown below on the left, is all my .left divs to go left and all my .right divs to go right. Instead, I get what you see below to the right. The first div of each class are lines up. Then, all of the .right divs appear. Finally, the remaining .left divs show up.
Desired Effect (left) and Current Effect (Right)
See Image: https://i.stack.imgur.com/1jbrm.png
The largest part of the problem is that I do not have any control over the HTML, only the CSS. Normally, I would just wrap both column in one big div. Instead, I need to find a way to do it without a wrapper, since the only div surrounding the .left and .right divs is a wrapper around the entire thing.
Questions:
Why do floating DIVs force multiple block elements to bottom of floating elements? How can I create 2 columns with divs that are varying sizes using floating elements?
