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>
Related
I've attached an illustration to help me get my point across!
So, DIV 1 and DIV 2 (children of PARENT DIV) are columns on a page I'm building, and the content within them is not of the same height, so currently their buttons do not line up vertically.
I need to vertically align BUTTON 1 and BUTTON 2 (I guess to the bottom of PARENT DIV?);
How do I go about this please?
Thanks!
I don't think you can get away from the position CSS directive, but if you don't want to use bottom, there are numerous jQuery examples that will allow you to logically place your divs.
Alternately (and I know you seem to want to use Divs) but you may be able to use a table easier.
You can apply position relative and a bottom padding in DIV 1 and DIV 2 to prevent its content to overlap the buttons, whose position should be absolute (maybe bottom: 10px according to your screenshot).
Example: jsfiddle.net/yy87qdmt/1/
Tested & proofed in firefox-45 and chrome-50
<body>
<main>
<style scoped>
main
{
flex-direction: row;
display: flex;
}
main > figure
{
border: 1px darkgrey solid;
justify-content: flex-end;
flex-direction: column;
box-sizing: border-box;
display: flex;
}
main > figure > :first-child
{
background-color: lightgrey;
flex-grow: 1;
}
main > figure > figcaption
{
background-color: black;
color: lightgrey;
flex-shrink: 1;
}
</style>
<figure>
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
<figcaption>
Caption 0
</figcaption>
</figure>
<figure>
<article>
<p>Lorem ipsum dolor sit amet cosectetur...</p>
<p>...Lorem ipsum dolor sit amet cosectetur...</p>
<p>...Lorem ipsum dolor sit amet cosectetur</p>
</article>
<figcaption>
Caption 1
</figcaption>
</figure>
</main>
</body>
Flexbox can do that.
.row {
display: flex;
width: 80%;
margin: auto;
}
.col {
width: 50%;
border: 1px solid grey;
text-align: center;
padding: 1em;
}
img {
width: auto;
max-height: 100%;
}
p {
text-align: justify;
}
/* the magic */
.col {
display: flex;
flex-direction: column;
}
button {
margin-top: auto;
}
<div class="row">
<div class="col">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos.</p>
<button>My button</button>
</div>
<div class="col">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae excepturi autem laborum veritatis ipsam odio itaque, dolorem modi ipsum voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque assumenda error blanditiis aliquam
repellendus, necessitatibus doloribus ipsa eveniet natus laborum.</p>
<button>My button</button>
</div>
</div>
In this example I was able put two divs on each other at the bottom of their parent, but only because I knew the height of last div. The first one was moved a bit to the top. What if the height of #second is dynamic? How can we make them sit on each other at the bottom of parent with dynamic heights? Is it even possible with css? Please do not post JavaScript or jQuery versions.
You can use Flexbox. With justify-content: flex-end and you can move content to end of parent element, so if you want to position some other child element on top of parent you can use margin-bottom: auto. This applies if you set flex-direction: column on parent.
.content {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.main {
margin-bottom: auto;
border: 1px solid black;
}
.box {
background: lightblue;
margin: 5px;
}
<div class="content">
<div class="main">Lorem ipsum dolor.</div>
<div class="box">One</div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati vel molestiae dolores, ad, nulla harum tenetur minima aperiam debitis id atque fugit, modi error et magni eius repellendus saepe. Vero?</div>
</div>
You can wrap both of them in a div and set position absolute style for that div rather than applying them individually..
working [Fiddle][1]
[1]: https://jsfiddle.net/gd5pqky7/
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
OK so i have the following HTML markup :
<section class="aboutus" id="aboutus">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<span class="image-holder our-clients"></span>
<h2>Our Clients</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, aperiam sunt reprehenderit corporis quidem libero ad officiis odio labore ratione adipisci, delectus, maxime saepe dolorem optio id dolore facilis recusandae.</p>
</div>
</div>
</div>
</section>
and the following css style that applies :
.aboutus{
/*display: table !important;*/
height: 100%;
}
.aboutus .container{
display: table !important;
height: 100%;
vertical-align: middle;
}
.aboutus .row{
display: table-row !important;
vertical-align:middle; !important;
}
.aboutus .col-md-4{
height: 100%;
display: table-cell !important;
vertical-align:middle !important;
}
.aboutus .image-holder{
display: inline-block;
height: 210px;
width: 210px;
background: url('../images/professionals.png');
}
now if you have a look at the html code you will see the following class :
class="aboutus"
which takes 100% height(100% screen size) on any given device ,
now what i wanted to achieve was , i wanted to vertically align the part from col-md-4 onwards , in the browser.
so to sum it up :
<section class="aboutus" id="aboutus">
will take the full height of the device screen and :
<div class="col-md-4 text-center">
will perfectly vertically-align inside the
unfortunately the approach used my me works in chrome but not in firefox , although i am running almost latest versions of both . WHY is this happening ??
also , how good is the approach i have used cross-browser . i guess it won't work ie8 and below ? anyways , this is a supplementary question .
My main question is Why is my vertical align css code not functioning in firefox .
EDIT :: Below is my Prolem in a nutsheel :
WHY Does this work in chrome but not in firefox ??
Thank you.
Kind regards.
Alexander
I'm making a website with a "page" div, and inside that contains the left div "navigation" and the right div "content". I want to make the height of the "page" div (so the background matches) equal to the height of the tallest div, either "navigation" or "content".
How would I go about doing this?
write like this
html:
<div class="page">
<div class="navigation"></div>
<div class="content"></div>
</div>
css:
page{overflow:hidden}
.navigation, content{float:left}
I'm guessing you're floating the other divs, otherwise this would always be the case. You can either float the parent div as well, or add a <div style='clear: both'></div> just before the end of the parent div. Either of these techniques will cause the parent div to be as big as its children.
EDIT: whoops, missed the end tag :)
This will help you
HTML
<div class="page">
<div class="navigation">i am navigation</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est maiores, ex? Mollitia assumenda veniam aliquid commodi ex, libero in quia perspiciatis sint voluptatibus soluta exercitationem quas quos repudiandae deserunt obcaecati.</div>
</div>
CSS
.page {
background-color: #000;
}
/* for clearfix*/
.page:after{
content: "";
display: table;
clear: both;
}
/* for clearfix end*/
.navigation,.content {
float: left;
}
.navigation {
width: 20%;
background-color: #cd6a51;
}
.content {
width: 80%;
background-color: #4CAF50;
}