I have two div, A and B. I would like to put element B above element A using CSS.
I can warp them in a parent div if it's needed.
I have tried several things (float, vertical-align), without success.
What I have:
A
B
What I want:
B
A
Any idea?
Thanks
You can do this with order attribute, whenever you assign a flex display to the parent element.
So in order to do this, you just have to create two div and wrap them within a parent, then make your parent display as flex by then, children of that parent will follow the flex rules. One of the available attributes for flex items is order which you can define for each of the children and gave them sequence number (1, 2, 3, ...) then the child with the lower value will appear first and so on.
.container{
display: flex;
flex-direction: column;
}
.first {
order: 2;
}
.second {
order: 1;
}
<div class="container">
<div class="first">A</div>
<div class="second">B</div>
</div>
Try this with the 2 text divs in a container
body {
font: 400 16px/1.5 sans-serif;
}
.text-wrap {
position: relative;
}
.text-1 {
position: absolute;
top: 1.5em; /* same as line-height */
}
.text-2 {
position: absolute;
top: 0;
}
<div class="text-wrap">
<div class="text-1">
AAA
</div>
<div class="text-2">
BBB
</div>
</div>
.container{
display:flex;
flex-direction: column-reverse;
}
.child{
width: 50px;
height: 50px;
background-color:red;
margin: 10px;
}
<div class="container">
<div class="child">a</div>
<div class="child">b</div>
</div>
Using flex-direction you can move the children of a container
Related
I'm working on a slider that has previous button, content and next button as sibling nodes. I'm hiding disabled buttons and I need to adjust the margin for the content
I'm having difficulties with the selectors. I want to target the container to adjust the margin based on if the button is disabled or not. My initial idea was to do this with flex but it's an old
I've been trying something like
.content {
&:not(+ .button-disabled) {
margin-left: 50px;
}
}
but it seems I'm not allowed to have a +inside :not(). Is there any other way I can target this?
You can define a class to the parent container of the three siblings, like
<div class="disabled-button">
<div class="prev"></div>
<div class="cont"></div>
<div class="next"></div>
</div>
And define CSS for them, like:
.wrapper {
width: 80%;
height: 30px;
display: inline-flex;
}
.wrapper > div {
width: 33%;
height: 100%;
border: 1px solid black;
background-color: green;
}
.wrapper.disabled-button .prev {
margin-left: 50px;
}
<div class="disabled-button wrapper">
<div class="prev"></div>
<div class="cont"></div>
<div class="next"></div>
</div>
<div class="wrapper">
<div class="prev"></div>
<div class="cont"></div>
<div class="next"></div>
</div>
I have no control of the html. I have a parent with multiple children.Only some of them must be in the same row, while the rest of them stay unaffected and one of them must take up all the extra space. Content is auto generated and % is not an option.
Other options except inline to place on the same row to avoid the problem are welcome as well.
.parent {
background: red;
}
.same-row-child {
background: green;
display: inline-flex;
}
<div class="parent">
<div class="other-child">A</div>
<div class="same-row-child">B</div>
<div class="same-row-child">C</div>
</div>
To sum up: Α in the first line unaffected.
B+C in the same line with B taking up all the extra space.
If the idea is to use flex, then it should be the parent the flex box:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
display:flex; display:inline-flex; It enables a flex context for all its direct children.
.parent {
background: red;
display: flex;
flex-wrap: wrap;
}
.other-child {
width: 100%;
}
.same-row-child {
background: green;
}
.parent :last-child {
flex: 1;
margin-left:2px;
}
<div class="parent">
<div class="other-child">A</div>
<div class="same-row-child">B</div>
<div class="same-row-child">C</div>
</div>
looks like not the option you would use See next option
The oldish way is float and overflow, and the one to float is the one that comes first and is supposed to shrink on itself.
see https://css-tricks.com/all-about-floats/
Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts.
.parent {
background: red;
}
.other-child {}
.same-row-child {
float: left;
background: green;
margin-right: 2px;
}
.parent :last-child {
float: none;
overflow: hidden;
margin: 0;
}
<div class="parent">
<div class="other-child">A</div>
<div class="same-row-child">B</div>
<div class="same-row-child">C</div>
</div>
I'm trying to create a full height header and have one element centre and another element at the bottom.
I have always used position: absolute; to do this, but I would like to use flex instead.
.full-header {
background-color: green;
display: flex;
}
.align-item-center {
background-color: blue;
}
.align-item-end {
background-color: red;
}
<div class="container full-header">
<div class="align-item-center">
Row 1
</div>
<div class="align-item-end">
Row 2
</div>
</div>
I have attached a diagram to help communicate what I'm trying to do. I am also using bootstrap 4, although if someone can point me in the direction of native flex, that would also be great.
You can achieve this by doing the following:
Set the flex-direction of .full-header to column. This will order the child divs from top to bottom
Add an automatic top and bottom margin to .align-item-center. This will ensure that the top and bottom margins of .align-item-center will automatically extend to occupy the available space in .full-header
body {
margin: 0;
}
.full-header {
background-color: green;
display: flex;
flex-direction: column;
height: 100vh;
}
.align-item-center {
background-color: blue;
margin: auto 0;
}
.align-item-end {
background-color: red;
}
<div class="container full-header">
<div class="align-item-center">
Row 1
</div>
<div class="align-item-end">
Row 2
</div>
</div>
I have a div with elements that may dynamically get added and removed. Is it possible to define a css class that makes sure that the corresponding element is always displayed as the first child of the div (i.e. on top)
Or do I need to attach an on change event listener to the div to move the child to the top via js?
You can use display: flex on the parent, then use the order attribute on the child to put it where you want.
ul {
display: flex;
flex-direction: column;
}
.first {
order: -1;
}
<ul>
<li>asdf</li>
<li>asdf</li>
<li class="first">first</li>
</ul>
here's the fix:
HTML
<div>
<p>Must not be first 1</p>
<p>Must not be first 2</p>
<p class="first">Must be first</p>
<p>Must not be first 3</p>
</div>
CSS
div {
display:flex;
flex-flow:column wrap;
}
.first {
order:-1;
}
https://jsfiddle.net/rp1m8874/
It's a bit hacky, but you can add a class to the one that needs to stay first and then set position: absolute; top: 0 on it. You'll have to push all other elements down by the first one's height though.
.container {
position: relative;
}
.container div {
position: relative;
top: 15px;
height: 15px;
}
.container div.first {
position: absolute;
top: 0;
}
<div class="container">
<div>
another div
</div>
<div class="first">
I should be first
</div>
<div>
another div
</div>
</div>
Yes if you are using Jquery :
$("#yourContainer").prepend("<div>This div will be first!</div>");
In a responsive layout, I have two columns. The left column is the sidebar and the right column is the content.
Using a media query, when the screen width is tiny, the columns turn to 100% width and stack on top of each other.
In this case, I want the sidebar (the first div) to appear beneath the content (the second div).
I tried using float: right on a small screen once it's at 100%, but at 100% width, the float apparently doesn't matter.
.left, .right {
width: 100%;
float: left;
background: green;
}
.left {
float: right;
background: red;
}
.half {
width: 50%;
}
.space {
width: 100%;
display: block;
height: 40px;
}
And on the page:
<div class="left half"> <!-- To mimic full screen size -->
Left
</div>
<div class="right half">
Right
</div>
<div class="space"></div>
<div class="left"> <!-- To mimic small screen size -->
Left
</div>
<div class="right"><!-- This should appear first -->
Right
</div>
Here is the fiddle: https://jsfiddle.net/ph09frvw/
I'm sure this is not the first time someone wanted to wrap the sidebar under the content, I just haven't been able to find a solution.
You can use display: flex and use the order property to change the order of the <div> elements. While floating can be helpful for horizontal alignment, it will be of little help for vertical alignment, Here is an example:
.flex {
display: flex;
flex-flow: row wrap;
}
.left {
order: 2;
flex: 1 0 50%;
background: red;
}
.right {
order: 1;
flex: 1 0 50%;
background: green;
}
.full {
margin-top: 20px;
}
.full > .left,
.full > .right {
flex: 1 0 100%;
}
<div class="flex">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="flex full">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
You could use the display:flex; property combined with flex-direction to reorder your divs. Ref: https://css-tricks.com/almanac/properties/f/flex-direction/
Remember to reference your related class-names in your HTML elements' class attribute.
Your CSS display:block should do the trick, else try something like:
float: left
When you use: display:block on a div element, you do not need to specify width:100% as it should automatically span across the width if it is not hindered by anything else.
Make sure the position of these elements are "relative", else it may not work as expected; it may be stated globally that some specific tags should be displayed "absolute" and that may break what you're trying to achieve.