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:
Non compatible solutions like nth-child()
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.
http://masonry.desandro.com/
Is this what you're looking for?
You use this style code in css file
#yourdiv{
float:left;
height:yoursizepx;
width:yoursizepx;
overflow:hidden;
}
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/
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.
If I am understanding correctly, have you tried modifying or adding an overflow property on the block?
overflow:hidden;
Related
I am looking for solution method to visualize something similar to this. It should be a table where spans can go over multiple columns.
One should also be able to drag&drop these spans. These spans should reorder themselves correct.
I am not necessarily looking for a code solution, just the solution idea I should proceed with.
This looks mostly likely styling, CSS or Cascading Style Sheets. To achieve what you're looking for can be done pretty easily with Bootstrap 3 http://getbootstrap.com/ . But there are tons of CSS libraries you can use. It's really your preference and how custom you want.
You can also look on GitHub for similar solutions. These solutions show code examples and can give you even more insight on what you may or may not want to do.
Good luck to you
You can set position: relative to the all td's of the table and then position: absolute and a z-index bigger than the td's to the span's, so the spans will be drawn over your td's
I'm not talking about floating, nor z-index (which is used to put one above the other). I'm talking about changing the order that a DIV is displayed through Javascript.
For example, I have:
<div id='bottom'></div>
<div id='header'></div>
I want to change the order so the 'header' will be displayed above the 'bottom', but not "overlaying" it, neither "floating". Just:
<div id='header'></div>
<div id='bottom'></div>
It is a simple question that haven't been asked before, I guess.
You could work with this Remove element by id where you remove the first one (save it to some variable first) and then append it using appendChild() in JS or append() in jQuery if you're using the framework. That should effectively swap places of the two.
EDIT: Take a look at this it basically is the same question you asked for, with an answer containing code and everything else you might need. Seems like you didn't search good enough.
Perhaps this previous answer: Reordering of Divs, which shows a pure-Javascript way and a jQuery way to re-arrange the divs. Googling "rearrange div" also proves fruitful.
It depends on the javascript library you use but if you use jquery, this can easily be done. Just type the following:
var header = $('#header');
$('#bottom').next().remove;
$('#bottom').before(header);
You can do this with CSS only using flexbox depending on the browsers you want to support. Otherwise you can go for the javascript solution like mentioned by others already.
I've built a very basic grid of divs by using float:
However when expanding one of the items placed in the right-hand side column, here is what happens (please excuse my crude/lame arrows I've used to illustrate what I'm trying to achieve):
Which is what I expected but not what I really want. I'm looking for a neat way of having boxes A and B move up to fill the empty spot and items C-H to move up one row so that available space is utilized most efficiently.
Here is the JSFiddle I've created to illustrate this problem (apologies it's not clickable, stack overflow rep thing again...) :
http://jsfiddle.net/VDV6S/4/
I would appreciate any suggestions.
You need jQuery Masonry, or something similar.
Alternatively, you can split the items into two columns manually: http://jsfiddle.net/thirtydot/VDV6S/5/
Another option is to use CSS3 columns, however the browser support might not be acceptable.
So I imagine this is a pretty trivial question for most, but I am working with a grid like class of divs, and whenever I dynamically add content to one div, the whole row of remaining empty divs shifts down.
There may be something that I am just not understanding about divs, but after doing some research on the web, one post said there was something that JavaScript could do to help, but that he wasn't going to talk about it. Does anybody have any ideas? Thanks in advance!
div
{
overflow:hidden;
}
You may want to look at the overflow CSS property: http://reference.sitepoint.com/css/overflow
I'm currently developing a website and my client wants the text of various articles to overflow into two columns. Kind of like in a newspaper? So it would look like:
Today in Wales, someone actually Nobody was harmed in
did something interesting. the incident, although one
Authorities are baffled by this elderly victim is receiving
development and have arrested the counselling.
perpetrator.
Is there a way I can do this with just CSS alone? I'd prefer not to have to use multiple divs. I'm open to using JavaScript too, but I'm really bad at that, so help would be appreciated. I was thinking maybe JavaScript could count how many <p>'s there are in the content div, and then move the second half of them to be floated right based on that?
The good news is that there is a CSS-only solution. If it was implemented, it would look like this:
div.multi {
column-count: 3
column-gap: 10px;
column-rule: 1px solid black;
}
I'd probably handle it in your backend, whatever that happens to be. An example in PHP might look like:
$content = "Today in Wales, someone actually did something...";
// Find the literal halfway point, should be close to the textual halfway point
$pos = int(strlen($content) / 2);
// Find the end of the nearest word
while ($content[$pos] != " ") { $pos++; }
// Split into columns based on the word ending.
$column1 = substr($content, 0, $pos);
$column2 = substr($content, $pos+1);
It should probably be possible to do something similar in JavaScript with InnerHTML, but personally I'd avoid that whole situation because more and more people are using plugins like NoScript that disables JavaScript till it's explicitly allowed for x site, and above anything else, div's and CSS were designed to degrade nicely. A JavaScript solution would degrade horribly in this case.
Here's a JQuery plugin which does columns automatically, and can even vary number of columns based on screen size.
I haven't used this myself, but check it out.
If you are using Mootools, you can check out MooColumns.
First off, i don't think just css can do that, but i would love to be proven wrong.
Second, just counting paragraphs won't help you at all, you need at least all the heights and calculate the middle of the text height based on that, but you'd have to account for window resizing etc. I don't think there is a reasonably simple off the shelf solution. Unfortunately i'm pessimistic about finding a perfect solution to this problem, But it is an interesting one.
This is difficult to achieve in HTML/CSS/JS for a reason (although I'm sure it's possible).
Newspapers use multiple columns to reduce the line width make text more readable. This is fine on paper because when you finish one column you flip your eye up to the beginning of the next.
On the web we use scrolling to allow text to continue past the bounds of the screen therefore don't need columns.
This is supported in a Mozilla only CSS extension: -moz-column-count. See : https://developer.mozilla.org/en/CSS3_Columns