Floating and clearing in columns-CodePudding

I have a list of items that needs to be floated into columns. Item 1 and 2 to the left, and three and four to the right. Each item has a width of 49%.

Using this css makes item three and four float to the right, but not all the way up:

.one,
.two {
  float: left;
}

.two {
  clear: both;
}

.three,
.four {
  float: right;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
</div>

Why is that and how can it be fixed? JsFiddle.

Note: I can't use a flexbox or column-count solution due to dynamic content, menaning that sometimes there should be one item to the left and three to the right, or the opposite.

CodePudding user response：

Not sure what you mean by dynamic content, but if it's only the content inside the 4 divs then couldn't you use flex like so:

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.content {
  width: 49%;
  box-sizing: border-box;
  border: 1px solid red
}

.one {
  order: 1;
}

.two {
  order: 3;
}

.three {
  order: 2;
}

.four {
  order: 4;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
</div>

If your dynamic content is the number of boxes, then you would most likely have to use a server side or js solution to change the html structure

Update

Per your comment that the dynamic content means the placement of the divs, then you would need a server side or js solution for that as css won't be able to change the placement of your boxes based on content - unless you are just wanting even height columns based on the content of your divs, in which case, use css columns

CodePudding user response：

In short: No.

In less short: No, Float does not support what you want.

Source: MDN

left The element must float on the left side of its containing block.

right The element must float on the right side of its containing block.

The way this works is as follows (taking your example)

Div 1 floats to the left.
Div 2 floats to the left, under div 1.
Div 3 float to the right, under div 2.
Div 4 floats right, under div 3.

Floats don't ignore each other (within a parent), only the rest of the DOM (within that parent).

Without the use of grid or flex, I don't see your request becoming a reality.

I suggest using flex on your parent div, and maybe use a set of :nth-child selectors and order properties to get the right base to apply your layout to.

Taking in account your recent comment:

By dynamic content, I mean that sometimes there should be one item to the left and three to the right, or the opposite.

This should be either determined server-side by including a CSS class to the prent div or, use client-side code to count the amount of div's in that parent, and determine how to display those. In combination with a CSS class you can do any layout you want.

But again, in short: No, not possible using just floats.

CodePudding user response：

Is this the pattern you are looking for ?

* {
  box-sizing: border-box;
}
.box-col{
  float: left;
}

.box div {
  width: 49%;
  border: 1px solid red;
}

body *,
body *:before,
body *:after {
  box-sizing: inherit;
}

<h3>How can these two columns be aliged?</h3>
<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
</div>

CodePudding user response：

If you persist that you have to use floats, you can just distribute the content into 2 floated columns and fill these columns dynamically in your script/template as you see fit:

.box {
  overflow: auto;
}

.left-half {
  float: left;
  width: 49%;
}
.right-half {
  float: right;
  width: 49%;
}

.one, .two, .three, .four {
  border: 1px solid red;
}

<h3>How can these two columns be aliged?</h3>
<div >
<div >
  <div >1</div>
  <div >2</div>
</div>
<div >
  <div >3</div>
  <div >4</div>
</div>
</div>