I don't know if this is only my strange requirement, but I didn't really find anyone asking it before. My problem is:
When divs with random heights are floated in multiple rows why don't they stay in below the preceding number. I've noticed, the next row div goes below to the div which has less height in it's above row. Which makes blank space in the 2nd row and other following divs fall into next row. I've added fiddler link here jsfiddle.net/GF9kE
This image explains exactly what I mean. div 4 should have come below 1, 5 below 2, 6 below 3. But 4 went below 3 because 3 has least height. Why does this happen. And is there any fix to this ? I want to display divs in floating style but follow the order regardless of heights.
I will be very thankful to you for reading this and helping me out.
Thank you,
A great explanation I've seen written up about the topic is here.
http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/
The specific excerpt that addresses your question:
"Basically, the gist of the situation is that floated elements go right up to the specified edge (left or right), but no further. Unless of course there is another floated element before it, in which case it just goes next to that one.
The real surprise that confused us before comes in the rules at the end, which state that floated elements try to stay as high as possible and that this vertical positioning rule takes precedence over the horizontal left/right floating rule that pushes an item to an edge."
Short answer - Since box #2 stretches the line height to be greater than the height of #3, #4 has some room to squeeze in before the next line starts. Similar logic applies to #8 and #9.
--- EDIT ---
If you want your boxes to flow in a Pinterest-style fashion, your best bet is to use an existing javascript library such as Masonry or Blocksit.
If you want to try avoiding javascript and just use CSS3, here's a good link you can check out. This might suit your needs depending on how much browser compat is necessary.
I think you should have a look here: http://isotope.metafizzy.co/
They said with CSS alone we cannot get this done, please see here CSS Floating Divs At Variable Heights
Related
First I should admit that I'm a beginner and the question might seem awkward to most of you, sorry for that.
My question is - what is the best practice (float or position) to position an element in a 2 or multi column layout assuming the design wont break apart after zooming an website?
I searched through this site and discovered some posts concerning this issue but those are 4/5years old and I could not come out with any conclusion.
Looking forward to have your expert views....
Thanks..
Its really based on how you want your element to be positioned or placed within the page.
CSS Position:
You should be choosing css positions to place your element if you wish the element to appear on top or bottom of any other elements and also if you wish to animate those.
Positioned element does not care for siblings placement.
Floats:
For creating columns, having content aligned to left or right and adjust to its adjacent siblings - you should use CSS floats.
Let us say, you have an image and bunch of texts, you should use floats if you wish to wrap texts around image. If image is not present then texts would cover the space. This wont happen in case of css positions.
I hope you will understand me. There is a wrapper with width of 360px, it allows only 3 columns of divs. I just want to be able to drop in another div anytime I want and then all previous will be moved along. I have a problem, it seems like divs go to next row but they align verticaly to the tallest one from previous row. Please have a look at the example below (I had to use a picture as the code wasn't showing right). The last green one should be touching the tall red one from above. I am not looking for static positioning it has to be automatic so when I change wrappers width to larger more divs will automatically be included in the rows.
Below is the image of a wrong result.
Masonry script is the closest as I can get to what I need, shame it is JS...
I'm trying to understand very basic browser layout logic, but I'm having trouble putting together something that is accurate even at a very high level, just describing inline elements, block elements and floats. I see phrases used in several articles like 'normal flow' without defining these terms. So I've taken a stab at a very short, incomplete account of the layout logic. Can someone confirm if it is correct, or if there are errors even at this high level? Thanks for your help!
Get the next html element.
If it is an inline element, go to 3. If a block element, go to 4.
Add the inline element to the current inline element stack. If the stack overflows the available horizontal space, write out a line. Go to 1.
If the element is floated, go to 5, otherwise go to 6.
If floated left, add to the left float stack. If floated right, add to the right float stack. Go to 1.
Write out the left float stack, the inline element stack and the right float stack and start a new line. Write out the block element with a new line at the end. Go to 1.
You do not mention position in your list, which is important.
I think this part of the w3 specification should help you. But you might want to start at the beginning.
I have a design I'm working on that is almost complete, but I'm having trouble getting the CSS to do what I want. What I am trying to do is something like this:
However, when the page is generated, this is what the output looks like:
How can I get the third box to float up under the first and next to the second? I have tried every trick I know, but can't get it to work. I should also mention that each block is added to the page by a loop in PHP pulling from a database, so I'm kinda limited by not having static content, and have no way of knowing ahead of time how tall a particular block is going to be.
If the number of columns is variable, CSS can't really do it (if you want it to work in all common browsers), so instead use jQuery Masonry which is designed to solve exactly this problem.
Here's me saying the same thing, but with more words: CSS two columns with known children width
Per the second layout, a good option is using three primary columns. There are several grid systems available including Twitter Bootstrap and 960 Grid that will help you get the basic framework laid out quickly and sans quirks. When divs (block elements) fall within any of the three columns, they'll stack up, top-to-bottom, naturally.
Regarding the bottom of the divs lining up perfectly, you'll be able to use JavaScript to calculate the overall height of the parent of the columns (which will naturally inherit the height of the tallest column), calculate the total height of the block elements within each column, and use javascript to add the difference in height to the lowest block element for each.
Be sure to account for padding and margin in the JS height calculations.
Try putting the divs into 3 columns instead of stacking them in the order they appear.
That behaviour is because of the float rules. The top of a floating element cannot be over the top of another element that came before it in the normal flow of the page. I don't know exactly how you position your elements but you might want to look into that.
Here is the Css Specs for float: http://www.w3.org/TR/CSS2/visuren.html#float-rules (It's css2 but the rules still apply)
Look at rules 5 and 6
First see http://jsfiddle.net/b2BpB/15/
3 columns, aligned to the top of a container which is centred on the page. When the browser window is wider than the container - the example above is good.
When you shrink the width of the browser window - the columns start to stack down the page.
Question: How can I make it so that the outer two columns have a z-index lower then the centre column, so that when the browser window is squeezed, width-wise, instead of the columns stacking down the page, the outer columns slide under (behind) the centre column?
Note: I need to keep the present behaviours. 3 divs align to top of container. 3 divs grow / shrink to fit their contents (can't use fixed width, hight divs for the columns)
--added 19 April 2010 am UK--
This one seems to be stumping everyone - I've added a couple of more tags to see if anyone else can figure it out.
It may help me & others even if you post your initial ideas and explain why they wont work in this instance - to help avoid dead ends.
One avenue I looked at is using iframes instead of divs - but auto resizing iframes in a cross-domain application requires some exotic javascript. I would like to avoid javascript, let alone this cross domain hack. - I think this is a dead end - unless you know otherwise.
Thanks in advance...
--added 19 April 2010 13:44 UK--
#RoToRa - here I get absolute top positioning, divs size to fit content & divs sliding under the main centre div with no stacking down the page as the window is squeezed:
http://jsfiddle.net/qr7WB/
I have used inline style - but this is easy to extract to the CSS file - if I ever get it to do what I want.
If I can just get the left & right divs to but up to the centre div - only sliding under when the browser window forces them to, then bingo!
In terms of the application: I want a 3 col web site. The centre col holds the main content and I want it to take precedent. The outside columns are for subordinate content and ads.
First off: This isn't an answer, however I have several points and it's more readable as an answer.
I don't think what you want is possible. Having elements slide under each other is normally something one want to avoid, so it's not a "standard behavior" of CSS.
You'd have to use absolute positioning to have elements overlap each other, but then you can't have the elements adjust width and height to their contents.
The best I can think of is JavaScript, which could be based on the existing layout (so that it would still be displayed without JavaScript), and just "kick in", when the elements need to overlap. However that wouldn't be a simple script to write, because calculating the correct width it needs to react too, isn't simple.
Another alternative could be CSS 3 Media Queries, which allow you define different CSS rules based on window size, however that would require you to know at exactly which width you want the change.
As I mentioned having elements overlap - especially when they contain text, which one would expect to be able to read - is something one usually tries to avoid. Maybe you should describe your exact scenario (which elements contain which kind of information, and why it's ok for them to overlap) instead of your perceived solution, then it may be possible to suggest alternatives.
BTW I can't see how iframes would have to do with problem at all.
Do You mean like this?
Example Fiddle : HERE
if that's it it will depend on what widths you can or can't set, but if that's the idea more specs would help
It's all floated or inline-block, no absolute positioning so flow should remain to allow for footers to follow.. let me know!
Updated fiddle per comments : HERE