I´m searching for ages now but I can´t find a solution ... so hopefully you guys can give me a hint? :-)
I have an unknown number of elements (div´s or li´s) with unknown amount of content.
These elements I want to center, also if I have more than one row of elements. If the height of the elements are different (because of different content amount) the elements need to align vertically on the top of each row.
I created an image to make it more clear what I need and what I was able to achieve up to know Please click here
So my first approach was:
Make the div´s to display as "inline-block".
But this way I don´t have them aligned to the top.
Second try was:
Set the divs to float and then center them somehow.
Therefore I found lot´s of ideas here already.
But all of them seem to work only as long as I have one row of elements. With having two or more rows, the centering is gone.
What I found and tried:
– Centering multiline floated elements
– How to center multiple divs inside a container in CSS
– How do I center float elements?
– http://upshots.org/css/css-horizontally-center-a-row-of-floated-elements (which was probably closest to what I need but works only with a known number of elements in one row)
– and more in similar directions ...
Any ideas? :-)
Thanks so much in advance!
Cheers,
Manuel
Related
So I have a post-view that I can't get to work properly, and flexbox seemed like the answer from heaven that I was looking for. Except, I can't seem to figure it out properly no matter what...
If you look at this code, there's two vertical divs that should both stretch as more content gets added to either. The div where more content appears grows accordingly, but I want the other div to match in length, and so the bottom edges to be aligned to the bottom of the flex box. The repeating images behind the two founder buttons and the "LOTS OF TEXT" should then fill up empty space down to the bottom where the bottom-edge images are.
I've been at this for a good week now and can't figure it out... I'm sorry if this is a really simple thing or I'm being dense about css, I'm still learning. Any help would be greatly appreciated.
In your .forumviewright class, add this property:
height: 100px;
That brings the baselines together.
Just tested it in Chrome Dev Tools. It works. It also works in FIDDLE. But it doesn't seem to work in the CSSDesk sample you provided.
Whether or not this is the permanent solution you're looking for, you can let me know in the comments below.
EDIT
Your question begins with:
Can't get CSS flexbox to expand properly.
Actually, the flexbox is working fine. Both columns are binded to each other and expand equally, as per the flexbox rules.
If you highlight the child divs (.forumviewleft and .forumviewright) in Chrome Dev Tools or Firefox Inspector, you'll see that both columns are equal height and track each other regardless of content size on either side.
To illustrate this, I've added a background color to each column div so you can see that the flex is working properly. No other changes to the code were made. In this example, no matter how much content is placed in either column, both color-coded columns remain equal height.
https://jsfiddle.net/eympj0yq/2/
Of course, the real problem is that the child container boxes inside these columns aren't tracking each other.
This will require some fundamental adjustments to your code. For a better understanding of this problem and how to fix it, see this post:
Height 100% on flexbox column child
Hope this helps. Good luck!
I've seen examples here and there of a trick to use
position:absolute
on the first column of a table, and then make the rest of the table scrollable horizontally.
This works, as seen here: http://jsfiddle.net/YMvk9/4289/
However, as soon as I added the vertical scrollbar you can see that it does not scroll the frozen pane, instead, the frozen pane now sticks down from the rest of the table in a ugly sort of way.
I need the frozen column on the left to scroll vertically. Can anyone fix the jsfiddle code?
Assuming that what you want is for the user to be able to scroll the table vertically or horizontally there are several ways to achieve this. The most straightforward would be to put your headcol cells in a table all there own then position the two tables so they are right up against each other and wrap them both in a div with overflow:scroll. I did come up with a patch-work fix for your current layout though.
Here is the FIDDLE
You had several problems:
Your overflow property was only applying to the second column of the table.
Your containing div was not containing anything because it had no positioning rules so I gave it some absolute positioning and assigned the overflow:scroll: property to that.
Once you position the container absolutely it screws up the long class so I assigned that to float:right; and gave it a margin-left to account for the headcol cells.
Finally, since you are floating an element, you have to use a "clear fix" to make sure it doesn't wrap so I added a new class and a new cell to each row to fix the layout.
Hope that helps!
UPDATE: After posting I noticed one issue in that adding margin-left to your long class screwed up the way the table looked to I removed that rule and added padding-left to the div to fix the issue. There may still be a couple minor margin & padding tweaks you need to do to make the table look just right; but it works! I updated the fiddle too.
Since a few years ago I see some blogs like Pinterest which display posts of different heights in columns with no horizontal alignment. I don't understand how they achieve that. Do they use Javascript? If so, do they use some jQuery plugin?
If you have two different divs, both vertical, then they shouldn't try to horizontally align themselves. For example of you made a single div that would enclose both columns, making it the proper width and height, and then nested two more divs inside of it with a width around 50%, then they would not align horizontally. Outside of that, there shouldn't be anything trying to horizontally align the elements of those divs. If this doesn't answer your question, please post the code.
It is possible that this problem doesn't display on your computer. A working example (what I want) can be seen at http://ethoma.com/wp/?p=1 . And the bug can probably be seen at http://ethoma.com/wp/ . If you can't see the problem, basically the tertiary column is displaying to the left of the content, colliding with the aside column (first column). I have a float:left aside column and inside there is a statically positioned div so the twitter feed and logo follow you down the page.
Notice that the aside doesn't envelop its content. How do I correct this? thank you for all responses.
As a guide make everything inside the article relative, float left, set equal widths, declare heights and text-align as you wish.
I don't usually post a link to my site when asking questions, though I don't see another way around it. I apologize in advance.
I'm having difficulties with a specific page. The page consists of Team Members, where each member is its own DIV (also each team member is coincidentally a separate post in Wordpress).
For some reason, the DIVs wrapping each post are clearing left, but no clearing attributes are assigned!
The page is located here: http://engineercreativity.com/samples/comsense/?page_id=15
Please, if you can help, I'd love to hear any input.
Thanks a lot!
Amit
Divs are floating on horizontal axis and not vertically, What you are essentially looking for is a Masonry Plugin, its for jquery and should easily solve your problem.
http://desandro.com/resources/jquery-masonry/
edit:
your divs are not clearing on left, please see the computed layout
the whitespace is not because of divs clearing left, the whitespace is because of line height. When you are having two floating elements in a row, then the row will take height equal to the bigger element, so essentially each row will have white space below the smaller div. This is similar to a HTML Table.
Akinator's fix didn't work for me in FF on Win XP. If you change your float on the "team-member" class to float: left it will fix it. It is being caused by your static image being float left and the rest of the divs around it being float right.
If I understood your question correctly, you have a margin-bottom of 15px in the class .team-member, this gives and extra white space.
It should be set to 0 (or not set)
Is this what you ment?