I am trying to align/stack 3 items to the bottom of a display:flex div. The only way I could manage it is by adding a 4th div on top & use javascript/jquery to adjust its height dynamically essentially to push those 3 items to the bottom.
Is there a pure CSS3 way to do this without resorting to javascript/jquery? Thanks
Here is fiddle. The 3 divs I want aligned/stacked to the bottom are .searchForm, .tweetForm and .myMsg. I'm currently resorting to putting a .fudgeBox on top to push them down to the bottom.
Add this:
.searchForm { margin-top: auto; }
You can scrap the spacer div and all the JS.
An alternative would be justify-content: flex-end on the flex container (.sideRight).
auto margins demo
justify-content demo
Learn more about justify-content and auto margins here: Methods for Aligning Flex Items
In your .sideRight css use justify-content instead of align-items. When you use flex-direction: column the flow direction changes to vertical so the usage of justify-... and align-... basically switch.
Related
I am making a grid in nextjs and css but whenever I apply the
display: grid;
in css, the items go beyond the container even though I'd have specified the maximum width. So the items do not flow over to the following row but instead just keep going further right until they exit the screen. This is how my code looks like on the nextjs playground https://codedamn.com/playground/hNlUte0UawOjB4IbKuC02.
Try this:
Your .cardContainer Element should have a grid-template-columns: repeat(6, 2fr); because you have only 6 Cards.
Remove width: 300px; from your .card Elements. They are grid Element and they in this case, you wont need a fix width for them.
Remove max-width from the Home_cardContainer__frLxE because you have set max-width for the parent (Home_siteContainer__TSQhQ) already.
I am trying to determine the top/bottom padding of a div (.content) based on it's height, and to recalculate it based on load AND resize of the window. This is supposed to align nicely centered next to another div (.character) beside it.
I've tried using CSS calc, but in this case it doesn't do exactly what I want it to do since the syntax doesn't support operators and I have a few media queries that change the size of the font based on the viewfinder, so the height of the .content div is somewhat dynamic.
Below is the JS portion, but here is the JSFiddle of what I've done so far: https://jsfiddle.net/inochiishtal/a9z13fb2/62/
$(function(){
$.w = $(window);
$.w.on('load resize', res);
res();
});
function res() {
$('.content').css('height',($.w.innerHeight()/2)+'px');
}
Any help or suggestions are appreciated. I'm not 100% dedicated to using innerHTML if there is a better solution.
It's a little unclear exactly how you want the items aligned, but based on what you said it seems like you want the .content and the .character to be vertically center aligned with each other.
In your snippet you have both of them absolutely positioned. If that's the way you want to go, you can just ignore their margins and JavaScript in general with this little vertical centering trick applied to both:
top: 50%;
transform: translateY( -50% );
The first line says "Put the top of this element 50% of the way down the element that it's positioned based on." Since it goes by the top, the second line says "Scoot me back up 50% of my height." That's just the way those CSS properties work -- the "top" % is about its parent, and the translateY % is about itself.
Since both of your elements would be vertically centered in their parent, they'd be aligned.
https://jsfiddle.net/qowxezpy/
HOWEVER if you don't need the elements to overlap like they do in this example (which I think looks nice and modern) there's a much easier way, using flex.
The parent would get:
display: flex;
align-items: center;
And the two children get:
flex-basis: 50%; //just to give them some width, since one is empty
I can't really describe the situation so here's what I want.
< Today > (including arrows) should be centered. And because Today can be changed, it has dynamic width.
The calendar icon should have been next to < Today > element, having certain margin.
Can it be achieved with pure HTML and CSS? or should I do some javascript thing?
You can put < Today > in a container, then give that container a width of auto, and a left & right margin of auto so it centers it.
HTML
<div class="yourparentdiv">
<div class="container>
< Today >
</div>
</div>
CSS
.container {
width: auto;
margin: 0 auto;
}
You could then add the calendar by adding another div and using the absolute position and set it relative to .container. Alternatively, you could add it using :after CSS selector for the #today div.
Many ways to achieve this.
Margin: auto can work.
Table/tablecell classes
inline-block element with text-align:center in parent...
Hard to guess what will do it for you. Provide some code and try google.
This can be achived using css flex boxes. Please go through the following tutorial to learn more.
tutorial
I would like to make the transition of the menu to be smooth. The problem is when you click the arrows, the 2nd div will show on the bottom of the 1st div, making it not smooth to look at. pls see below for my code:
Pls see my code here:
http://www.codeply.com/go/mdMPOkmFVH
in your code you need to do some basic change in CSS, your CSS should be as follows
.btn-arrow {
display: inline-block;
text-align: center;
}
.effects-list {
text-align: center;
}
.col-xs-4 {
min-height:20px;
}
Here you need to set minimum height 20px for class .col-xs-4, The reason behind this is the jquery function needs to set sliding element to have position absolute, and you were setting it to relative by force. and if all child elements in divs are absolute elements, then absolute elements won't acquire it's space in parent div and that is why it will make parent div's acquired content will be empty. so it will treat it as empty div and set it's height as 0px, and won't show anything in the div... so here we are specifying it's minimum height to solve our issue.
Another thing that we could have done is adding white space to the parent div
e.g.
<div class="col-xs-4" id="effects_menu"> </div>
I'm using MaterializeCSS to style a website I am creating.
In order for me to get the navbar items to be towards the bottom of the navbar, I applied a top margin to those items (#normal-nav). As an unintended side effect, the picture below the navbar gets clipped for some reason. If I remove the margin that I applied to the li, then all is well. Not sure what I'm doing wrong.
Here is the issue replicated in JSFiddle. In order for you to see the issue I'm having, you'll need to make the window rather large--I have it setup so those items only appear on desktop-sized displays.
Instead of the top-margin try :
#normal-nav {
top: 64px;
position: relative;
}
It's because you've pushed the #normal-nav down beyond its parent. This is exacerbated by the fact that it's a floated element, thus it doesn't increase the size of its container.
See: An article about clearfix
Solutions:
Decreasing the the margin-top you're giving
Use a clearfix if you're intent on keeping the float.
Use another method other than float to push that nav to the right e.g. flexbox (probably the most scalable option).