feel free to rephrase my question title, I couldn't think of how to word it correctly.
Having some CSS related issues.I have a row element (not to be confused with bootstrap this is separate). and inside this I have two columns.
the columns are both dynamic in the sense that on resize they change height. how can I get the divs to match the tallest element.
I am trying to find a way to do this with Pure CSS. Hopefully the image below explains my theory more
My real example is below, I need the first column ( the one with the line in ) to match the height of the form div both contained within the row
Two alternatives:
CSS tables
.row {
display: table;
width: 500px; /* for demo */
background-color: #eee;
border-spacing: 5px;
}
.col {
display: table-cell;
vertical-align: top;
padding: 5px;
border: 1px solid red;
}
.col1 {
width: 100px;
}
<div class="row">
<div class="col col1">
short column
</div>
<div class="col col2">
long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
</div>
</div>
And using CSS Flexbox
.row {
display: flex;
align-items: stretch;
width: 500px;
}
.col {
margin: 5px;
padding: 5px;
border: 1px solid red;
}
<div class="row">
<div class="col col1">
short column
</div>
<div class="col col2">
long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
</div>
</div>
This is obviously stripped down to the bare essentials, mileage may vary depending on your design and it's responsiveness.
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 5 months ago.
I want to arrange differently sized boxes in a "newspaper-style", but with elements arranged left-to-right first, and then top-to-bottom. So the goal is to get something that looks like this:
I know that the column module was built for news-paper-style layouts, but it arranges the elements top-to-bottom first, and then left-to-right:
Here's the most important CSS, a full example is in this Codepen:
.container {
column-count: 3;
max-width: 960px;
width: 100%;
}
.box {
width: 300px;
break-inside: avoid;
height: fit-content;
}
Using a flexbox with wrapping will arrange the elements left-to-right first, but it will create gaps below the shorter elements (Codepen):
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 960px;
width: 100%;
}
Is there a way to achieve the desired layout using plain CSS?
The idea is quite simple. flex-flow: column with wrap can do precisely what column-count does. You'll need two conditions to make it work: 1. The flexbox container needs to have a fixed height and it needs to be taller than your tallest column. 2. Flex children need width, 50% for 2-column layout, 33% for 3-column layout, etc.
This approach has the same problem as column-count: the elements are ordered by column, top-down. But since we're using flexbox, now we get access to the order property.
Using :nth-child() and order we can override the default order.
Items with order: 1 will go in the first column, order: 2 will go in the second column, and order: 3 in the third column.
In (an + b) formula a represents a cycle size, n is a counter (starts at 0), and b is an offset value. So (3n+1) selects every third item starting with the first one. (3n+2) selects every third item but starting with the second item. And (3n) selects every third item starting with the third item, since there's nothing at index 0.
In certain layouts, columns might merge. To solve this issue,insert pseudo-elements between columns:
Read more about the method
This is Another Post about Horizontal Line Masonry
I have also changed margin-bottom: 0px; on .box & used gap:5px on the flex-container/your .container
.container {
display: flex;
flex-flow: column wrap;
gap:5px;
height: 600px;
max-width: 960px;
width: 100%;
}
.box {
width: 300px;
break-inside: avoid;
height: fit-content;
padding: 7px;
border-radius: 15px;
margin-bottom: 0px;
cursor: pointer;
border: 1px solid grey;
text-align: justify;
}
.box:nth-child(3n+1) {
order: 1;
}
.box:nth-child(3n+2) {
order: 2;
}
.box:nth-child(3n) {
order: 3;
}
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
.header {
font-size: 1.5rem;
font-weight: bold;
}
body {
font-family: monospace;
}
<div class="container">
<div class="box">
<div class="header">1 Heading</div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum sint praesentium accusantium quidem magnam laborum atque harum, distinctio facilis amet. Quidem nulla beatae fugiat modi repellat laborum, animi natus quaerat?
</a>
</div>
</div>
<div class="box">
<div class="header">2 Another heading</div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quos optio doloribus eaque ex. Nesciunt harum vel maxime eaque vero, ipsum nihil at ipsam numquam blanditiis esse voluptate, iste aspernatur! Earum asperiores praesentium ipsam illo eius
sed ut autem velit consequatur adipisci voluptate, expedita voluptatem mollitia saepe, rem amet maiores dolorem et quos. Nulla temporibus necessitatibus inventore assumenda consequatur optio!</div>
</div>
<div class="box">
<div class="header">3 Another heading</div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi dolores doloribus, soluta dicta cumque rem iusto quibusdam! Quae earum, consequuntur impedit adipisci culpa vero amet minima, modi laboriosam asperiores illum! Doloremque pariatur repudiandae
aspernatur quidem ad voluptates vero! Commodi perspiciatis enim porro possimus quidem! Veritatis cumque repellat neque laborum commodi assumenda, vitae in saepe quae quibusdam officia corrupti, adipisci tempora.</div>
</div>
<div class="box">
<div class="header">4 Heading</div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum sint praesentium accusantium quidem magnam laborum atque harum, distinctio facilis amet. Quidem nulla beatae fugiat modi repellat laborum, animi natus quaerat?</div>
</div>
<div class="box">
<div class="header">5 Heading</div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, voluptate. Fugiat labore tenetur quidem cum! Consectetur mollitia quas, veritatis nulla maiores, neque ullam fugiat ea explicabo tenetur perspiciatis enim sit. Ipsum tempora sunt
delectus repellendus sed, quisquam error quos rem, ipsa aspernatur unde inventore culpa saepe est iusto. Eaque doloremque illum incidunt, quo vel magni libero rem sunt natus alias. Fuga vitae consectetur cumque repellat id fugit et molestiae unde
facilis eos. Dolore accusantium id fugiat debitis quod iusto odit, quam, illum corporis minima eius. Eum quam numquam exercitationem sed.
</div>
</div>
<div class="box">
<div class="header">6 Heading</div>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum sint praesentium accusantium quidem magnam laborum atque harum, distinctio facilis amet. Quidem nulla beatae fugiat modi repellat laborum, animi natus quaerat?</div>
</div>
</div>
Making a Reactjs app. Referring to the code, I would like to make the height of the colorTab div, equal and responsive to that of the content div. The height of content must be dynamic given that I would like it to be defined by the amount of text in tile + description, which is variable, and the width of the window.
Currently, when I omit min-height from colorTab's CSS and simply have height: 100%; defining colorTab's height, colorTab disappears. Adding the min-height gives it that height but then it becomes unresponsive to the height of content which is the goal. How do I solve this issue?
JSX:
<div className="wrapper">
<div className="colorTab" style={color}>
</div>
<div className="content">
<tr>
<td className="title">
<a href={link}>{title}</a>
</td>
</tr>
<tr>
<td className="description">
{description}
</td>
</tr>
</div>
</div>
CSS:
.wrapper {
min-height: 48px;
overflow: hidden;
}
.colorTab {
float: left;
position: relative;
width: 5px;
min-height: 48px;
height: 100%;
border-radius: 5px;
margin-left: 15px;
}
.title {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.description {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
Flexbox will offer the functionality you need.
Put display: flex on your container class. And flex: 1 on your content div. No matter how much content you place in the content div the colorTab div will match its height.
Example in pure HTML/CSS (no React):
.wrapper {
overflow: hidden;
display: flex;
}
.colorTab {
position: relative;
width: 5px;
border-radius: 5px;
background: red;
}
.content {
flex: 1;
}
<div class="wrapper">
<div class="colorTab">
</div>
<div class="content">
<div class="title">
<a>Your Title</a>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
</div>
</div>
Now, I would absolutely recommend the flexbox mentioned in the other answer but...
but for some other outdated browsers which do not support it (cough
cough looking at you, grandpa, using that same old version of IE)... it
might be good idea to provide extra version support.
So, for answer's completion sake:
The other option is to utilize the tables.
.wrapper {
display: table;
}
.description {
display: table-cell;
}
.colorTab {
display: table-cell;
width: 5px;
border-radius: 5px;
background: red;
}
// not necessary, but for esthetic reasons
.content {
position: relative;
left: 10px;
}
<div class="wrapper">
<div class="colorTab">
</div>
<div class="content">
<div class="title">
<a>Your Title</a>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
</div>
</div>
Is margin-right not calculated or taken into account in the following example? what happens when someone increases margin-right on .box? it has no effect. why?
.outer {
width: 500px;
margin: 0 auto;
background: #9CF;
}
.box {
width: 300px;
background-color: #ffd900;
margin: 50px;
}
p {
background: #EEA458;
}
<div class="outer">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
</div>
</div>
You have a margin: 50px declaration, which applies margins on all sides, as well as a width: 300px declaration. The values are over-constrained — since you can't expect a 300-pixel wide box to only have 50-pixel horizontal margins in a containing block whose width is greater than 300 + 50 + 50 pixels — which does indeed result in the specified value of margin-right being ignored (in the typical LTR writing mode).
Here, the margin is getting collapsed. It does have a margin, but you cannot see. To make it visible, we need ti add the overflow: hidden to recalculate and show up the margin.
.outer {
width: 500px;
margin: 0 auto;
background: #9CF;
overflow: hidden;
}
.box {
width: 300px;
background-color: #ffd900;
margin: 50px;
}
p {
background: #EEA458;
}
<div class="outer">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
</div>
</div>
After applying overflow: hidden to the parent, you could see the top and bottom margins too.
And since your margin-right: 50px; is lesser than 150px of the space on the right, you cannot see the right margins.
This is the current box model of the .box:
If you want the background of .box to be visible, use padding instead of margin:
.outer {
width: 500px;
margin: 0 auto;
background: #9CF;
}
.box {
width: 300px;
background-color: #ffd900;
padding: 50px;
}
p {
background: #EEA458;
}
<div class="outer">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
</div>
</div>
I have two columns set to 50%, left with text and right with image that should fill whole column vertically. The problem is that when text is a little bigger, there is a gap below the image. Is it possible to always have the image occupy the full height (but in same ratio)? For example, the image could get wider than its column, in that case I could just set overflow hidden.
.flex {
display: flex;
border: 3px solid black;
padding: 10px;
}
.col {
border: 1px dashed #aaa;
}
.left {
padding: 30px;
}
<div class="flex">
<div class="col left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit
ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo,
quod reprehenderit omnis! Sequi nulla nemo a magni voluptates.
</p>
</div>
<div class="col right">
<img src="http://placehold.it/550x250" alt="">
</div>
</div>
You have to set following CSS properties to image
height:100%;
width:auto;
.flex {
display: flex;
border: 3px solid black;
padding: 10px;
}
.col {
border: 1px dashed #aaa;
overflow-x: hidden;
}
.left {
padding: 30px;
}
.right img {
height: 100%;
width: auto;
}
<div class="flex">
<div class="col left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit
ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo,
quod reprehenderit omnis! Sequi nulla nemo a magni voluptates.
</p>
</div>
<div class="col right">
<img src="http://placehold.it/550x250" alt="">
</div>
</div>
The quickest way to get the image to fill the vertical height of the container would be to make the parent a flex container. This automatically applies align-items: stretch to the children (in this case, the image).
.right { display: flex; }
From that point, you could use various methods to set the correct aspect ratio to the image. You could use percentage height, if you have defined heights on the parent / ancestors.
Or you could use the object-fit property.
.flex {
display: flex;
border: 3px solid black;
padding: 10px;
}
.col {
border: 1px dashed #aaa;
}
.left {
padding: 30px;
}
.right {
display: flex;
}
img {
object-fit: cover;
}
<div class="flex">
<div class="col left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eos fugiat deserunt ullam tempore? Aspernatur eligendi dolores explicabo officiis adipisci, incidunt distinctio tempore culpa, esse cumque atque repellendus eius delectus fugit quia odit
ut porro laborum alias. Aliquam et est neque ut, rem ab omnis? Culpa rerum, vel ad magnam iusto explicabo at consequatur deserunt quo repellendus. Sequi nulla nemo a magni voluptates. Nemo mollitia, ut ex temporibus voluptatem incidunt nostrum quo,
quod reprehenderit omnis! Sequi nulla nemo a magni voluptates.
</p>
</div>
<div class="col right">
<img src="http://placehold.it/550x250" alt="">
</div>
</div>
Note that object-fit is not natively supported in Internet Explorer. For more details and a workaround see: Why isn't object-fit working in flexbox?
This question already has answers here:
Margin on child element moves parent element
(18 answers)
Closed 6 years ago.
Well, now I've this problem, I want to adjust just the margin on the "c2" but when I set it to X, it changes the "c1" div margin :S
Here's the code I'm using:
<header>
<div class="jumbotron">
<center><h1>Bienvenidos a JVasconcelos.me</h1></center>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12 col-centered">
<div class="c1">
<div class="c2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis inventore illum quaerat laboriosam eos, vel sed suscipit cumque laborum est animi aliquid tempora iusto beatae quam quisquam porro dolore! Ullam tenetur doloribus ducimus, totam voluptatum, deleniti vero voluptatem eius architecto velit neque voluptas aliquam quidem sed eveniet! Nobis ex eos iste dolorum tempora doloremque non deleniti, aperiam quibusdam corrupti officia consequatur, impedit. Exercitationem debitis iste voluptatum, illo nulla iure culpa ex fugit, aliquid dolorem excepturi, impedit voluptates quae quidem error earum natus, provident eum vitae. Tempore ducimus laborum voluptates, qui aspernatur odit dolorum modi quas cupiditate unde quam earum amet!
</p>
</div>
</div>
</div>
</div>
</div>
CSS
div.c1 { height: 100vh; background: #417ba1; margin-top: -30px; padding: 0px 30px; }
div.c2 { height: 90%; background: #fff; margin-top: 0px; padding: 60px 30px; }
.jumbotron { background: url("../img/header_bg.png") no-repeat; height: 100%; }
Ah. You're looking for
.c1 {
overflow: auto; // or hidden or overlay
}
This behavior is due to the collapsing margins part of the box model spec. Putting overflow: auto|hidden|overlay on the parent will establish a new block formatting context and stop the margins from collapsing.
This is because the border of the c1 and c2 are collapsing. You have to hide the overflow (with overflow: hidden or any overflow different that default, which is visible) of the container to avoid that the c1 also get the margin of c2.
div.c1 { height: 100vh; background: #417ba1; overflow: hidden; margin-top: -30px; padding: 0px 30px; }
div.c2 { height: 90%; background: #fff; margin-top: 20px; padding: 60px 30px; }
.jumbotron { background: url("../img/header_bg.png") no-repeat; height: 100%; }
<header>
<div class="jumbotron">
<center><h1>Bienvenidos a JVasconcelos.me</h1></center>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12 col-centered">
<div class="c1">
<div class="c2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis inventore illum quaerat laboriosam eos, vel sed suscipit cumque laborum est animi aliquid tempora iusto beatae quam quisquam porro dolore! Ullam tenetur doloribus ducimus, totam voluptatum, deleniti vero voluptatem eius architecto velit neque voluptas aliquam quidem sed eveniet! Nobis ex eos iste dolorum tempora doloremque non deleniti, aperiam quibusdam corrupti officia consequatur, impedit. Exercitationem debitis iste voluptatum, illo nulla iure culpa ex fugit, aliquid dolorem excepturi, impedit voluptates quae quidem error earum natus, provident eum vitae. Tempore ducimus laborum voluptates, qui aspernatur odit dolorum modi quas cupiditate unde quam earum amet!
</p>
</div>
</div>
</div>
</div>
</div>
I assume you mean when you change the margin-top on the div.c2 your div.c1 also shifts down. This is due to the default definition of a div+div construct.
To achieve what you want you will need to create the following extra css definition on your div.c1:
display: inline-block;
Have a look at this codepen: http://codepen.io/anon/pen/beNjbW
Difference of or greater margin of c1 or c2 will be rendered due to collapsible margins.
In this case your total distance will be 0 (they cancel each other):
div.c1 {
margin-top: -30px;
}
div.c2 {
margin-top: 30px;
}
In this case your distance will be 10px from the top:
div.c1 {
margin-top: -30px;
}
div.c2 {
margin-top: 40px;
}
One of top margins can be omitted in this case. You can control the distance to header by adjusting margin-top of either one
codePen example