CODEWITHSUNDEEP
css
Meek
Meek

Reputation: 3362

Floating and clearing in columns

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 class="box">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">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.

Upvotes: 0

Views: 71

Answers (3)

odil-io
odil-io

Reputation: 309

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 parent 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.

Upvotes: 2

Pete
Pete

Reputation: 58462

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 class="box">
  <div class="content one">1</div>
  <div class="content two">2</div>
  <div class="content three">3</div>
  <div class="content four">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

Upvotes: 1

Saikat Roy
Saikat Roy

Reputation: 523

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 class="box row">
  <div class="one box-col">1</div>
  <div class="two box-col">2</div>
  <div class="three box-col">3</div>
  <div class="four box-col">4</div>
</div>

Upvotes: 0

Related Questions