Here is CSS playground: https://www.bootply.com/HHeQ3n0EbT
<div class="container">
<div class="row">
<div class="col ltg-column-parent">
Column
<div class="ltg-column-inside">
<div class="task-box">
content
</div>
<div class="task-box">
content
</div>
<div class="task-box">
content
</div>
</div>
<div class="task-table-bottom-buttons">
<button>+</button>
</div>
</div>
<div class="col ltg-column-parent">
Column
<div class="ltg-column-inside">
<div class="task-box">
content
</div>
</div>
<div class="task-table-bottom-buttons">
<button>+</button>
</div>
</div>
<div class="col ltg-column-parent">
Column
<div class="ltg-column-inside">
<div class="task-box">
content
</div>
</div>
<div class="task-table-bottom-buttons">
<button>+</button>
</div>
</div>
</div>
</div>
CSS:
.ltg-column-parent {
margin: 1px;
padding: 0;
background-color: lightgray;
padding-bottom: 1rem;
}
.ltg-column-inside {
background-color: rgb(151, 151, 151);
height: 100%;
/* border: white solid 1px; */
}
.task-box {
width: 10rem;
height: 6rem;
color: black;
background-color: white;
border: 1px solid lightgray;
border-left: 7px solid yellow;
padding-left: 1rem;
padding-top: 1rem;
display: inline-block;
}
.task-table-bottom-buttons {
position: relative;
bottom: 0px;
}
I'm making some kind of kanban table, where you can create tasks (white boxes with yellow border) and drag&drop them between columns.
Column is a box with lightgray background.
Darkgray div is where I can put/drag task boxes
Now, there are a few problems here. Darkgray box with "+" button are moving outside its parent lightgray div. This is because darkgray div is set to height: 100% as I want it to take all available space in column. If I delete that, darkgray div shrinks and columns have less space that tasks can be placed.
I want to accomplish a few things:
columns have to have the same height if they lay next to each other (if screen is smaller and columns are placed below, then the same height is not necessary)
"+" button have to be sticked to the bottom of the last task (or entire column if it will be easier)
darkgray div should be as big as possible without artificially chaging height of column (as user have to have place to drop tasks).
What should I do to make it look correctly?
This solution works for me:
.ltg-column-inside {
background-color: rgb(151, 151, 151);
border: white solid 1px;
display: flex;
overflow: auto;
height: auto;
}
use dispaly:flex to .ltg-column-inside
.ltg-column-inside{
dispaly:flex
}
if you don't want the grey section remove this:
.task-box{
height: 6rem;
}
Related
This question already has answers here:
make divs of different heights fill vertical space on new line
(4 answers)
Closed 2 years ago.
I have divs of different heights. I want to place these in a grids without any blank white space. Please follow below.codesandbox.
.container {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.sm {
height: 200px;
background: gold;
border: 1px solid black;
width: 45%;
}
.md {
height: 250px;
background: red;
border: 1px solid black;
width: 45%;
}
<div class="container">
<div class="sm"></div>
<div class="md"></div>
<div class="sm"></div>
<div class="sm"></div>
<div class="md"></div>
<div class="sm"></div>
<div class="sm"></div>
<div class="md"></div>
</div>
You can not remove blank white space when different box has a different height. To remove vertical blank space use a similar height for all the boxes.
You used margin for .container *. That sets margin for all the elements inside the container. To remove horizontal white space, do not use margin for .container *.
You are not able to remove whitespace in one div if the height is different in each section. So it is needed to divide each section as follows.
.container {
display: flex;
width: 400px;
}
.items {
display: flex;
flex-direction: column;
width: 45%;
}
.sm {
height: 200px;
background: gold;
border: 1px solid black;
width: 100%;
}
.md {
height: 250px;
background: red;
border: 1px solid black;
width: 100%;
}
<div class="container">
<div class="items">
<div class="sm"></div>
<div class="sm"></div>
<div class="md"></div>
<div class="sm"></div>
</div>
<div class="items">
<div class="md"></div>
<div class="sm"></div>
<div class="sm"></div>
<div class="md"></div>
</div>
</div>
I have a div with overflow-x auto.
This div has children which are wider than the parent div, causing a scroll.
The inner children are given a border and background color which I would like to stretch across the entire width of them - including the scrolled overflow.
The actual content of the inner children is dynamic - so I can't give them a set width.
.outer {
border: 1px solid black;
width: 100px;
overflow-x: auto;
white-space: nowrap;
}
.inner {
border-bottom: 1px solid blue;
background-color: red;
}
<div class="outer">
<div class="inner">This is is row number 1</div>
<div class="inner">This is is row number 2</div>
<div class="inner">This is is row number 3</div>
</div>
The problem is that it doesn't - as can be seen in this fiddle, the background and border only stretch to the defined width of the parent.
How can I make the width of the children stretch to the entire scrolled area?
The <div> element is a block element and its width will be 100% of its parent. Making it an inline element will force the width of the div to stretch with its text content, but sadly it will need extra markup to make it break into rows (<br/> tags).
The way I manage to do it for your case is by making the inner container display: table; that way the element will behave as table and it'll stretch its width to match its inner text.
.outer {
border: 1px solid black;
width: 100px;
overflow-x: auto;
white-space: nowrap;
}
.inner {
display: table;
border-bottom: 1px solid blue;
background-color: red;
}
Here's a demo: jsFiddle
If you give width bigger than the outer to the inner, you'll have the result.
Try to give width: 200px; or 150%; and let me know...
.outer {
border: 1px solid black;
width: 100px;
overflow-x: auto;
white-space: nowrap;
display:flex;
flex-wrap:wrap;
justify-content:strech;
}
.inner {
border-bottom: 1px solid blue;
background-color: blue;
}
<div class="outer">
<div class="container-inner">
<div class="inner">This is is row number 1</div>
<div class="inner">This is is row number 2</div>
<div class="inner">This is is rowfddfssdfdfs number 3</div>
</div>
</div>
This is ok ?
It is easy with jquery. Using jquery scrollWidth you will the scroll width you can simply set that as width to inner div. So this will give you scroll width $('.outer')[0].scrollWidth) simply set this as width of inner div.
$(".inner").css('width', $('.outer')[0].scrollWidth);
.outer {
border: 1px solid black;
width: 100px;
overflow-x: auto;
white-space: nowrap;
}
.inner {
border-bottom: 1px solid blue;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">This is is row number 1</div>
<div class="inner">This is is row number 2This is is row number 3 </div>
<div class="inner">This is is row number 3 This is is row number 3 This is is row number 3 </div>
</div>
html: introducing an inner wrapper div
<div class="outer">
<div class="innerwrapper">
<div class="inner">This is is row number 1</div>
<div class="inner">This is is row number 2</div>
<div class="inner">This is is row number 3 This is is row number 3 This is is row number 3</div>
</div>
</div>
css:
.outer {
border: 1px solid black;
width: 100px;
overflow-x: auto;
white-space: nowrap;
display:flex;
flex-wrap:wrap;
justify-content:stretch;
}
.innerwrapper {
/* silence is golden */
}
.inner {
border-bottom: 1px solid blue;
background-color: red;
}
linky: https://jsfiddle.net/sL0rkjgm/29/
I need to center images inside of multiple divs. Everything I try breaks.
These are four boxes, alternating red & blue - horizontal. Looking to have them centered in the page and pushed to the top under another div block. Within each block is an image, which is centered to the same % margin on all sides to the relative red or blue box. You can see below I tried both placing the image directly in a redbox/bluebox div or even going one layer deeper with a box just for the image.
4 Box Example - HTML:
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="images/2.png">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="images/3.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="images/4.png">
</div>
</div>
CSS:
box-container {
height: 900px;
width: 950px;
padding: 12px;
display: inline-block;
vertical-align: top;
margin-left: auto;
}
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
}
.thumbnail img {
display: block;
margin: auto;
height: 130px;
width: 150px;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
You need to add padding to the image based on the height of your thumbnail div.
.thumbnail img {
display: block;
height: 130px;
width: 150px;
padding: 10px;
}
.bluebox img, .redbox .thumbnail img, .bluebox .thumbnail img {
display: block;
margin: 0 auto;
}
or
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
text-align: center;
}
using flexbox
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
display: flex;
align-items: center;
justify-content: center;
}
I believe I have what you are looking for in this here JSFiddle I just wipped up: https://jsfiddle.net/9yLspwr6/5/
A few key points before the code...
In order to have all the div elements 'float' left you ahve to apply div.className{float:left;} This will ensure divs float left to right and wrap around if they run out of space (much like a paragraph of text). More on CSS float property here: https://www.w3schools.com/css/css_float.asp
Vertical margin does not support 'margin:auto;' like it does for horizontal. Margin can be defined by div.ClassName{margin: 0px 0px 0px 0px;} OR div.className{margin:0px auto;}. The first element this way is for top/bottom margin. The second is for left/right margin. I had to use a little math to vertically center your images, but it gets you what you need. Here is some good documentation on margin: https://www.w3schools.com/cssref/pr_margin.asp
Cleaned up the HTML and removed some CSS no longer needed. I did this to simplify the code while maintaining the solution. If you drop this code into a site you'll want to ensure you only target only the appropriate tags. For example - my code is targeting ALL img tags. You would want to put a class or ID on the IMG tags you want and then ensure that is reflected in the CSS.
I modified the HTML quite a bit. Removed much of the unnecessary elements that were in place for troubleshooting.
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<img src="images/2.png">
</div>
<div class="bluebox">
<img src="images/3.jpg">
</div>
<div class="redbox">
<img src="images/4.png">
</div>
Modified CSS below:
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
float:left; // new. essentially left justifies the divs.
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
float:left; // new
}
img { // simplified the target. wrap entire contents of the HTML with a different DIV id to target only images within that div
display: block;
margin: 10px auto; // added 10px. it will then apply 10px margin to top and bottom, auto on left/right
height: 130px;
width: 150px;
}
That should do it. Hope it helps!
How do I align the red box with the gray box vertically?
http://jsfiddle.net/sLZzK/1/
I need several box combinations like that on my page, which is why I cannot simply push the red box up manually. A negative margin won't work either, since I do not know in advance how much content will be in the gray box. And the red box must overlap other page content, hence the absolute positioning. (http://jsfiddle.net/xMm82/)
CSS:
body {
padding: 0;
margin: 10px;
}
.left_div {
margin-bottom: 10px;
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
position: absolute;
border: 1px solid red;
left: 311px;
width: 200px;
height: 200px;
}
HTML:
<div class="left_div">gray box
<div class="right_div">red box</div>
</div>
Why are you using absolute positioning for such structure? In the case the better solution is to use float: left for each div. If you want to have two divs aligned vertically use display: table-cell rule. Here it is:
FIDDLE
UPDATE: Try to use this:
FIDDLE
what I've understood is you want gray box on top of Red box:
first of all wrap them in a parent div.
set the width of wrapper to desirable width.
set width to 100%(both red and gray) and you are done !! (fiddle)
If you want to arrange them horizontally:
left_div will be wrapper
it will contain 2 child div's
left one will have content and right one will be red box.(fiddle)
I would do it this way:
HTML:
<div class="container">
<div class="left_div">gray box</div>
<div class="right_div yellow">red box</div>
<div class="clr"></div>
</div>
CSS:
.container:not(:last-child){margin-bottom: 10px;}
.left_div,.right_div{float:left;}
.clr{clear:both;}
Fiddle here.
use float to arrange vertically and clear:both to prevent any errors
here's the corrected one
.left{
float:left;
width: 300px;
}
.right{
float:left;
width: 200px;
}
.left_div {
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
border: 1px solid red;
width: 200px;
height: 200px;
}
<div class="left">
<div class="left_div">
</div>
</div>
<div class="right">
<div class="right_div">
</div>
</div>
<div style="clear:both"></div>
http://jsfiddle.net/sLZzK/8/
There you go: http://jsfiddle.net/sLZzK/14/
HTML:
<div class="wrapper">
<div class="left_div">gray box</div>
<div class="right_div">red box</div>
</div>
CSS:
.wrapper {
border: 1px solid #369;
padding: 10px;
}
.wrapper > div {
display: inline-block;
vertical-align: middle;
}
You might also want to read about flexbox which will give you a similar and more consistent result, however it's not fully supported on various browsers yet.
Example: http://jsfiddle.net/5VCfm/2/embedded/result/
.container {
position: absolute;
border: 1px solid red;
max-width: 90%;
margin-bottom: 20px
}
.container + .container {
top: 260px;
}
.content-container {
border: 1px solid green;
max-height: 200px;
overflow: auto;
padding: 15px;
}
.content-wrap {
border: 1px solid navy;
}
.content {
border: 1px solid red;
padding: 10px;
}
html
<div class="container">
<div class="content-container">
<div class="content-wrap">
<div class="content">
<h2>No width</h2>
large content see http://jsfiddle.net/5VCfm/2/embedded/result/
</div>
</div>
</div>
</div>
<div class="container">
<div class="content-container">
<div class="content-wrap">
<div class="content" style="width:300px">
<h2>Width 300px</h2>
large content see http://jsfiddle.net/5VCfm/2/embedded/result/
</div>
</div>
</div>
</div>
If width of element inside container is specified, he takes off the edge of the parent creating a horizontal scrolling. What is most characteristic behaves in Mozilla and Chrome. But Opera and IE show all right.
How to solve the problem? Is a bug?
The parent container has a max-width:90%, means it will become smaller as much as it can but it will never surpass 90% of the viewport width.
When this 90% is smaller than 300px (child), the horizontal scroll bar is being created, this process is completely normal, you just have to realize that the child has a fixed width, it will not get smaller.
Use max-width:300px; on the .content, this will allow it to have a 300px width IF IT CAN, but when the parent (90%) is less, it will become tighter.
DEMO