i have trouble understanding the space around property of justify content, in flexbox, look at this little pen to illustrate :
https://codepen.io/Ziratsu/pen/gewEPO
I want two div to be on the same line but separate with some distance, what the space around gives me here is good, but if I want to add more space between these two div ? And what if I want to shrink it?
I've searched and tried to add some Id's to my divs and change the margin or padding, but it's not working.
The HTML
<div class=conteneur1>
<div class="sub"></div>
<div class="sub"></div>
</div>
the CSS
.conteneur1 {
display: flex;
justify-content: space-around;
}
.sub{
border-style: solid;
background: pink;
width: 50px;
height: 50px;
}
I hope you get my question, I mean it's frustrating to not change the width between them as I wish to, and I hope it is possible, if not every pages on the internet will look the same with space around.
You can play with margin to increase/decrease the size between them
body {
background: gray;
}
.conteneur1 {
display: flex;
justify-content: space-around;
}
.sub {
border-style: solid;
background: pink;
width: 50px;
height: 50px;
}
<div class=conteneur1>
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class=conteneur1>
<div class="sub" style="margin-right:30px;"></div>
<div class="sub" style="margin-left:30px;"></div>
</div>
<div class=conteneur1>
<div class="sub" style="margin-right:-30px;"></div>
<div class="sub" style="margin-left:-30px;"></div>
</div>
Another idea is to use a hidden element between them to control the distance:
body {
background: gray;
}
.conteneur1 {
display: flex;
justify-content: center;
}
.conteneur1:before {
content:"";
width:var(--s, 100px);
}
.sub {
border-style: solid;
background: pink;
width: 50px;
height: 50px;
}
.sub:first-child {
order:-1;
}
.sub:last-child {
order:2;
}
<div class=conteneur1>
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class=conteneur1 style="--s:50px;">
<div class="sub" ></div>
<div class="sub"></div>
</div>
<div class=conteneur1 style="--s:150px;">
<div class="sub"></div>
<div class="sub"></div>
</div>
Or you can use two hidden elements on both sides to control the distance also:
body {
background: gray;
}
.conteneur1 {
display: flex;
}
.conteneur1:before,.conteneur1:after {
content:"";
width:var(--s, 100px);
}
.sub {
border-style: solid;
background: pink;
width: 50px;
height: 50px;
}
.sub:first-child {
margin-right:auto;
}
.sub:last-child {
margin-left:auto;
}
<div class=conteneur1>
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class=conteneur1 style="--s:50px;">
<div class="sub" ></div>
<div class="sub"></div>
</div>
<div class=conteneur1 style="--s:150px;">
<div class="sub"></div>
<div class="sub"></div>
</div>
Related
If i have a paragraph inside a div, is it possible to make the div expand to the left instead of to the right, when the paragraph gets longer? I know there are several threads on this, and i have tried with direction: rtl etc, but nothing seems to work for me.
Here is some code.
https://codepen.io/haa123/pen/oNxaqwE
HTML:
<div id="container">
<div id="container1">
<p>Lorem ipsum</p>
</div>
<br>
<div id="container2">
<p>Expanding to the right</p>
</div>
CSS:
#container {
position: absolute; left: 50%;
}
#container1 {
background-color: red;
display: inline-block;
}
#container2 {
margin-top: 5px;
background-color: red;
display: inline-block;
}
Here are some photos to illustrate.
This is what I have at the moment:
This is what I want to achieve:
Thanks!
.bricklet {text-align: right}
.bricklet .content {display: inline-block}
.bricklet .content.hidden {display: none}
<div class="bricklet">
<div>Expander</div>
<div class="content hidden">Expanded content</div>
</div>
use css grid:
<div class='container'>
<div></div>
<div><p>lorem ipsum</p></div>
<div><p>expand</p>
</div>
You can use display flex in your container
#container {
position: absolute;
left: 50%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
#container1 {
background-color: red;
display: inline-block;
}
#container2 {
margin-top: 5px;
background-color: red;
display: inline-block;
}
<div id="container">
<div id="container1">
<p>Lorem aaabcdedfqafasafasfafasf</p>
</div>
<br>
<div id="container2">
<p>Expanding to the right asadasdsaqweqweqweqe</p>
</div>
</div>
I do not know why you used Position:absolute; But if it is really necessary to use it, just by giving text-aligen: right; to your #container, your paragraph will be rtl.
#container {
position: absolute;
left: 50%;
text-align: right;
}
#container1 {
background-color: red;
display: inline-block;
}
#container2 {
margin-top: 5px;
background-color: red;
display: inline-block;
}
<div id="container">
<div id="container1">
<p>Lorem ipsum</p>
</div>
<br>
<div id="container2">
<p>Expanding to the right</p>
</div>
I am trying to design a section which 3 image. I can get the two images to display by block easily. I can float the third image to the right and adjust the height easily. However my issue is it does not align side by side.Below is an example of what I am trying to achieve
This is an example of what I have so far
.image-one,
.image-two {
width: 250px;
background-color: green;
display: block;
margin-top: 10px;
}
.image-three {
float: right;
background-color: lightblue;
width: 250px;
height: 200px;
}
<div class="container">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
<div class="image-three"> Image three </div>
</div>
You should be able to simple add flex to the container, and then add the content within a left and a right div.
Here's a working example:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.image-one,
.image-two {
width: 250px;
height: 95px;
background-color: green;
margin-bottom: 10px;
}
.image-three {
background-color: lightblue;
width: 240px;
height: 200px;
margin-left: 10px;
}
<div class="container">
<div class="left">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
</div>
<div class="right">
<div class="image-three"> Image three </div>
</div>
</div>
You can use flexbox for this:
.container {
display: flex;
flex-direction: column; /* align items in columns */
flex-wrap: wrap; /* wrap to a new column when height is reached */
justify-content: space-between; /* add spacing in between top and bottom image */
height: 210px; /* height of your 2 images plus and spacing you want */
width: 510px; /* width of 2 columns plus any spacing */
}
.image-one,
.image-two {
width: 250px;
height: 100px;
background-color: green;
display: block;
}
.image-three {
background-color: lightblue;
width: 250px;
height: 210px; /* I would make this image the height of the other 2 plus spacing */
align-self:flex-end; /* align this to the right of the container */
}
<div class="container">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
<div class="image-three"> Image three </div>
</div>
Maybe you can add some internal divs like this:
<div class="container">
<div class="container-left">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
</div>
<div class="container-right">
<div class="image-three"> Image three </div>
</div>
</div>
Then, add css to container-left and container-right to properly set the width and the float. Like this:
.container-left, .container-right{
width:250px;
float:left;
}
Why don't you make use of bootstrap columns?
HTML
<div class="container">
<div class="row main-row">
<div class="col-6 left-col">
<div class="row left-col-top">
<!-- Top left image here -->
</div>
<div class="row left-col-bottom">
<!-- Bottom left image here -->
</div>
</div>
<div class="col-6 right-col">
</div>
</div>
</div>
CSS
.main-row {
height:300px;
}
.left-col-top {
background-color:blue;
height:50%;
}
.left-col-bottom {
background-color:red;
height:50%;
}
.right-col {
background-color:green;
height:100%;
}
Easy flexbox solution :)
#main, #left {
display:flex;
}
#left {
flex-direction: column;
flex: 1;
}
.section {
flex: 1;
margin: 2px;
background-color: green;
}
<div id="main">
<div id="left">
<div class="section">Hello</div>
<div class="section">Hello</div>
</div>
<div id="right" class="section">Hello</div>
</div>
I want to display a number and 2 text areas in a row.
The number should be in a "box" , with the background the height of the row and the number it's self should be vertically and horizontally centered in the "box".
I know I could do something like position: absolute; top: 0, left: 0 on the .number but this brings it out of the document flow. and the text, actual number does not get centered.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.number {
background: skyblue;
/*position: absolute;*/
top: 0;
bottom: 0;
vertical-align: middle;
}
.row > div {
display: inline-block;
vertical-align: top;
}
.row {
background: lightgreen;
position: relative;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
EDIT 1: You can see in the snippet that the box is not the full height of the container. That is not what I want.
EDIT 2: I guess you could cheat by using gradient but then I would have to make sure that the text area matches up to where the number box end to make the gradient look like the color is for the number "box".
Use flex display: table-cell
Update 1: show how to create "margin" wíthout using cell padding
Update 2: show a progressive enhancement to use flex when available
*{
box-sizing: border-box;
}
.container {
width: 40%;
}
.number{
background: skyblue;
}
.row > div {
display: table-cell;
vertical-align: middle;
}
.row {
background: lightgreen;
position: relative;
}
/* 3 ways to create a left margin on textArea */
.row .textArea.nr1 { border-left: 10px solid transparent; }
.row .textArea.nr2 { position: relative; left: 10px; }
.row .textArea.nr3 { padding-left: 10px; }
/* feature detect - use flex when available */
#supports (display: flex) {
.row > div {
display: block;
}
.row {
display: flex;
}
.row .number {
display: flex;
align-items: center;
}
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr1">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr2">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea nr3">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
You can use flexbox to achieve that, all modern browsers support it, and with prefixes it also works on IE10.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.row {
background: lightgreen;
display: flex;
}
.number {
background: skyblue;
display: flex;
align-items: center;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
Or, use CSS table making it to work on legacy browsers too.
* {
box-sizing: border-box;
}
.container {
width: 40%;
}
.row {
background: lightgreen;
display: table;
width: 100%;
}
.number,
.textArea {
display: table-cell;
}
.number {
background: skyblue;
white-space: nowrap;
vertical-align: middle;
}
.textArea {
width: 100%;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
*{
box-sizing: border-box;
}
.container{
width: 40%;
}
.number{
background: skyblue;
/*position: absolute;*/
top: 0;
bottom: 0;
vertical-align: middle;
height: 40px;
padding-top: 11px;
}
.row > div{
display: inline-block;
vertical-align: top;
}
.row{
background: lightgreen;
position: relative;
}
<div class="container">
<div class="row">
<div class="number">10</div>
<div class="textArea">
<div class="companyName">Top title</div>
<div class="industry">secondary text</div>
</div>
</div>
</div>
I need the following HTML (jsfiddle):
<div class="main">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
To look something like this:
Not like this:
Can you change your HTML layout a little ?
.main {
display: table;
height: 100px;
border: solid 1px;
}
.inner {
display:table-cell;
vertical-align:middle
}
.top, .bottom {background:yellow;}
<div class="main">
<div class="inner">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>
Check this below.
Just set the display of the parent to table-cell:
.main {
display: table-cell;
height: 100px;
border: solid 1px;
vertical-align: middle;
}
<div class="main">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
position: relative;
top: 50%;
transform: translateY(-50%);
HTML:
<div class="main">
<div class="wrapper">
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>
CSS:
.main {
display: inline-block;
height: 100px;
border: solid 1px;
line-height: 100px;
vertical-align: middle;
}
.wrapper {
line-height: 1em;
display: inline-block;
vertical-align: middle;
}
DEMO: https://jsfiddle.net/q0kLojwx/5/
Probably a fairly basic solution to this, but I can't seem to figure it out... have set up a jsfiddle to demonstrate:
http://jsfiddle.net/AxKq8/1/
HTML
<div class="wrapper">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
<div id="box-3" class="box">
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.box {
width: 50%;
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
float:right;
background-color: green;
position: relative;
top:0px;
right:0px;
}
I have 3 divs. What I'd like to do is have the top of the green div align with the top of the blue div.
As you can see I tried floating the first two divs left, and the third div right. That didn't work, so tried a relative positioning. Also tried using clear aswell, but it's eluding me!
Any suggestions on how to make this work?
Thanks!
Jon
Positioned the third div absolute with top:0
#box-3 {
height: 300px;
float:right;
background-color: green;
position: absolute;
top:0px;
right:0px;
}
Working CODE:JSFIDDLE
You can put the blue and red box in a container, and then a green box in another container. Float the two containers rather than the boxes.
http://jsfiddle.net/AxKq8/9/
HTML
<div class="wrapper">
<div class="container">
<div id="box-1" class="box">
</div>
<div id="box-2" class="box">
</div>
</div>
<div class="container">
<div id="box-3" class="box">
</div>
</div>
</div>
CSS
.wrapper{
width: 100%;
}
.container {
float: left;
width: 50%
}
#box-1 {
height: 200px;
background-color: blue;
}
#box-2 {
height: 100px;
background-color: red;
}
#box-3 {
height: 300px;
background-color: green;
}
Give this a try: JSFiddle
HTML:
<div class="wrapper">
<div class="box-group box">
<div id="box-1" class="box2"></div>
<div id="box-2" class="box2"></div>
</div>
<div class="box-group box">
<div id="box-3" class="box2"></div>
</div>
</div>
CSS:
.wrapper{ width: 100%; }
.box { width: 50%; }
.box2 { width: 100%; }
.box-group { float: left; }
#box-1 { height: 200px; background-color: blue; }
#box-2 { height: 100px; background-color: red; }
#box-3 { height: 300px; background-color: green; }
I created columns with the .box-group class, I grouped the first two items into the first column div so the stacking and floating will appear properly.