I have the following divs below:
.parent {
padding: 10px;
background: grey;
}
.child {
background: green;
display: block;
position: relative;
width: 50px;
}
.stacked {
left: 0px;
}
.three {
left: 200px;
}
<div class="parent">
<div class="child stacked">div1</div>
<div class="child stacked">div2</div>
<div class="child three">div3</div>
</div>
This looks like the following:
I would like divs 1 and 2 to stack as they do, but since div3 does not collide with the divs above, I'd like it to vertically aline with div 1.
If I switch display to inline or inline-block, it pushes div 2 to the right of div one. and the left values are not accurate to the parant.
The left values of the divs will be dynamically generated so I cannot know if the divs are overlapping or not.
Is this possible?
Edit: If you really want to align the 3rd div using positioning, then you can do it like so:
.parent {
padding: 10px;
background: grey;
position: relative;
}
.child {
background: green;
display: block;
position: relative;
width: 50px;
}
.stacked {
position: relative;
left: 0px;
}
.three {
position: absolute;
left: 200px;
top: 10px;
}
<div class="parent">
<div class="child stacked">div1</div>
<div class="child stacked">div2</div>
<div class="child three">div3</div>
</div>
You can use the column-count property like so:
.parent {
padding: 10px;
background: grey;
column-count: 2;
}
.child {
background: green;
display: block;
width: 50px;
}
<div class="parent">
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>
Or you can use flexbox to wrap vertically, like so:
.parent {
padding: 10px;
background: grey;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 50px;
}
.child {
background: green;
display: block;
width: 50px;
}
<div class="parent">
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>
Here's using grid:
.parent {
padding: 10px;
background: grey;
display: grid;
grid-auto-flow: column;
grid-template-rows: 1fr 1fr;
}
.child {
background: green;
display: block;
width: 50px;
}
<div class="parent">
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
</div>
Try this :
wrap div3 item in another div and give it a class property of flex-container.
.flex-container {
align-content: flex-start;
}
Ensure the flex direction is horizontal.
Related
To keep things neat and short:
https://jsfiddle.net/m53ockLu/
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-x: scroll;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally? I'm totally out of ideas, I thought that overflow-x & overflow-y should do the trick, but no dice.
Thank you very much for any help.
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally?
No.
I tried Ethan's suggestion and couldn't get the purple box to visibly overflow the scrollbar:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-y: scroll;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
I don't think the browser will let you overflow the scrollbar, I even put z-index, explicitly said to visibly overflow, played around with the position property etc.
Consider this example of letting the content dictate the size:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: max-content;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
background: green;
}
.first {
display: block;
height: 20px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
You made the parent div sidebar have overflow-x: scroll;, overflow-y: auto;. Instead, make each child have its own overflow properties instead of the parent.
I want .board element to have a square aspect ratio. I want to show two of them side by side, together covering the width of their parent.
I don't want to use width: 50%, because I want to position .wrap element with display: flex.
.board {
position: relative;
background: red;
width: 100%;
height: 0;
padding-bottom: 100%;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></div>
</div>
When I do it like this, I get two divs with squashed width.
Use aspect-ratio and flex:1
.board {
position: relative;
background: red;
flex:1;
aspect-ratio:1/1;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></div>
</div>
Alternatively flex:1 and padding-bottom:50%;
.board {
position: relative;
background: red;
flex: 1;
padding-bottom: 50%;
border: 1px solid black;
}
.wrap {
display: flex;
}
<div class="wrap">
<div class="board"></div>
<div class="board"></div>
</div>
I am trying to achieve this using flexbox:
I know how to do it by using a hidden element as in this fiddle:
.container {
display: flex;
justify-content: space-between;
border: 3px solid blue;
}
.box {
width: 100px;
height: 100px;
background: red;
}
.box:first-child {
visibility: hidden;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
But this seems like too hacky to be right.
Use the flex property that sets the flexible length on flexible items. That way, I'm telling the white-box to take all available space but the first white-box will be 50% larger than the normal white -box, that will take the place of what's left
.container {
display: flex;
border: 3px solid blue;
}
.box {
width: 100px;
height: 100px;
background: red;
}
.white-box {
background: white;
flex: 1;
}
.white-box:first-child {
flex: 1.5
}
<div class="container">
<div class="white-box"></div>
<div class="box"></div>
<div class="white-box"></div>
<div class="box"></div>
</div>
you can easily achieve this kind of layout by using CSS grid
.grid-container {
display: grid;
grid-template-columns: auto 100px 200px 100px;
border: 1px solid blue;
}
.grid-container > div {
text-align: center;
font-size: 30px;
padding: 20px 0px;
}
.red{
background-color: red;
}
<div class="grid-container">
<div>1</div>
<div class="red">2</div>
<div>3</div>
<div class="red">4</div>
</div>
Hope this will be helpful for you
you need to remove
.box:first-child {
visibility: hidden;
}
I have 2 divs inside a parent:
<div class="parent">
<div class="foo1"></div>
<div class="foo2"></div>
</div>
foo1 will have a dynamic height, so I can't use the style below:
height: calc(100% - foo1Height);
Now, what I want to do is make sure that the lower child foo2 never expands outside of the parent div, and to show the scrollbar if it gets too big. I would prefer CSS only solutions.
You can either use flexbox. no markup changes.
.parent {
display: flex;
flex-direction: column;
height: 100px;
}
.foo2 {
flex: 1; /*expand to fit*/
background: silver;
overflow: auto; /*scroll as needed*/
}
<div class="parent">
<div class="foo1">1</div>
<div class="foo2">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
</div>
Or use CSS table, additional markup is required.
.parent {
display: table;
width: 100%;
height: 100px;
}
.foo1, .foo2 {
display: table-row;
}
.cell {
display: table-cell;
position: relative;
}
.foo2 {
height: 100%; /*expand to fit*/
background: silver;
}
.scroll {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto; /*scroll as needed*/
}
<div class="parent">
<div class="foo1">
<div class="cell">1</div>
</div>
<div class="foo2">
<div class="cell">
<div class="scroll">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
</div>
</div>
</div>
How do I place two div's side by side and the third one below them? Like this:
My Current code is like below:
HTML:
<div id="container">
<div class="div-1">div1</div>
<div class="div-2">div2</div>
<div class="div-3">div3</div>
</div>
CSS:
#container {
position: absolute;
}
.div-1 {
float: left;
width: 45%;
padding: 2%;
}
.div-2 {
clear: both;
}
.div-3 {
float: right;
width: 45%;
padding: 2%;
}
You can use Flexbox
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#container div {
padding: 20px;
border: 1px solid black;
margin: 10px;
}
.div-1, .div-3 {
flex: 1 1 0;
}
.div-2 {
flex: 100%;
order: 3;
}
<div id="container">
<div class="div-1">Div 1</div>
<div class="div-2">Div 2</div>
<div class="div-3">Div 3</div>
</div>