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.
Related
How can I vertically align a in the middle of a fixed height using datatables?
In order to help you, you must share a jsfiddle with your case.
If you read this page the example has the right vertical align
Check your column rowspan, HTML errors or css datatables file.
You can also inspect the example and compare it with your code.
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.
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.
I would like to vertically center a display:inline-block element with vertical-align:middle. The problem is that it doesn't vertically align in the absolute center until the text reaches that point.
See: http://jsbin.com/afojew/1/edit
This works, but is a bit hacky: http://jsbin.com/afojew/2/edit
edit: ^ that doesn't quite work, but this does: http://jsbin.com/afojew/3/edit
This has been asked before - Ive just read it and it contains pretty much everything you would need to know with this problem : Vertically align text in a div
I am trying to implement the floater div (http://www.vanseodesign.com/css/vertical-centering/) method of vertically centring a h2. It doesn't work with the markup I have (see example below):
http://jsfiddle.net/brendan_rice/LCP5K/1/
Can anyone see where I am going wrong?
I don't really understand if you were trying to put that text box in the centered div or not , you didn't have it that way in your html, THis is an example of how to center with the method you were talking about , although there are much better ways , that is probably why this one was the last option of those examples in that link jsfiddle