I have a div with the below content.
<div class="outsideDiv">
<div>
<p>Some text</p>
</div>
<div class="imgContainer">
<img />
</div>
</div>
The imgContainer is right of the div which contains the p
The outsideDiv doesn't have a pre-defined height. It adjusts to the height of the p element. So if the p element has 500px height then the height of outside div will be 500px. My website is responsive, therefore the height of p (and so the height of outsideDiv) it isn't fixed and it changes depending on screen. This section works perfect.
I want the height of imgContainer to be equal with the height of the outsideDiv.
I have tried with position absolute and relative and it works but I don't want to use this way. Also I tried inherit height but no luck.
.imgContainer {
background: rgba(0,0,0,.5);
position: absolute;
width:100%;
height:100%;
bottom: -100%;
}
.outsideDiv {
position: relative;
}
<div class="outsideDiv">
<div>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
<div class="imgContainer">
<img />
</div>
</div>
You can achieve this using flexbox.
body{
margin:0;
}
.outsideDiv{
background:red;
display:flex;
}
.outsideDiv > div{
float:left;
width:50%;
}
.outsideDiv p{
height:500px;
}
.imgContainer{
background:blue;
float:right;
width:50%;
height:100%:
}
<div class="outsideDiv">
<div>
<p>Some text</p>
</div>
<div class="imgContainer">
<img />
</div>
</div>
Here is Demo : https://jsfiddle.net/r73kh3bo/
If you don't want to use Flexbox because of browser support, here's another example: https://jsfiddle.net/r73kh3bo/1/
Basically you can just create a parent div with display: table and each child inside with display: table-cell will have the same height.
Related
I need a responsive CSS grid, containing at most three columns and at least one, to have equal space around each column. This is easily done, with just one row, with flexbox and justify-content: space-evenly as seen here:
Even Spacing Using FlexBox
But I need multiple rows. So how can I get even column spacing with css grid?
Here is what I have currently with a grid. The far left and right margins are half the size of the inner margins
No Even Spacing With Grid
I've thought about using a flexbox for each row in the grid but the idea sounds like it could be more work than it's worth. Thanks
JSFiddle
Equal space between the images vertically and horizontally
The images aren't the direct children of the grid/flex container so some adjustments need to be made to make the images take full width/height of their parents.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
/* at least fill the parent */
min-width: 100%;
/* don't exceed the parent */
max-width: 100%;
}
a,[item] {
display: inline-block;
}
/* Not needed */
body * {
padding: 10px;
border: 1px solid;
}
<div container>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
</div>
CSS Grid
Using css grid it should be easy to have 3 items per row and have even space all around.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
min-width: 100%;
max-width: 100%;
}
a,[item] {
display: inline-block;
}
/* Solution */
[container] {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap:20px; /* even spacing using grid-gap, You can use percentage values if you want*/
padding:20px;
}
[item]{
padding: 10px;
background:red;
}
/* Not needed */
body * {
padding: 10px;
border: 1px solid;
}
<div container>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
</div>
Flexbox
Tricky requires a bit of care
First we need 3 items per row we can just say that like css grid so we calculate, we give each item a third of the overall width of the parent flex-basis:calc(100% / 3);
Second we add the space around using margins say margin:20px, Now the tricky bit is that margins add to width of the item so we need to substract that space from the overall width of the container then calculate the third which will become flex-basis(100% - (20px * 6)) / 3);
6 because each element will have 2 margins left/right 2 x 3=6
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
min-width: 100%;
max-width: 100%;
}
a,[item] {
display: inline-block;
}
/* Solution */
[container] {
width: 100%;
display: flex;
flex-wrap:wrap;
}
[item]{
padding: 10px;
background:red;
flex:0 0 calc((100% - (20px * 6)) / 3);
margin:20px;
}
/* Not needed */
body * {
padding: 10px;
border: 1px solid;
}
<div container>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
</div>
I have a fixed table-layout div parent with two horizontal table-cell children.
On the left cell, I just simply put in some text. However, when the right cell has a tall image, the text on the left cell is pined to the bottom no matter what html padding & margin styles I put in. When the right cell has some multi-line text, the text on the left cell is placed on top.
I want the text from the left cell to stay on top all the time. Where am I missing?
html
<div class="row-post">
<div class="col-cell col-fixed" style="margin-top: 0px;padding-top: 0px;">
<p>1</p>
</div>
<div class="col-cell pl-3">
<img src="https://i.kym-cdn.com/photos/images/facebook/001/295/524/cda.jpg" style="height:300px">
</div>
</div>
<hr>
<div class="row-post">
<div class="col-cell col-fixed">
<p>1</p>
</div>
<div class="col-cell pl-3">
<p>Some long text</p>
<p>Some long text</p>
<p>Some long text</p>
<p>Some long text</p>
<p>Some long text</p>
<p>Some long text</p>
<p>Some long text</p>
<p>Some long text</p>
<p>Some long text</p>
<p>Some long text</p>
<p>Some long text</p>
</div>
</div>
css
.row-post {
table-layout: fixed;
width: 100%;
word-break: break-all;
}
.row-post .col-cell {
display:table-cell;
}
.row-post .col-cell img {
max-width: 100%;
}
.col-fixed {
width: 26px;
}
js fiddle if you want to play around
https://jsfiddle.net/f1zr6o93/
js fiddle snip
For table render types, you can use:
vertical-align: top;
on any "table cell".
Edited fiddle
For reference, there's a fuller explanation of when vertical align applies in this other SO article.
I have absolutely positioned div.container. div.wrapper inside it. and two divs as flex columns in div.wrapper. These columns have backgrounds.
How can I make these backgrounds go to the end of the longest column (i.e. make them the same height) and not only to the visible height of the container? I can't remove position: absolute from div.container.
.container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
flex-direction: column;
overflow: auto;
}
.wrapper {
display: flex;
align-items: stretch;
width: 100%;
}
.div1 {
background-color: yellow;
}
.div2 {
flex: 1;
background-color: green;
}
<div class="container">
<div class="wrapper">
<div class="div1">
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
</div>
<div class="div2">
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
</div>
</div>
</div>
CodePen link
Remove the flex properties on the container.
I also removed align-items: stretch; width: 100%; from the .wrapper as it is their default value's and doesn't need to be set.
.container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* commented out these 2 lines
display: flex;
flex-direction: column;
*/
overflow: auto;
}
.wrapper {
min-height: 100%;
display: flex;
/* commented out these 2 lines as they are not needed
align-items: stretch;
width: 100%;
*/
}
.div1 {
background-color: yellow;
}
.div2 {
flex: 1;
background-color: green;
}
p {
padding: 20px 10px;
}
<div class="container">
<div class="wrapper">
<div class="div1">
<p>Some long content here</p>
<p>Some long content here</p>
<p>Some long content here</p>
</div>
<div class="div2">
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
<p>Some even longer content here</p>
</div>
</div>
</div>
My Goal is to have a DIV that contains other fixed sized DIVs. Those DIVs should contain a line break (only) if necessary. So it should look like the following:
No line breaks necessary:
_______________________________
| ____ ____ ____ |
| |__| |__| |__| |
| |
| |
|_____________________________|
Line break necessary:
_______________________________
| ____ ____ ____ ____ |
| |__| |__| |__| |__| |
| ____ |
| |__| ... |
|_____________________________|
Currently, the best I could come up is the following:
<div id="outer">
<div>
<p>Some text</p>
</div>
...
</div>
<style>
#outer {
overflow: auto;
}
#outer div {
display: inline;
border: 1px solid black;
}
#outer div p {
width: 60px;
height: 60px;
Display: inline-block;
}
</style>
Does anybody have an idea on how to achieve this?
Hope this will help you and resolve your query, let me know any issues
#thomas
#outer {
overflow: auto;
border:1px solid #ff0000;
padding:10px;
}
#outer div {
display: inline-block;
border: 1px solid black;
margin:0px 1% 2% 1%;
}
#outer div p {
width: 60px;
height: 60px;
margin:0px;
display: inline-block;
}
<div id="outer">
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
...
</div>
Try like this: Demo
#outer div {
display: inline-block; / Use inline-block */
border: 1px solid black;
}
#outer div p {
width: 60px;
height: 60px;
}
here your code is working fine i have tried to change the display inline-block to the div to make the block in a row
#outer {
overflow: auto;
}
#outer div {
display: inline-block;
padding: 5px;
border: 1px solid #808080;
text-align: center;
line-height: 32px;
margin: 15px;
}
#outer div p {
width: 60px;
height: 60px;
}
<div id="outer">
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
<div>
<p>Some text</p>
</div>
</div>
and here is the demo working code for this
Demo code
My float works...kind of..however I'm having a problem when resizing my browser. I would like the text to wrap around the div when the screen gets smaller however it's just squishing to the right in a long line of text to the bottom.
Here are some pics.
This is when it's wider
and then this is what it's doing when I resize the browser
my html kind of looks like this
<div class="info">
<div class="userInfo">
<p>info here</p>
<img>
</div>
<div class="bio">
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
</div>
and my css looks like this
.userInfo{
float: left;
}
.bio p{
padding-left: 14em;
}
You will have to move your paragraphs inside the same div as the image, and float the actual image. Something like this:http://jsfiddle.net/cLcJu/
As you can see the code is very simple:
<div class="userInfo">
<p>some content above the image</p>
<img src='path_to_image'>
<p>A bunch of content to the right of and underneath the image</p>
</div>
and the css
.userInfo img {
display: block;
float: left;
padding: 10px;
}
This should work:
HTML
<div class="info">
<div class="userInfo">
<p>info here</p>
<img src="image">
<p>paragraph</p>
</div>
</div>
CSS
.userInfo img { float: left; }