html code:
<body>
<div id="grid-main_content">
<div class="block ">
<div class="column column-1">
<p>Esse ingeniis instituendarum...</p>
</div>
</div>
<div class="block">
<div class="column column-2">
<p>Quis voluptate o comprehenderit non fugiat ullamco..</p>
</div>
<div class="column column-2">
<p>Irure an arbitror de appellat fugiat offendit,..</p>
</div>
<span class="clear-both"></span>
</div>
<div class="block">
<div class="column column-3">
<p>Cernantur est possumus,..</p>
</div>
<div class="column column-3">
<p>Multos quamquam deserunt ea minim sed consequat,..</p>
</div>
<div class="column column-3">
<p>Eiusmod illum mandaremus quo appellat...</p>
</div>
<span class="clear-both"></span>
</div>
<div class="block">
<div class="column column-4">
<p>Duis arbitror sed dolor sint...</p>
</div>
<div class="column column-4">
<p>Eram expetendis doctrina ut offendit ipsum et deserunt familiaritatem,..</p>
</div>
<div class="column column-4">
<p>Cupidatat aut elit appellat...</p>
</div>
<div class="column column-4">
<p>Eu irure summis...</p>
</div>
<span class="clear-both"></span>
</div>
</div>
</body>
css:
.block {
border: 1px solid black;
margin: 2px;
}
.column {
padding: 5px;
margin: 5px;
}
.column-1 {
background: lightblue;
width: 100%;
}
.column-2 {
background: lightgreen;
width: 48%;
float: left;
}
.column-3 {
background: yellow;
width: 32%;
float: left;
}
.column-4 {
background: red;
width: 23%;
float: left;
}
And it looks like this:
As you can see, all of the contents of each blocks are not equal in length and are not centered because I want the block (columns) to be responsive to the width. How can I equally divide them into column-1 having full width, column-2 having 1/2 of the width, column-3 having 1/3 of the width and column-4 with a width of 1/4 width? And be centered horizontally.
css:
body, html{
margin:0;
padding:2px;
}
*{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.block {
border: 1px solid black;
padding: 2px;
float:left;
width:100%;
}
.column {
padding: 5px;
}
.column-1 {
background: lightblue;
width: 100%;
}
.column-2 {
background: lightgreen;
width: 50%;
float: left;
}
.column-3 {
background: yellow;
width: 33.333%;
float: left;
}
.column-4 {
background: red;
width: 25%;
float: left;
}
js:
$(function(){
equalHeight();
});
$(window).resize(function(){
equalHeight();
});
function equalHeight(){
var maxHeight = 0;
$(".column-4").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".column-4").height(maxHeight);
$(".column-3").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".column-3").height(maxHeight);
$(".column-2").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".column-2").height(maxHeight);
}
find fiddle dmeo
flexbox can do that.
With just this:
.block {
display: flex;
}
.column {
flex:1;
}
Suppport is IE10 and up.
.block {
border: 1px solid black;
margin: 2px;
display: flex;
}
.column {
padding: 5px;
margin: 5px;
flex:1;
}
.column-1 {
background: lightblue;
}
.column-2 {
background: lightgreen;
}
.column-3 {
background: yellow;
}
.column-4 {
background: red;
}
<body>
<div id="grid-main_content">
<div class="block ">
<div class="column column-1">
<p>Esse ingeniis instituendarum...</p>
</div>
</div>
<div class="block">
<div class="column column-2">
<p>Quis voluptate o comprehenderit non fugiat ullamco..</p>
</div>
<div class="column column-2">
<p>Irure an arbitror de appellat fugiat offendit,..</p>
</div>
</div>
<div class="block">
<div class="column column-3">
<p>Cernantur est possumus,..</p>
</div>
<div class="column column-3">
<p>Multos quamquam deserunt ea minim sed consequat,..</p>
</div>
<div class="column column-3">
<p>Eiusmod illum mandaremus quo appellat...</p>
</div>
</div>
<div class="block">
<div class="column column-4">
<p>Duis arbitror sed dolor sint...</p>
</div>
<div class="column column-4">
<p>Eram expetendis doctrina ut offendit ipsum et deserunt familiaritatem,..</p>
</div>
<div class="column column-4">
<p>Cupidatat aut elit appellat...</p>
</div>
<div class="column column-4">
<p>Eu irure summis...</p>
</div>
</div>
</div>
</body>
Here's a fiddle http://jsfiddle.net/gx9hfeLq/1/ that helps you with setting equal widths. It uses border-box so you won't have your boxes bumping to the next line when you use exactly half (50%), third (33.3%) etc. The padding takes up space inside the boxes making them fit and stretch 100% across:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Related
I am currently building some simple card items with angular material. They look like this right now:
Now, notice the lorem ipsum in the middle of the card. My goal is to prevent it from line break and make it text-overflow: ellipsis. I tried all the mentioned solutions about preventing line break. But adding
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
to the span in the middle only distorts the circle on the left side and is not working. This is the result:
It gets much longer than expected (and i cannot even scroll to the right) and the circle looks strange.
Thats my html and css file:
html:
<div class="card"
[ngClass]="{'red-border': data?.prioritaet === '1', 'gray-border': data?.prioritaet !==
'1'}">
<div class="circle"
[ngClass]="{'red-filling': data?.status === 'MF', 'gray-filling': data?.prioritaet !==
'1', 'red-circle-border': (data?.prioritaet === '1' && data?.status === 'EE')}">
<span class="status dark-letters"
[ngClass]="{'bright-letters': (data?.prioritaet === '1' && data?.status === 'EE')}">
{{ data?.status }}
</span>
</div>
<div class="card-container">
<div class="row1">
<div *ngIf="data?.nummerFormatiert" class="item">
<kendo-svg-icon
class="card-title-item-icon"
[icon]="icons.lan"
></kendo-svg-icon
><span class="card-title-item">{{ data?.nummerFormatiert }}</span>
</div>
<div *ngIf="data?.status" class="item">
<kendo-svg-icon
class="card-title-item-icon"
[icon]="icons.lan"
></kendo-svg-icon
><span class="card-title-item">{{ data?.status }}</span>
</div>
<div *ngIf="data?.einsatzort" class="item">
<kendo-svg-icon
class="card-title-item-icon"
[icon]="icons.account"
></kendo-svg-icon
><span class="card-title-item">{{ data?.einsatzort }}</span>
</div>
<div *ngIf="data?.prioritaet" class="end-item">
<span class="card-title-item">Prio: {{ data?.prioritaet }}</span>
</div>
</div>
<div class="row2">
<div class="middle-item">
<kendo-svg-icon
class="card-title-item-icon"
[icon]="icons.clock"
></kendo-svg-icon>
<span class="long-text">
Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel
lectus. Donec odio urna, tempus molestie,
Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel
lectus. Donec odio urna, tempus molestie,
Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel
lectus. Donec odio urna, tempus molestie,
</span>
</div>
</div>
<div class="row3">
<div *ngIf="data?.beginn" class="item">
<kendo-svg-icon
class="card-title-item-icon"
[icon]="icons.clock"
></kendo-svg-icon>
<span class="card-title-item">
{{ data?.beginn | date: 'dd.MM.yy, HH:mm:ss' }}
</span>
</div>
<div *ngIf="data?.status" class="item">
<kendo-svg-icon
class="card-title-item-icon"
[icon]="icons.lan"
></kendo-svg-icon
><span class="card-title-item">{{ data?.status }}</span>
</div>
<div *ngIf="data?.prioritaet" class="item">
<kendo-svg-icon
class="card-title-item-icon"
[icon]="icons.account"
></kendo-svg-icon
><span class="card-title-item">{{ data?.prioritaet }}</span>
</div>
<div *ngIf="data?.prioritaet" class="item">
<kendo-svg-icon
class="card-title-item-icon"
[icon]="icons.account"
></kendo-svg-icon
><span class="card-title-item">{{ data?.prioritaet }}</span>
</div>
<div *ngIf="data?.prioritaet" class="item">
<kendo-svg-icon
class="card-title-item-icon"
[icon]="icons.account"
></kendo-svg-icon
><span class="card-title-item">{{ data?.prioritaet }}</span>
</div>
<div *ngIf="data?.prioritaet" class="end-item">
<kendo-svg-icon
class="card-title-item-icon"
[icon]="icons.account"
></kendo-svg-icon
><span class="card-title-item">{{ data?.prioritaet }}</span>
</div>
</div>
</div>
</div>
The scss file:
.card {
display: flex;
flex-direction: row;
margin-bottom: 0.25em;
&.red-border {
border-left: 3px solid #E57373;
}
&.gray-border {
border-left: 3px solid #A6A9AF;
}
&.white-border {
border-left: 3px solid #E2E3E5;
}
}
.circle {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
margin-right: 10px;
text-align: center;
&.red-filling {
background: #E57373;
}
&.gray-filling {
background: #A6A9AF;
}
&.white-filling {
background: #E2E3E5;
}
&.red-circle-border {
width: 46px;
height: 46px;
border: 2px solid #E57373;
}
&.gray-circle-border {
border: 2px solid #A6A9AF;
}
&.white-circle-border {
border: 2px solid #E2E3E5;
}
}
.status {
font-weight: 700;
&.dark-letters {
color: #151B27;
}
&.bright-letters {
color: #C8CACE;
}
}
.card-container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
}
.card-title-item-icon {
margin-right: 8px;
}
.row1 {
display: flex;
}
.row2 {
display: flex;
margin-top: 5px;
margin-bottom: 5px;
font-size: 14px;
}
.row3 {
display: flex;
font-size: 14px;
}
.middle-item {
flex-grow: 1;
}
.item {
margin-right: 15px;
}
.long-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.end-item {
margin-left: auto;
margin-right: 10px;
}
Does anyone know why my code does this and how I can fix this? Thank you in advance!
While this is a complex topic, I implemented one way of doing it by using the webkit-line-clamp CSS property:
I tried to replicate the HTML structure as in your example:
.circle {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
margin-right: 10px;
text-align: center;
}
.circle.gray-filling {
background: #a6a9af;
}
.container {
display: flex;
flex-direction: column;
align-items: stretch;
}
.row {
display: flex;
justify-content: space-between;
}
.container *:not(:last-child) {
margin-bottom: 8px;
}
.card {
border: 1px solid black;
display: flex;
padding: 8px;
margin: 0 8px;
}
.flex-fill {
flex: 1;
}
.no-shrink {
flex-shrink: 0;
}
.card-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.text-container {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
<div class="container">
<div class="card">
<div class="circle gray-filling no-shrink">EL</div>
<div class="card-container flex-fill">
<div class="row">
<div class="icon-container">
<span>icon</span>
<span>icon2</span>
<span>icon3</span>
</div>
<div>Prio: 3</div>
</div>
<div class="row">
<div class="text-container">
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.
</div>
</div>
<div class="row">
<div class="icon-container">
<span>icon</span>
<span>icon2</span>
<span>icon3</span>
</div>
<div>users 3</div>
</div>
</div>
</div>
<div class="card">
<div class="circle gray-filling">MF</div>
<div class="card-container flex-fill">
<div class="row">
<div class="icon-container">
<span>icon</span>
<span>icon2</span>
<span>icon3</span>
</div>
<div>Prio: 3</div>
</div>
<div class="row">
<div class="text-container">
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>
<div class="row">
<div class="icon-container">
<span>icon</span>
<span>icon2</span>
<span>icon3</span>
</div>
<div>users 3</div>
</div>
</div>
</div>
</div>
I copied your circle class, but did not use all the stuff for brevity.
It gets much longer than expected (and i cannot even scroll to the right) and the circle looks strange.
Does anyone know why my code does this and how I can fix this?
Apparently the circle gets squeezed because the browser cannot figure out exactly how to divide the space between the circle and the rest of your card. I fixed this by adding the flex-fill class to the card-container. That is nothing more than flex: 1; so that the circle keeps its size, and the rest of the remaining width goes to the card-container. For small enough widths, the squeeze can still happen. If you don't want this behavior at all, then add the flex-shrink: 0; to the circle element.
I'm trying to recreate this but I'm stuck on getting the image and text to fit inside the innermost border. the final is supposed to have an outside border, an inside border, and a div that expands across the top. Then a picture that is 30% width of the top spanning div. Then text that is supposed to be width 70% of the top spanning div.
This is what I got so far HTML:
:root {
--winter-primary: #ffd110;
}
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
margin: 20px;
}
.wh {
background-color: var(--winter-primary);
padding: 30px;
}
.winter-image {
width: 30%;
float: left;
}
.wi {
width: 70%;
float: right;
}
<section class="winter">
<div class="outside-winter-border">
<div class="insdie-winter-border">
<div class="section-heading">
<div class="wh">
<h2>Winter</h2>
</div>
</div>
<div class="content-wrapper">
<div class="winter-image">
<div class="section-image">
<a href="winter.html">
<img src="assets/images/winter.jpg" alt="Winter Image">
</a>
</div>
</div>
<div class="wi">
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
The exact desired result is unclear. However, here is a version using flex that gets both the image and text within the border. Don't use float.
.outside-winter-border {
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
}
.insdie-winter-border {
border: 2px solid var(--winter-primary);
}
img {
height: 100%;
}
.wh {
display: inline-flex;
}
.insdie-winter-border {
display: flex;
align-items: center;
}
:root {
--winter-primary: #ffd110;
}
p {
margin-left: 1em;
}
.section-heading {
width: 100%;
background-color: var(--winter-primary);
text-align: center;
}
.section-heading>h2 {
margin: 0;
}
<section class="winter">
<div class="outside-winter-border">
<div class="section-heading">
<h2>Winter</h2>
</div>
<div class="insdie-winter-border">
<div class="wh">
<a href="winter.html">
<img src="https://dummyimage.com/125/000/fff" alt="Winter Image">
</a>
</div>
<div class="content-wrapper">
<div class="winter-image">
</div>
<div class="wi">
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
I think you can try this (insted of .winter-image and .wi ):
.content-wrapper {
display: flex;
}
.winter-image {
flex: 3;
}
.wi {
flex: 7;
}
I want stretch box dependence of content, i'm using flexbox, but i can't to do. Below link my example
Parent div
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
Child div
order: 0;
flex: 0 1 auto;
align-self: auto;
.slick-track {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
}
.slick-slide {
width: 150px;
margin: 10px;
order: 0;
flex: 0 1 auto;
align-self: auto;
}
.sliderItem {
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
cursor: pointer;
}
.sliderItemTitle {
font-size: 25px;
font-weight: bold;
padding: 20px 20px 0;
min-height: 84px;
}
.sliderItemText {
display: flex;
padding-top: 10px;
padding: 0px 20px;
min-height: 58px;
align-items: center;
}
.sliderItemLinkBox {
margin-bottom: 20px;
padding: 0 20px;
}
.sliderItemLink {
color: yellow;
text-transform: uppercase;
}
<div class="slick-track">
<div class="slick-slide">
<div>
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 1</strong>
</div>
<div class="sliderItemText">
lorema dadad addadadad adadadadadasd
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div>
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 2</strong>
</div>
<div class="sliderItemText">
Lorem
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div>
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 3</strong>
</div>
<div class="sliderItemText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolore ipsa at minus molestias, neque rerum, aut minima voluptatum, dolorem odit nesciunt aliquid ullam officia reiciendis, recusandae natus maxime beatae.
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/7qvo2tmk/5/
This can be accomplished using JS to loop through the elements and adjust the height based on the tallest element.
Working Example
let slides = document.querySelectorAll('.sliderItem')
function updateHeights() {
let tallestSlide = 0
for (i = 0; i < slides.length; i++) {
if (slides[i].clientHeight > tallestSlide) {
tallestSlide = slides[i].clientHeight
}
}
for (i = 0; i < slides.length; i++) {
slides[i].style.height = tallestSlide + 'px'
}
}
window.onresize = updateHeights
updateHeights()
You can try doing this.
What I did is that I remove the div that encloses the .sliderItem
and then add height to the .sliderItem of height:100%. so that it will occupy the height of its parent div .slick-slide.
.slick-track {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
}
.slick-slide {
width: 150px;
margin: 10px;
order: 0;
flex: 0 1 auto;
align-self: auto;
}
.sliderItem {
height: 100%;
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
cursor: pointer;
}
.sliderItemTitle {
font-size: 25px;
font-weight: bold;
padding: 20px 20px 0;
min-height: 84px;
}
.sliderItemText {
display: flex;
padding-top: 10px;
padding: 0px 20px;
min-height: 58px;
align-items: center;
}
.sliderItemLinkBox {
margin-bottom: 20px;
padding: 0 20px;
}
.sliderItemLink {
color: yellow;
text-transform: uppercase;
}
<div class="slick-track">
<div class="slick-slide">
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 1</strong>
</div>
<div class="sliderItemText">
lorema dadad addadadad adadadadadasd
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 2</strong>
</div>
<div class="sliderItemText">
Lorem
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
<div class="slick-slide">
<div class="sliderItem">
<div class="sliderItemImg">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="sliderItemTitle">
<strong>Title 3</strong>
</div>
<div class="sliderItemText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolore ipsa at minus molestias, neque rerum, aut minima voluptatum, dolorem odit nesciunt aliquid ullam officia reiciendis, recusandae natus maxime beatae.
</div>
<div class="sliderItemLinkBox">
<div class="sliderItemLink">
click
</div>
</div>
</div>
</div>
</div>
Hope this helps
I have a webpage containing rows of news tidbits with associated thumbnail images.
<div class="news-list">
<div class="news-item">
<div class="news-image">
<img class="news-image" src="penguin.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Lorem ipsum dolor sit ... sapientem honestatis.
</p>
</div>
</div>
<div class="news-item">
<div class="news-image">
<img class="news-image" src="walrus.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Mel et dolores luptatum ... dicta alienum.
</p>
</div>
</div>
<div class="news-item">
...
</div>
I currently have the page styled with all the images on the left and the descriptions on the right, via the CSS
div.news-list { display: table; }
div.news-item { display: table-row; }
div.news-image { display: table-cell; }
div.news-info { display: table-cell; }
But I'd like to change this layout to alternate between picture on left and picture on right, as I show in the mockup below:
I am having trouble identifying a CSS solution to achieve this layout that doesn't require me to alternate the order of the text tidbits and the images in the actual markup. (I'm happy to put either the images or the text first as necessary, but it ought to be consistent through the whole HTML.)
Any tips?
For older-browser support, you could add even and odd classes.
img.news-image {
background: #dadada;
height: 50px;
width: 50px;
}
p.news-info {
margin-top: 0;
}
.news-item {
clear: both;
border-top: 1px solid #dadada;
}
.odd div.news-info {
float: right;
}
.odd div.news-image {
float: left;
}
.even div.news-info {
float: left;
}
.even div.news-image {
float: right;
}
<div class="news-list">
<div class="news-item odd">
<div class="news-image">
<img class="news-image" src="penguin.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Lorem ipsum dolor sit ... sapientem honestatis.
</p>
</div>
</div>
<div class="news-item even">
<div class="news-image">
<img class="news-image" src="walrus.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Mel et dolores luptatum ... dicta alienum.
</p>
</div>
</div>
</div>
For modern browsers, you could use css pseudo classes.
img.news-image {
background: #dadada;
height: 50px;
width: 50px;
}
p.news-info {
margin-top: 0;
}
.news-item {
clear: both;
border-top: 1px solid #dadada;
}
.news-item:nth-child(odd) div.news-info {
float: right;
}
.news-item:nth-child(odd) div.news-image {
float: left;
}
.news-item:nth-child(even) div.news-info {
float: left;
}
.news-item:nth-child(even) div.news-image {
float: right;
}
<div class="news-list">
<div class="news-item">
<div class="news-image">
<img class="news-image" src="penguin.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Lorem ipsum dolor sit ... sapientem honestatis.
</p>
</div>
</div>
<div class="news-item">
<div class="news-image">
<img class="news-image" src="walrus.jpg" />
</div>
<div class="news-info">
<p class="news-info">
Mel et dolores luptatum ... dicta alienum.
</p>
</div>
</div>
</div>
We have a problem where we need to have a list of divs with dynamic content.
There will always be 2 divs per row. Both of those elements should have the same height.
Currently we have a solution which sets the height of the boxes with JavaScript, but it's not very performant, since it recalculates the sizes on every resize (Responsive design).
Is there a solution without fixed height values?
Important: The boxes still need to be padded, and the padding needs to be in percent (currently 4% margin on div)
Jsfiddle: http://jsfiddle.net/6dmwU/
<div class="boxes">
<div class="box-wrapper">
<div class="box" style="height: 203px;">
<p class="box-title">Lorem Vulputate</p>
<p>On corerias sunturero in cullabore dolestionet apid utatur On corerias sunturero in cullabore dolestionet apid utatur</p>
</div>
<div class="box" style="height: 203px;">
<p class="box-title">Egestas Pharetra</p>
<p>On corerias sunturero in cullabore dolestionet apid utatur</p>
</div>
</div>
<div class="box-wrapper">
<div class="box" style="height: 151px;">
<p class="box-title">Vulputate Egestas</p>
<p>On corerias sunturero in cullabore dolestionet apid utatur</p>
</div>
<div class="box" style="height: 151px;">
<p class="box-title">Egestas Pharetra</p>
<p>On corerias sunturero in cullabore dolestionet apid utatur</p>
</div>
</div>
</div>
Any help will be very appreciated
You can use a flex model for this:
.boxes .box
{
margin-left: 2%;
margin-bottom: 2%;
width: 50%;
padding: 4%;
border: 1px solid #b6b6b6;
border: 0.0625rem solid #b6b6b6;
box-sizing: border-box;
}
.box-wrapper
{
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
jsFIddle
This way every row will be the height of the highest child element.
However the support for this is limited.
So if you rather not use this method you can transform you structure in a table structure. This way every row will be the height of the highest child element.
.boxes .box
{
display: table-cell;
margin-left: 2%;
margin-bottom: 2%;
width: 50%;
padding: 4%;
border: 1px solid #b6b6b6;
border: 0.0625rem solid #b6b6b6;
box-sizing: border-box;
}
.box-wrapper
{
display: table-row;
}
.boxes
{
display: table;
border-collapse: separate;
border-spacing: 5px;
}
Because margin doesn't work between table-cells i used border-spacing to define the seperation between the cells.
jsFiddle
Try this
.boxes .box {
float: left;
margin-left: 2%;
margin-bottom: 2%;
width: 38%;
padding: 4%;
border: 1px solid #b6b6b6;
border: 0.0625rem solid #b6b6b6;
box-sizing: border-box;
display:inline-block
}
.box-wrapper,.boxes{
display:inline-block;
width:100%;
}
Fiddle
Have a look at this fiddle You can use display:table-cell;
CSS:
.row {
display: table;
width: 100%;
}
.left {
width:50%;
background: blue;
display:table-cell;
}
.right {
width:50%;
background: red;
display:table-cell;
}
HTML
<div class='row'>
<div class='left'>
"Lorem ipsum dolor sit amet, consectetur adipisicing 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='right'>
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos
</div>
</div>
I use flexbox, it's magic ^^ :
HTML
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS
.boxes {
display: flex;
flex-wrap: wrap;
}
.box {
margin: 0 1% 1% 0;
width: 48%;
}
CODEPEN DEMO
Complete guide to flexbox on css-trick