I have been searching for a way to put divs next to eachother and found one that "worked" but there is an issue
float: left;
it worked! but it also popped them out of the parent div and it looks silly. the background of the parent div no longer cares about them.
How can I put two divs, side by side, while in another div?
Remove your float and try :
display: inline-block;
Floating elements doesn't normally affect the size of their parent. You can change this by changing the overflow style of the parent.
Example:
.parent { background: red; overflow: hidden; }
.child { float: left; margin: 5px; background: yellow; }
<div class="parent">
<div class="child">child 1</div>
<div class="child">child 2</div>
<div class="child">child 3</div>
</div>
To prevent floated blocks from "popping out" of the parent container, you need to trigger a block-formatting context, which you can do by specifying:
overflow: auto
for the parent container.
.wrap {
border: 1px dotted gray;
background-color: beige;
overflow: auto;
}
.wrap div {
float: left;
width: 200px;
height: 200px;
border: 1px dotted blue;
margin: 10px;
}
<div class="wrap">
<div>One</div>
<div>Two</div>
</div>
Related
I'm a having a bit of an issue here. I have a flexbox container with children of different sizes. Based on quantity and their content children might overflow the parent.
What I want is the children to shrink so they try to fit in the parent container. I did that by adding shrink and overflow properties to the children. So far so good.
.container > div {
background-color: orange;
padding: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
}
I end up with something like this:
Now I want them to shrink but up to a certain point (lets say 80px). I don't care if they end up overflowing the container but I don't want to render any smaller than 80px.
Of course, I added min-width: 80px to the children... but here is my problem. I want the children to shrink up to 80px but I don't want any of those that were smaller than 80px already (like Child1, Child4 and Child5) I don't want them to be enlarged by the min-width property (or, I want them to shrink further up to min-content)
In other words. I don't want this:
I would love to have something like this:
I tried doing something like min-width: min(min-content, 80px) but of course, didn't work.
Here is an small codepen with the issue: https://codepen.io/claudiofpen/pen/QWELVJO
.container {
width: 300px;
border: 1px solid black;
display: flex;
flex-direction: row;
padding: 5px;
}
.container > div {
background-color: orange;
padding: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
min-width: min-content;
}
.container > div:not(:last-child) {
margin-right: 5px;
}
/* I don't want the following css classes, I cannot
tell in before hand which children are going to have
a larger content */
.container > div:nth-child(2),
.container > div:nth-child(3) {
min-width: 80px;
}
<div class="container">
<div>Child 1</div>
<div>Longer Child 2</div>
<div>Longer Child 3</div>
<div>Child 4</div>
<div>Child 5</div>
</div>
Temani Afif's solution solves the problem of ensuring that a text element will not shrink below the specified width unless its intrinsic width is already below that width (in which case it uses its intrinsic width as the rendered width). But it does not work unless the sum of the specified widths of all the child elements exceeds the container's width.
So I tried giving each outer elements a flex-grow parameter, so that they would grow above their specified width, if the container had room. But I also give the outer elements a maximum width set to their intrinsic maximum content width, so they would never grow beyond the actual size of the text. Thus I added the following styles to the wrapping div.
flex: 1 1 auto;
max-width: max-content;
With that tweak I believe it solves the entire problem. The elements expand fully if there is room in the container. As we add more elements the longer elements start to shrink. But they never shrink below their specified width, so the container overflows once all inserted elements have shrunk down to that width. But elements that started with a shorter width never flex at all.
I have added an example below.
.container {
width: 340px;
border: 1px solid black;
display: flex;
flex-direction: row;
padding: 5px;
}
.container>div {
background-color: orange;
padding: 5px;
flex: 1 1 auto;
width: 80px;
max-width: max-content;
}
.container>div>div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
.container>div:not(:last-child) {
margin-right: 5px;
}
<h5>When the items fit they expand to their intrinsic length</h5>
<div class="container">
<div>
<div>Medium length</div>
</div>
<div>
<div>Tiny</div>
</div>
<div>
<div>Longer text element</div>
</div>
</div>
<h5>When the container limit is reached the longer elements start shrinking</h5>
<div class="container">
<div>
<div>Medium length</div>
</div>
<div>
<div>Tiny</div>
</div>
<div>
<div>Longer text element</div>
</div>
<div>
<div>Filler</div>
</div>
</div>
<h5>Adding more elements...</h5>
<div class="container">
<div>
<div>Medium length</div>
</div>
<div>
<div>Tiny</div>
</div>
<div>
<div>Longer text element</div>
</div>
<div>
<div>Filler</div>
</div>
<div>
<div>Filler</div>
</div>
</div>
<h5>When there is no room it overflows<br> The tiny element stays at its intrinsic width, but the bigger elements stop shrinking at the specified width</h5>
<div class="container">
<div>
<div>Medium length</div>
</div>
<div>
<div>Tiny</div>
</div>
<div>
<div>Longer text element</div>
</div>
<div>
<div>Filler</div>
</div>
<div>
<div>Filler</div>
</div>
<div>
<div>Filler</div>
</div>
</div>
With an extra wrapper you can do it:
.container {
width: 300px;
border: 1px solid black;
display: flex;
flex-direction: row;
padding: 5px;
}
.container > div {
background-color: orange;
padding: 5px;
flex-shrink: 1;
width: 80px;
}
.container > div > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
.container > div:not(:last-child) {
margin-right: 5px;
}
<div class="container">
<div><div>Ch 1</div></div>
<div><div>Longer Child 2</div></div>
<div><div>Longer Child 3</div></div>
<div><div>Child 4</div></div>
<div><div>Child 5</div></div>
</div>
Grid Solution
.container {
width: 300px;
border: 1px solid black;
display: grid;
grid-template-columns: max-content 80px 80px repeat(2,max-content);
padding: 5px;
}
You can use javascript to make the grid-template-column dynamic.
Here is the jquery (javascript) solution using flex
.container {
width: max-content;
border: 1px solid black;
display: flex;
padding: 5px;
}
$(".container > div").each(function(){
($(this).width() < 50) ?
$(this).css('width','max-content') :
$(this).css('flex','0 0 80px');
})
This is more dynamic than the grid solution. The only thing is that you will need to have a desired number in $(this).width() < 50 instead of fifty based on your content.
I have the parent's block (red) that should change its size by height relatively the content filling inside the green block.
The green block has an absolute position, and this is a must.
The question is about the content filling of the green block and the logical automatical size changing of the red block.
So, 2 question:
How to center the green block by the horizontal/center?
How to automatically change the red block's height relatively the content filling of the green block?
<body>
<div class="some"></div>
<div class="container">
<div class="main">
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>
</body>
body {
background: purple;
}
.some {
height: 100px;
}
.container {
width: 1030px;
height: 600px;
background: red;
position: relative;
margin: auto;
}
.main {
position: absolute;
background: green;
margin-top: -50px;
width: 400px;
}
.content {
width: 300px;
height: 100px;
background: blue;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
http://jsfiddle.net/xtupmyvf/2/
I have created a sample solution here https://jsfiddle.net/saksham_malhotra/upnrfjm0/
There is a lot going on in your code which is unnecessary and I have written a simplified version of it. The crux is to take care of the display properties to get a good layout.
You need not make the left section absolute positioned to stick it to the left. Just make the wrapping container display: block to not to take the whole width.
My qeustion is that How do I make two divs tag that they function as column?
Another question is how do I make the div element to use only 60% of the page width and center the div within the page?
Is it like div{ margin:auto;width:60%;}?
The easiest way to set up a column layout is to simply have parent containers that have a width as a percentage. If you want two columns, you would have width: 50%, for example. If you are unsure of the percentage value you need, you can calculate this by dividing 100% by the desired number of columns with calc():
width: calc(100% / 3); -- 3 columns (33.33%)
As for setting an element that's centralised with a 60% width, all you need to do is set:
margin: 0 auto;
width: 60%;
Both of these can be seen in the following:
.container {
display: flex;
background: green;
margin: 0 auto;
width: 60%;
}
.parent {
width: 50%;
border: 1px solid #626262;
padding: 10px;
}
.child {
background: cyan;
margin: 20px;
height: 50px;
line-height: 50px;
text-align: center;
}
<div class="container">
<div class="parent left-column">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="parent right-column">
<div class="child">Child 3</div>
<div class="child">Child 4</div>
</div>
</div>
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
I'm trying to float two elements at the right of a "figure" element using flex but it end up floating just div1 at the right of figure and div2 is moved bellow, if I make div1 and div2 narrow enough, they are floated inline at the right of figure.
This is the CSS:
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
Desired Result:
Actual Result:
How it works?
First, you make a flex-container (flexc in this case) and apply the display:flex property on it which aligns the elements by default in row alignment. If you want an element to preserve its dimensions set it to flex:0 0 auto; else you can make use of flex:1; which shrinks or grows as the browser is resized.
Then to align the contents in column (div1 and div2) you can just wrap then in a different container and since div isn't an inline container, and the flex property doesn't have any effect on any other than the direct children of the flex parent, they are aligned in seperate lines.
.flexc {
display: flex;
justify-content: flex-start;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
<div class="flexc">
<div id="fig">Figure</div>
<div class="col">
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
</div>
Without altering the html:
.flexc {
display: flex;
flex-direction:column;
position:relative;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
position:absolute;
left:250px;
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d2{
top:70px;
}
<div class="flexc">
<div id="fig">Figure</div>
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
Not sure what your HTML looks like, but display: flex is best used on the container wrapping all the elements you want aligned. Imagine it to be the largest box that you put smaller boxes inside.
Codepen example demonstrating this: https://codepen.io/corviday/pen/VyYdar
Following this hierarchy with .container as your largest box, since you want two columns, you can divide it further into two smaller boxes (.left in red and .right in blue in this case).
From there you would need to group div1/div2 together to float the way you'd like, and would be the items that fill the box .right.
You can use Bootstrap to resolve or put div1 and div2 in one div main to drop div main
Bootstrap exemple
<div class='container'>
<div class="col-md-12">
<div class="col-md-6">
1 text
</div>
<div class="col-md-6">
<div class="col-md-6">
2 text
</div>
<div class="col-md-6">
3 text
</div>
</div>
</div>
</div>
I think the best layout engine to use for your use case is hinted at in your description of the problem: Floats.
Here is a solution that doesn't require you to alter your html.
<div class="container">
<div class="medium-box">figure</div>
<div class="small-box">div 1</div>
<div class="small-box">div 2</div>
</div>
.container{
width: 500px;
}
.medium-box {
height: 200px;
width: 200px;
margin: 10px;
background: grey;
float:left
}
.small-box {
float:left;
height: 30px;
width: 200px;
background: blue;
margin: 10px;
}
https://codepen.io/stacyvlasits/pen/aVPZbY
I'm trying to position a few elements in a row, so that they all fit in the width of the container. To prevent them from word-wrapping I added "white-space: nowrap" to the parent, and added "white-space: normal" to the children to allow them to wrap the text (as desired).
The problem is that with this configuration the right most child sometimes exceeds the width of the parent.
HTML:
<div id="container">
<div class="child">
child 1
</div>
<div class="child">
child 2 text that might be long enough to wrap, but still exceed the parent
</div>
</div>
CSS:
#container {
white-space: nowrap;
width: 200px;
background: yellow;
border: 1px solid brown;
padding: 5px;
}
.child {
display: inline-block;
border: 2px solid red;
vertical-align: top;
white-space: normal;
}
http://jsfiddle.net/7e5TU/1/ (change the length of the text if the problem doesn't appear straight away).
I know that I can solve it with a table, and probably with a float on the left child, and "overflow: hidden" on the right, but I see no reason why this should not work.
Could anyone provide some insights? I'd mostly love to understand what in the box model causes this behavior. Thanks!
I agree with #hashem That's the expected behavior. By using white-space: nowrap; for the parent, you've collapsed the whitespaces between inline(-block) elements. white-space treats the children, not the element itself.
Well if you still need a fix you can add width to second child to make it fit inside container.
fiddle
e.g.
.child2
{
width: 70%;
}
If you are willing to use flexbox (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes) you could do it like this:
http://jsfiddle.net/7e5TU/6/
HTML
<div id="container">
<div class="child1">
child 1
</div><div class="child2">
child 2 text that might be long enough to wrap,
but still exceed the parent
</div>
</div>
CSS
#container {
width: 200px;
background: yellow;
border: 1px solid brown;
padding: 5px;
display: flex;
flex-direction: row
}
.child1, .child2 {
display: block;
border: 1px solid red;
vertical-align: top;
}
.child1 {
min-width: 50px;
}
You can do this with CSS display:table. This way no sizing details are needed.
It ensures the elements stay in a row and the text will wrap perfectly to the width of the parent container.
HTML
<div class='container'>
<div class='field'>
<div class='data'>
child 1
</div>
</div>
<div class='field'>
<div class='data'>
child 2 text that might be long enough to wrap, but still exceed the parent
</div>
</div>
</div>
CSS
.container {
display: inline-table;
border-spacing: 4px;
background: yellow; border: 1px solid brown;
padding: 5px;
}
.field {
display: table-cell;
}
.data {
border: 2px solid red;
padding: 3px;
}