I'm using Bootstrap 3.3.2 to create two columns. Each column has a heading, a bordered div with text of an unknown length, and an image. I need the bordered divs with text to be the same height, but only when the columns are side by side. If the window is narrow enough for the columns to be stacked, they should not be the same height. How can I achieve this?
I realize I could use JavaScript to set the shortest div's height to be the same as the tallest div's height, but the problem with this method is that when the user decreases the width of their browser window, the text overflows outside of the div.
Here is my code (jsFiddle demo):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.equal {
border: 3px solid #333;
padding: 8px;
}
img {
display: block;
margin: 20px auto 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Foo</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q. Eamne rationem igitur sequere, qua tecum ipse et cum tuis utare, profiteri et in medium proferre non audeas? Duo Reges: constructio interrete. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Est, ut dicis, inquit; Id enim ille summum bonum eu)qumi/an et saepe a)qambi/an appellat, id est animum terrore liberum. An est aliquid, quod te sua sponte delectet?</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
<div class="col-md-6">
<h1>Bar</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus: Prorsus, inquit, assentior; Quid, quod res alia tota est? Maximus dolor, inquit, brevis est. Nihilo beatiorem esse Metellum quam Regulum. Honesta oratio, Socratica, Platonis etiam. Duo Reges: constructio interrete.</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I know this is similar to this question, but I think it's actually different.
var equal1 = $(".equal1").height();
var equal2 = $(".equal2").height();
if(equal1 < equal2 ){
$(".equal1").height($(".equal2").height());
} else {
$(".equal2").height($(".equal1").height());
}
Please, see this
Demo result
or
Demo with code.
Just with pure CSS you can solve it with flex.
You can add another class to your row class and then apply the styles on that class.
<div class="container">
<div class="row row-eq-height">
<div class="col-xs-6">
...
In the css add:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap; /*to enable responsiveness*/
}
.row-eq-height > [class*="col-"] {
display: flex;
flex-direction: column;
border: 1px solid green;
}
You can check a demo here.
Updated !
Try DEMO
Using JavaScript
$(".equal2").height($(".equal1").height());
Do Read http://www.ejeliot.com/blog/61
Related
How can I have this header 'full width'. So that the image is on the left side of the screen. But that the content inside (President Jean ...) is in the grid?
I was thinking about creating a new container.
.container--full { max-width: 1400px; width: 100%; }
My .container grid has a max-width of 1170px. So my new container is wider than .container.
And then set a background-image, position left and background color grey.
Inside that .container--full, create .container
<div class="container--full">
<div class="container">
</div>
</div>
Test with container-fluid.
<div class="container-fluid" style="background-image: url('<?php bloginfo('template_directory'); ?>/images/commission-header.png');">
<div class="container">
<div class="col-sm-3">
<div class="info">
President
</div>
</div>
<div class="col-sm-9">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime obcaecati consequatur illum dolor quasi labore molestiae voluptatum consectetur laborum vel, modi nulla totam blanditiis quam sapiente, suscipit laudantium. Necessitatibus, eos.
</div>
</div>
</div>
CSS
.commission-business {
.container-fluid {
background-color: $grey--lighter;
background-position: left top;
background-repeat: no-repeat;
}
.info {
background: red;
display: block;
padding: 1rem 2rem;
}
}
Just use bootstraps 'container-fluid' class. (learn more)
<div class="container-fluid">
<div class="row>
...
</div>
</div>
Like at picture above I need such layout. DIV1 contains static text and to DIV2 data (text) coming from other files (EX.JSON) so it's variable. The point is to keep both divs always with same height based on height of heigher div.
Note: I don't want this with float.
Image courtesy: One of Test I Given Online.
Hi
You can do this easly with CSS3 Flexbox like you asking.
Solution
Here is snippet with working example. I used Flexbox and detalils you have in comments in the code.
#main {
/*Styles for sample presentation*/
padding: 20px;
border: 1px solid tomato;
}
#wrapper {
display: flex;
flex-flow: row wrap;
/* The remaining place (horizontaly) will be spread out around divs in wrapper. */
justify-content: space-around;
/*Styles for sample presentation*/
border: 1px solid royalblue;
}
#wrapper>header {
/* To keep header 100% width. */
flex: 0 0 100%;
text-align: center;
/*Styles for sample presentation*/
background-color: sandybrown;
}
#wrapper>div {
margin: 10px;
padding: 20px;
/* To center the text vertically. */
display: flex;
flex-flow: column nowrap;
justify-content: center;
/*Styles for sample presentation*/
border: 1px solid maroon;
text-align: justify;
}
#text-static {
/*Low flex basis values to keep it next to each other divs*/
flex: 1 0 30%;
}
#wrapper>div#text-json {
/*Low flex basis values to keep it next to each other divs*/
flex: 0 0 25%;
margin-left: 0;
}
<div id="main">
<div id="wrapper">
<header>
Sample header
</header>
<div id="text-static">
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym,
pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji
druków na komputerach osobistych, jak Aldus PageMaker
</div>
<div id="text-json">
a Lorem Ipsum a Lorem Ipsum a Lorem Ipsum
</div>
</div>
</div>
If you want to try case when right div has more text than left you can edit same snippet as above there.
Knowledge
More informations about CSS3 Flexbox you have e.g. on this W3Schools site.
A nice learning tool that I found recently flexboxfroggy.com .
Hope that was helpful.
Cheers
Here is my implementation using CSS Grid which in my opinion makes this a lot easier especially when working with layouts. I am using SASS for styling. I hope this helps. Here is a link of the snippet on codepen.io
HTML CODE
<div class="main-div">
<div class="wrapper-div">
<div class="sample-header">Header</div>
<div class="div1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta blanditiis, error dolorem, velit tempora, magni ea officiis itaque voluptates aliquid consectetur deserunt quisquam tenetur dolor! Labore assumenda iusto debitis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, velit cumque quaerat optio vero sed dolores maxime dolorum aut itaque? Asperiores, esse. Nihil dignissimos nisi debitis molestiae facilis accusamus non! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto quisquam corrupti error nesciunt pariatur quidem, voluptates similique obcaecati magni aperiam autem aliquam ex, ducimus, distinctio amet labore vel blanditiis sapiente. </div>
<div class="div2">Little bit of text here </div>
</div>
</div>
CSS STYLES USING CSS GRID
.main-div{
border:1px solid #000;
width:500px;
margin:0 auto;
padding:10px;
.wrapper-div{
display: grid;
grid-gap: 10px;
grid-template-columns: 3fr 1fr;
background-color: #fff;
// align-items:center;
color: #444;
margin:10px 0;
.sample-header {
grid-column: 1 / 3;
grid-row: 1;
background-color:lightgrey;
padding:10px;
text-align:center;
}
.div1,.div2{
border:1px solid #000;
padding:10px;
display:grid;
align-items:center;
}
.div1 {
grid-column: 1 ;
grid-row: 2 ;
}
.div2 {
grid-column: 2;
grid-row: 2;
}
}
}
https://codepen.io/anon/pen/OQZNgX
On the container for Div 1 & Div 2 apply this CSS
display: flex;
justify-content: center;
And then on the child divs, use flex-basis to specify their width
flex-basis: 75%;
/* and / or */
flex-basis: 25%;
See above code pen link for a working demo!
You can use bootstrap to achieve this... You can see below code for this type of design.
<div class='container'>
<div class='col-md-12 customHeaderclass'>
Your header
</div>
<div class='row'>
<div class='col-md-8'>
Your big content
</div>
<div class='col-md-4'>
Your small content
</div>
</div>
</div>
I hope this code will help you
Thanks & Regards.
How is possible to fill-in the height of a row with a cell in the following >>JSFiddle:
.x { height: 50px; }
.row { background: #eee; }
.row>:nth-child(odd) { background: lightblue; }
.row>:nth-child(even) { background: pink; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-3">fill height v</div>
<div class="col-xs-9"> <div class="x"> unknown height </div> </div>
</div>
PS. in order to be mobile compatible and also IE 11, I can't use flex
add .row{display: flex}
.x { height: 50px; }
.row {background: #eee; display: flex;}
.row>:nth-child(odd) {
background: lightblue;
}
.row>:nth-child(even) {
background: pink;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-3 cell">fill height v</div>
<div class="col-xs-9 cell">
<div class="x"> unknown height </div>
</div>
</div>
width absolute position jsfiddle.net/kth9vqhf
with display: table jsfiddle.net/kth9vqhf/1
with jQuery https://jsfiddle.net/kth9vqhf/3/
Using jQuery you can calculate the height of .x on the fly and set that as the minimum height for the cell.
$('.col-xs-3.cell').css("min-height", $('.x').height() + "px");
.x {
height: 50px;
}
.row {
background: #eee;
}
.row>:nth-child(odd) {
background: lightblue;
}
.row>:nth-child(even) {
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3 cell">fill height v</div>
<div class="col-xs-9 cell">
<div class="x"> unknown height </div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fill Row Height </title>
<style>
.WrapperRow{float: left; display: table; table-layout: fixed; vertical-align: top; width: 100%;}
.WrapperRow > div{display: table-cell; float: none; vertical-align: top; padding: 10px;}
.bgblue{background-color: blue;}
.cell.bgblue{width: 30%;}
.bgpink{background-color: pink;}
</style>
</head>
<body>
<div class="WrapperRow">
<div class="cell bgblue">
</div>
<div class="cell bgpink">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsa natus, vel non earum, distinctio iusto reprehenderit alias quisquam possimus, at qui nostrum ad enim totam repudiandae consectetur eius iste? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illum, aut sunt molestias tempora amet maxime ipsum? Vero animi beatae, dicta? Ut repudiandae fugit alias quasi esse culpa. Facere, dolore?
</div>
</div>
</body>
</html>
I have a situation where I have for example little boxes which follow each other one after each other and I want users to be able to toggle the show/hide of these elements, I have got them working like I want, but when the respective box is collapsed/hidden the content below it doesn't collapse upwards as well.
I understand why this is however, it's because using transform it still allocates the space for the element that you transformed out of it's original position; however I couldn't work out another way to do it in the same fashion as using a negative margin-top for some reason didn't animate smoothly like transform does.
CodePen: http://codepen.io/gutterboy/pen/GqRoJY
CodePen (margin-top version): http://codepen.io/gutterboy/pen/WxNGVG
HTML:
<div class="foo">
<header>
Header
Toggle
</header>
<div class="content-wrap">
<div id="content-1" class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
</div>
</div>
</div>
<div class="foo">
<header>
Header
Toggle
</header>
<div class="content-wrap">
<div id="content-2" class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
</div>
</div>
</div>
<div class="foo">
<header>
Header
Toggle
</header>
<div class="content-wrap">
<div id="content-3" class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
</div>
</div>
</div>
CSS (SCSS):
.foo {
margin: 10px;
width: 400px;
header {
padding: 10px;
border: 1px solid #000;
border-bottom: 2px solid #000;
}
.content-wrap {
overflow-y: hidden;
transform-style: preserve-3d;
}
.content {
padding: 10px;
background-color: gray;
transform: translateY(0);
border: 1px solid #000;
border-top: none;
transition: 1s;
&.closed {
transform: translateY(-100%);
}
}
}
JS (jQuery):
$(document).ready(function() {
$('.toggle').on('click', function(e) {
e.preventDefault();
var content_id = $(this).data('content-id');
$('#content-' + content_id).toggleClass('closed');
});
});
Is there anyway to get the boxes below to collapse smoothly at the same time the proceeding box does?
Also note that the boxes are variable height and hence we can't use height, want to avoid hacky solutions like using a really high max-height and preferably avoid using any JS for the animation.
Your problem, delay at starting due to margin : -100% and the div is still not visible at margin : -40%
and
CSS transition do not animate when you add or remove class, It will only animate when you change the CSS properties. And You are directly adding and removing classes.
Here is another way to get this by jQuery :
$('.toggle').on('click', function(e) {
var content_id = $(this).data('content-id');
$('#content-' + content_id).slideToggle('slow');
});
Updated Codepen
Can anyone tell how can I make right top container and right bottom container to have the same height and to split the red container 50-50% vertically. No matter what is the content inside. I tried stretching content and have them wrapped while keeping flex-direction: row to keep same height for items but I'm lost.
What I expect: right top container grows the same height as right bottom which also results the left container growing automatically of course.
This is what I have so far: http://jsbin.com/rozoxoneki/edit?html,css,output
.flex{
display: flex;
border: 5px solid red;
&-child{
background: green;
border: 2px solid yellow;
flex: 1;
}
}
.flex--vertical{
flex-direction: row;
flex-wrap: wrap;
> .flex-child{
min-width: 100%;
}
}
<div class="flex">
<div class="flex-child">
left
</div>
<div class="flex-child flex flex--vertical">
<div class="flex-child">
<h1>right top</h1>
</div>
<div class="flex-child">
<h1>right bottom</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p>
</div>
</div>
</div>
The accepted answer is not ideal for the use of flex properties, because it can all be done without the need for min-height or max-height
I've cleaned up the example fiddle and removed non-essential css styles to show which flex properties are being used here.
In order to get evenly spaced top/bottom divs, you need to either specify the proper value for flex-basis, or let flex work itself out. Assuming that the parent's display is set to flex with a column orientation, the combined flex style can get us there easily:
.half-containers {
flex: 1;
}
see more on flex styling and the flex-basis property
Intuitively one would expect that this would work just with a flex-direction: column for the main container and the left container's height set to 100%.
Instead all browser do this: (this is a quote from another stackoverflow question)
How is it possible that all major browsers got the flex container to
expand on wrap in row-direction but not in column-direction?
So what you can do is wrap the two right containers into a new one:
Like this HTML - schema:
<div class="main-container">
<div class="left-container">Left container</div>
<div class="right-container">
<div class="half-containers">Top right</div>
<div class="half-containers">Bottom right</div>
</div>
</div>
Here is a jsfiddle as an example how you could style it for the expected result.
In this example the 'main-container' is set to 50% width and 75% height of the body.
Building on Felipe's answer, here is an even more minimal example of how to split a single flex container in half vertically. Each of these styles has been confirmed to be significant and necessary, except for the two at the bottom marked optional.
(What got me was that every parent element needs to have a height: 100% set, or the whole thing breaks.)
HTML
<div id="container">
<div class="row">This is the top.</div>
<div class="row">This is the bottom.</div>
</div>
CSS
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
.row {
flex: 1;
}
/* optional: get rid of body margin. makes look nice. */
body {
margin: 0;
}
/* optional: shade the bottom row */
.row:nth-child(2) {
background: #bbb
}
Working CodePen here:
https://codepen.io/rbrtmrtn/pen/NyxeJE
we can use flexbox concepts to split equally between two div with the parent in the following way
* {
width: auto;
height: 100%;
}
.row {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.col {
flex: 1;
margin: 5px;
border: solid;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Other page</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="row">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae
expedita ipsum nobis praesentium velit animi minus amet perspiciatis
laboriosam similique debitis iste ratione nemo ea at corporis aliquam.
</div>
</div>
</body>
</html>