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.
Related
I'm relatively new to HTML and CSS and am trying to use CSS flexbox to align two divs horizontally instead of it positioning the second div underneath the first or just having the second one just hide behind the first one.
I've tried answers from
this question and many others that all suggested to use justify-content to horizontally align the content but it's just not working for me. Here is the code that I'm struggling with.
Any help is greatly appreciated!
Many thanks,
Michael
EDIT:
Sorry for the confusion, to clarify, what I want is the text aligned horizontally to the right of the other div coloured grey. I should also say that I have tried using float with no success.
just add this float:left; to sidebar class style . after this two div align horizontally ,if i understand what you need to achieve.
I am trying to create a grid of 4 square divs that stack on top of each other when the browser is resized to mobile size. I also need to put vertically and horizontally centered text in each div. To make things even more complicated for me, each div's width is defined as a percentage, not as an absolute value.
Is this even possible to achieve?
Yes this is possible. I prefer Flexbox for this. Read up on it e.g. here
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
I'm trying to align two div horizontally, I'm using display:inline-block; to align them, but If one is longer than other, the smalliest one is under "a normal line".
Like this :
Here is my code : http://pastebin.com/vqiNkth2
PS : I'm using bootstrap with some pages, and with the header/footer, but not the content in this one.
if you have given display inline block so make sure yo give vertical align top to both div's .. your problem will be solved.. and for some reason the link you provided not working.
how can I display divs with different height to be close to each other regardless of its height and with a specific margin just like buildings
I mean something like the divs in this website http://via.me
I used flaot:left but it floats only with the last div and leaves an empty spaces
this is the code that I used http://jsfiddle.net/D9rHB/6/
I think that the jQuery Masonry plugin would be what you're looking for in this instance:
Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
JS Fiddle demo.
You can do that. For that you have to have position as "absolute".
Then manually calculate the height and top value to place the div where ever you want.
For making the things easy take the width of all divs same. Also make height of divs in each
column fixed.
Let me know if you need more clarification how to do this.