This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 11 months ago.
I made a menu whose container using flexbox, I want this menu to only have 2 columns, and if there are many menus it can only scroll vertically not horizontally. But I want each menu to have a close distance. I've made the code and css like the snippet below, but when there is a menu that has many children, the menu next to it has too much gap. how to solve this?
.menu-dropdown{
height: 200px;
overflow:auto;
}
.wrapper-container{
min-width: 560px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-height: 300px;
}
.menu-item{
max-width: 50%;
width: fit-content;
display: flex;
}
<div class="menu-dropdown">
<div class="wrapper-container">
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
<div class="menu-item">
<ol>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, molestiae.</li>
</ol>
</div>
</div>
</div>
No, row-flex ain't gonna work here. If you want a vertical scroll, column-flex will work neither.
The behaviour you are trying to achieve is created via columns:
.wrapper-container{
columns: 2;
}
.menu-item{
break-inside: avoid-column;
}
Here's an example codepen
Related
.mn2 {
display: grid;
grid-template-columns: 30vh 30vh;
grid-template-rows: 30vh 30vh;
grid-gap: 5px 5px;
height: 50vh;
border: 3px dashed red;
}
<div class="mn2">
<div class="box2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
</div>
<div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="box4">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div>
<div class="box5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>
You should let the content define box height & widths. By setting everything to auto..
you can set height of the boxes with grid-auto-rows: [first-row-height] [second-row-height]; for eg
grid-auto-rows: 200px 200px;
.mn2 {
display: grid;
grid-template-columns: auto auto;
grid-auto-rows: 200px 200px;
grid-gap: 5px 5px;
height: auto;
}
.mn2>div {
padding: 1rem;
background-color: gray;
}
<div class="mn2">
<div class="box2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
</div>
<div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="box4">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div>
<div class="box5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>
Try this:
.mn2 {
display: grid;
grid-template-columns: 24% 24% 24% 24%;
grid-gap: 5px 5px;
height: auto;
border: 3px dashed red;
}
<div class="mn2">
<div class="box2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
</div>
<div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="box4">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div>
<div class="box5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>
HTML:-
ul {
list-style-image: url(https://i.stack.imgur.com/yGSp1.png);
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
</ul>
I am trying to put image as bullet in list item but the issue is image and list item text is not in same line.
screenshot of output here
image link (images is 16px X 16px)
You can use it as a pseudo element and you will have better control on the position and also the size:
ul {
list-style:none;
}
li {
position:relative;
}
li:before {
content:"";
position:absolute;
top:2px;
left:-20px;
width:16px;
height:16px;
background:url(https://i.stack.imgur.com/yGSp1.png);
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
</ul>
Lets say there is something like this:
<div class="parent">
<div class="child">
</div>
</div>
How to make parent to occupy the entire screen height?
And how to make child to be scrollable, if its height exceeds the parent height(which is screen max height).
I tried something like this:
.parent{
height: 100vh;
}
.child{
overflow: auto;
}
Apply overflow rule to the parent div, see working example below:
html, body {
height: 100%;
margin: 0;
font-family: sans-serif;
}
.parent {
overflow: auto;
height: 100vh;
padding: 10px;
border: 1px solid #ccc;
}
.child span {
height: 100vh;
display: block;
background: gray;
padding: 10px
}
.child span:nth-child(odd) {
background: lightgray
}
<div class="parent">
<div class="child">
<span>Child container 1</span>
<span>Child container 2</span>
<span>Child container 3</span>
</div>
</div>
Instead of your CSS, try to apply this CSS:
html, body{
overflow:hidden;
}
.parent{
height: 100vh;
overflow: scroll;
}
Here is the link to the fiddle supporting it.
html,
body {
overflow: hidden;
}
.parent {
height: 100vh;
overflow: scroll;
}
<div class="parent">
<div class="child">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit
amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing elit"Lorem ipsum dolor sit amet, consectetur adipisicing
elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet,
consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing
elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet,
consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing
elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit" "Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum
dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit""Lorem ipsum dolor sit amet, consectetur adipisicing elit"
</div>
</div>
I'm trying to make 2 divs with the same height:
http://image.prntscr.com/image/32ca3f340fba4e2dbd3c7d1e434f0938.png
<div class="parent">
<div class="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="large">
Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
</div>
</div>
Example
.parent {
background: red;
}
.small {
background: blue;
float: left;
width: 65%
}
.large {
background: green;
float: right;
width: 35%
}
.clear {
clear: both
}
<div class="parent">
<div class="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="large">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit
<br>
</div>
<div class="clear">
</div>
</div>
I want dynamic(large one) div to have the same height as static(small one) div. Dynamic div is always longer than static div. I have to do it with css (no jquery). I've found several solutions how to make static div as large as dynamic(e.g. table or flex), but I couldn't find any solution how to make dynamic as small as static.
CSS - Equal Height Columns? - is not the answer. Here columns are made all as large as the longest one.
Once more: I need to make dynamic div as small as static. Dynamic div should have scrollbar.
Another limitation - parent, static and dynamic div height/width should not be set to some permanent value in px.
Here is the trick.
Add position: relative on parent.
Place your dynamic div element (With large height) with position: absolute inside parent.
Following css will be needed for this:
.parent {
position: relative;
}
.large-div {
position: absolute;
overflow: auto;
left: 300px;
bottom: 0;
top: 0;
}
Note: You can change left, bottom and top values as per your needs.
.container {
border: 1px solid #000;
margin-bottom: 20px;
position: relative;
padding: 10px;
}
.container div {
border: 1px solid #000;
padding: 10px;
width: 250px;
}
.container div p {
margin: 0;
}
.large {
position: absolute;
overflow: auto;
bottom: 10px;
left: 300px;
top: 10px;
}
<div class="container">
<div class="small">
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
</div>
<div class="large">
<p>
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
</p>
</div>
</div>
<div class="container">
<div class="small">
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
</div>
<div class="large">
<p>
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...
</p>
</div>
</div>
If i understand correctly, there is a fixed height div, e.g. 150px which has fixed content in, and a dynamic div which could have lots of content in.
the best thing to do is set a height for both, and then add this to the dynamic div:
overflow-y: scroll
.parent-div div {
width: 50%;
padding: 15px;
box-sizing: border-box;
float: left;
height: 150px;
border: solid 1px grey;
}
.dynamic-height {
overflow-y: scroll;
}
<div class="parent-div">
<div class="fixed-height">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="dynamic-height">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
I have a structure which cannot be changed due to some reasons.Here is the structure:
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width: 200px; height: 200px; background: #f1f1f1">container</div>
I want to get this particular layout using CSS only, ie. no positions, negative margins etc. The HTML elements will remain in same flow - h1, p and div. Is it possible to do this?
This should work for you. The main thing is to put float: left on the left hand div.
<style type="text/css">
#wrapper {
width: 90%;
}
#container {
float: left;
width: 200px;
height: 150px;
background-color: #666;
margin: 0 10px 10px 0;
}
H1 {
font: bold 2em arial;
}
P {
background-color: #ccc;
}
</style>
<div id="wrapper">
<div id="container">#container</div>
<h1>Heading</h1>
<p>
Some text.
</p>
</div>
Example fiddle
Of course you can do that in CSS only! :)
I know this is an old question, but its a fun challenge. The trick is to create a pseudo element before the h1 that floats left to create the space for the container div.
I'm sure there are many other ways to do this...
div {
position:absolute;
top:0;
}
h1::before {
content:'';
float:left;
width:200px;
height:200px;
margin-left:20px;
}
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consecadipiem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet]consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sitg elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. SeLorem ipsum dolor sit amet, consectetur adipiscing elit. Se</p>
<div style="width:200px; height:200px; background:#f1f1f1">container</div>