CODEWITHSUNDEEP
javascripthtmlcss
user1726343
user1726343

Reputation:

Float stacking css

I am working with a joomla plugin that generates some html for a form. The problem I have is with the css.

The script generates several divs of varying height, all of which are stacked into a two column layout. The problem is that since they are all floated left, sometimes a second column tall div can block the next div from floating under the adjacent short first column div. Without further hand waving, here is a jsfiddle

What reasonably browser compatible css can I use to stack the floats correctly? Note that the second column divs have essentially no classes or ids to distinguish them from the first column divs.

Here are things I would preferably avoid:

  1. Non compatible solutions like nth-child()
  2. Changing the script to generate css hooks with the html

Javascript is sort of okay

EDIT: It seems the javascript comment is not prominent enough. As the jsfiddle stands, everything is working correctly. This is what I want the layout to look like. Unfortunately, I cannot use a correctfloat classname on the div, because I am not the one generating it. Remove the correctfloat classname to see what the problem is.

Upvotes: 2

Views: 312

Answers (5)

user1726343
user1726343

Reputation:

As per Mladen's request, I am posting the approach that worked best for me. I used an unobtrusive javascript library called selectivizr that enables cross browser support for the latest css in, get this, all browsers.

I then proceeded to use:

someclassname:nth-child(2n){
    float:right;
}

to align every second column div to the right, without the actual need for a second column container. It is still not a perfect solution, since theoretically it is still possible for divs to pile up on one side, but I haven't seen it happening so far.

Thanks for your help folks.

Upvotes: 1

Mladen
Mladen

Reputation: 1245

http://masonry.desandro.com/

Is this what you're looking for?

Upvotes: 2

Josh Davenport-Smith
Josh Davenport-Smith

Reputation: 5511

using clear: left on the short class solves the issue in the example you've given:

.short{
    height:100px;
    clear:left;
}

See: http://jsfiddle.net/U5FV9/2/ and http://jsfiddle.net/U5FV9/3/

However I can't help but feel that it may not solve the issue always, based on the information you've given about dynamically a created form. For example, what if a short element needs to be on the right?

I think a better solution for you would be to have two column containers that are floated and contain your short and tall elements. That way you can always ensure they appear correctly.

Here's an example of how you could implement that: http://jsfiddle.net/U5FV9/5/

Upvotes: 1

Saeed
Saeed

Reputation: 3775

You use this style code in css file

#yourdiv{
 float:left;
 height:yoursizepx;
 width:yoursizepx;
 overflow:hidden;
}

Upvotes: 1

NYCBilly
NYCBilly

Reputation: 870

If I am understanding correctly, have you tried modifying or adding an overflow property on the block?

overflow:hidden;

Upvotes: 0

Related Questions