I want to align the div on another div. and second div have icon content. my problem is I could not align those divs, one div has an icon the other one is empty.
.outer {
width: 10px;
height: 10px;
}
.inner:before {
content: '\34ds';
left: -6px;
}
<div>
<div class="outer"></div>
<div class="inner"></div>
</div>
Using Flexbox and align-items property:
<div class="container">
<div class="outer"></div>
<div class="inner"></div>
</div>
.container{
display: flex;
align-items: center;
}
More info about flexbox : https://yoksel.github.io/flex-cheatsheet/#flex-grow
Related
This question already has answers here:
Better way to set distance between flexbox items
(40 answers)
Closed 9 months ago.
I'm trying to manipulate divs without using float, using display: inline-block; in my css allows me to get the siblings next to each other within a container div, but with inline-block, I can't space them apart using margin-left: 20px;, margin-right :20px; ... and so on.
I'm sure there's a really simple solution, even if it doesn't involve using display: inline-block;, I just want to avoid floats and preferably avoid padding too.
you can try flex-box method to create space between two div which is inside a div (I conclude that from your question )
.parent{
border:2px solid red;
display:flex;
justify-content:space-around;
}
.parent div{
border:3px solid black;
}
<div class="parent">
<div class="child1">
child1
</div>
<div class="child2">
child2
</div>
</div>
you can also add many child div as you want , they will automatically make place in the parent container.
Here you can see below how i managed to do so without display:inline-block; and this will not break on any device unlike inline-block.
.box {
width: 200px;
height: 200px;
background: #F3F3F3;
color: #000;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
}
.container {
display: flex;
margin-bottom: 40px;
}
.container.two {
justify-content: space-between;
}
.container.three {
justify-content: space-evenly;
}
Margin 20px in between
<div class="container">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Align boxes on left and right according to width
<div class="container two">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Align even spacing on left and right
<div class="container three">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I have two elements: a back-button and a Headline. Both should be in the same row, the back button should be left aligned and the Headline should be centered.
Let's take this example:
<div class="wrapper">
<div class="button">
<button>Back</button>
<div class="headline">
<h2>Headline</h2>
</div>
</div>
</div>
What do I have to do in CSS to get this result:
Image
I tried using Translate X, but of course this solution isn't a responsive one, that's why I am searching one for all view-ports.
Big thanks and have a good rest of the weekend!
Center everything in wrapper using flexbox, then move button to the left with absolute positioning.
.wrapper {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
button {
position: absolute;
left: 0;
}
<div class ="wrapper">
<button>Back</button>
<h2>Headline</h2>
</div>
Here's an easy way to do this if you know that it'll just be these 2 elements inside of the .wrapper container.
What you do is set the .wrapper to position: relative;, then set .button to position: absolute; this will allow you to position the .button inside of the .wrapper without taking up any space inside of the div. Then you set the .header to width: 100%; and text-align: center;
You'll need to play around with mobile, since the button will span over the header, at that point I would probably stack the elements to make it easier to for the user to click the back button.
.wrapper {
position:relative;
background: #dedede;
}
.button {
position:absolute;
left:0;
top:50%;
transform:translate(0, -50%);
}
.headline {
width:100%;
text-align:center;
}
<div class ="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class ="headline">
<h2>Headline</h2>
</div>
</div>
This solution is using css flex.
.wrapper{
display: flex;
flex-direction:row;
justify-content: flex-start;
align-items: baseline;
}
.headline{
display: flex;
flex-direction:row;
justify-content: center;
width:100%;
}
<div class ="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class ="headline">
<h2>Headline</h2>
</div>
</div>
<div class="wrapper">
<div class="button" style="float: left;">
<button>Back</button>
</div>
<div class="headline">
<h2 style="text-align: center;">Headline</h2>
</div>
</div>
Actually, this is not exactly what you want.
But very simple and tricky way.
Another easy way using css flex:
.wrapper {
display: flex;
align-items: center;
}
.headline {
margin: auto;
}
<div class ="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class ="headline">
<h2>Headline</h2>
</div>
</div>
using CSS GRID
this is responsive! centered,
and all the CSS code is in the parent selector!
(with flex, you will write a lot for this simple thing)
explanation
place-items are for centering. (is like writing justify-.. and align-..)
grid-template-column is for specifying how the grid should be (there are many ways to set the grid, but this is the shortest)
in fact, AUTO gets the width of the element and set to it, but 1FR gets
(AllWidthParent-AutoChildWidth)
Code
<div class="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class="headline">
<h2>Headline</h2>
</div>
</div>
<style>
.wrapper {
display: grid;
grid-template-columns: auto 1fr;
place-items: center;
width: 100%;
}
</style>
https://jsfiddle.net/laaouatni/vg5L38am/1/
Trying to put one div on the right side, other one on the left.
I have 1 div with 2 divs inside.
float: right to parent div and text/image.
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCHBOOK</h1>
</div>
<div class="right">
<h3>Luka Crypto</h3>
<div id="circle"></div>
</div>
</div>
Codepen: https://codepen.io/Cryptooo/pen/rXGdoP
Two divs on opposite sides.
You can achieve this by styling .navigation as a flexbox with justify-content: space-between;:
.navigation {
display: flex;
justify-content: space-between;
}
.left {
background: red;
}
.right {
background: blue;
}
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCHBOOK</h1>
</div>
<div class="right">
<h3>Luka Crypto</h3>
<div id="circle"></div>
</div>
</div>
From your codepen, the .navigation element is a flex container. So, remove the float: right on the .right element and add margin-left: auto to "push" it over to the right side.
.right {
display: flex;
align-items: center;
margin-left: auto;
}
This is recommended from the flexbox spec in Aligning with auto margins
.left {
float: left;
}
.right {
float: right;
}
<div>
<div class="left">
<h3>TWITCHBOOK</h3>
</div>
<div class="right">
<h3>Luka Crypto</h3>
</div>
</div>
I've read many posts on flexbox but still have an issue that bugs me.
I want to have a sticky footer using flexbox as per this guide.
But then, inside my page content I would like to have as many nested divs I like and have them taking the same height of the parent.
The problem is, setting height: 100% on each child (as I would do in a non-flexbox scenario) works differently when flexbox is enabled. This results in the children getting more height (overflow the parent).
To make this more clear here's a codepen without flexbox
and a codepen with flexbox
You can see in the flexbox scenario the footer gets the green bakground even if I don't want that.
HTML:
<div class="sticky-footer-container">
<div class="sticky-footer-content">
<div class="page-container">
<div class="main-menu">
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-footer">
Some footer content
</div>
</div>
SCSS:
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
background: silver;
padding: 0;
margin: 0;
}
.sticky-footer-container {
height: 100%;
display: flex;
flex-direction: column;
.sticky-footer-content {
height: 100%;
background: blue;
flex: 1;
div {
height: 100%;
}
.main-menu-selection {
height: 50%;
}
}
}
.some-other-class {
background: green;
}
In order to solve this, ANY nested div has to become a flex-container ?
In other words, is there any way to "stop the flex propagation" at some point of the tree, so all the divs gets the parent height without overflow?
display:flexbox is not really a valid value :)
you need to set height as well and eventually inherit it from html :
.sticky-footer-container {
display: flex;
flex-direction: column;
}
.sticky-footer-content {
flex: 1;
}
/* let's inherit some height to pull the footer down */
html,
body,
.sticky-footer-container {
height: 100%;
margin: 0;
}
.sticky-footer {
display: flex;/* flex item can be flexboxes as well */
background: turquoise;
align-items: center;
justify-content: center;
min-height: 3em;
}
<div class="sticky-footer-container">
<div class="sticky-footer-content">
<div class="page-container">
<div class="main-menu">
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
<div class="main-menu-selection">
<div class="main-menu-selection-text">
<div class="some-other-class">
Some text
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sticky-footer">
Here my footer
</div>
</div>
I have the following HTML structure:
<div id="outer">
<div id="left">
<div id="leftContainer"><span>bla</span><span>bla</span><span>bla</span><span>bla</span></div>
</div>
<div id="right">
<div class="item"><span>item text 1</span></div>
<div class="item"><span>item text 2</span></div>
<div class="item"><span>item text 3</span></div>
<div class="item"><span>item text 4</span></div>
<div class="item"><span>item text 5</span></div>
<div class="item"><span>item text 6</span></div>
</div>
</div>
With the corresponding styles:
#left, #right {
display: inline-block;
}
.item {
display:inline-block;
padding: 0px 5px;
}
#right {
position: absolute;
/*right:0px;*/ /*this little thing causes my problems*/
text-align:right;
border-color: red;
}
I need the right div to be right aligned. For that I set right:0px; but then the right element overlap the left div. If right:0px; is not set, then the item elements will break on a new line (which is part of my requirements) but the right element will be, obviously, left aligned. See the fiddle, comment/uncomment right:0px; and play with the width of the result panel.
Is the a way of right aligning the right div without overlapping? Floating is currently not a solution.
I'm not entirely clear on how the right div is supposed to behave after the 'collision' point but flexbox does allow for the alignment you wanted without the overlap that seems to be problematical for you.
#outer {
position: relative;
display: flex;
justify-content: space-between;
}
#outer {
position: relative;
display: flex;
justify-content: space-between;
}
div {
border: 1px solid black;
}
#left div span {
margin: 0px 5px;
display: inline-block;
}
.item {
display: inline-block;
padding: 0px 5px;
}
#right {
text-align: right;
border-color: red;
}
<div id="outer">
<div id="left">
<div id="leftContainer">
<span>bla</span>
<span>bla</span>
<span>bla</span>
<span>bla</span>
</div>
</div>
<div id="right">
<div class="item"><span>item text 1</span>
</div>
<div class="item"><span>item text 2</span>
</div>
<div class="item"><span>item text 3</span>
</div>
<div class="item"><span>item text 4</span>
</div>
<div class="item"><span>item text 5</span>
</div>
<div class="item"><span>item text 6</span>
</div>
</div>
</div>
JSFiddle Demo
As i understand you need something like following.
Use display:table-cell will solve your issue:
#left, #right {
display: table-cell;
}
Check Fiddle Here.
Give width: 100%; to .right wills stick right div to right align.
Check Updated Fiddle Here.
Use the flexbox model display: flex for your #right element.
#outer {
overflow: hidden;
}
#left {
float: left;
min-width: 66%;
background-color: #69f;
}
#right {
min-width: 34%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: stretch;
}
.item {
display: inline-block;
}
See example here: http://jsbin.com/qalilu/3/edit. I've added a min-width constraint, which may be useful.
See browser support: http://caniuse.com/#search=flexbox
And a guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/