I'm trying to have one div, with a height of 100% in it's container (which has a height of 50%) and two divs next to that, which each have a height of 50%.
Here's an example of what I mean:
I would also like to have a margin between all the divs, as shown in the picture above.
Here's my code so far:
<div style="height: 50%;">
<div style="height: 100%; float: left; margin-right: 15px;">
<p>Content</p>
</div>
<div style="float: right; height: 50%;">
<p>Content</p>
</div>
<div style="float: right; height: 50%;">
<p>Content</p>
</div>
</div>
JsFiddle: https://jsfiddle.net/ne4njtvr/
Like this maybe?
Note, if you need to support older browsers, this can be done using display: table as well
html, body {
margin: 0;
height: 100%;
}
.wrapper {
display: flex;
height: 100%;
}
.wrapper .left,
.wrapper .right {
flex: 1;
display: flex;
flex-direction: column;
}
.wrapper .right div {
flex: 1;
}
.wrapper .right div ~ div {
flex: 2;
}
div {
border: 1px solid;
box-sizing: border-box;
}
<div class="wrapper">
<div class="left">
Left
</div>
<div class="right">
<div>
Right - Top
</div>
<div>
Right - Bottom
</div>
</div>
</div>
Related
I am trying to design a section which 3 image. I can get the two images to display by block easily. I can float the third image to the right and adjust the height easily. However my issue is it does not align side by side.Below is an example of what I am trying to achieve
This is an example of what I have so far
.image-one,
.image-two {
width: 250px;
background-color: green;
display: block;
margin-top: 10px;
}
.image-three {
float: right;
background-color: lightblue;
width: 250px;
height: 200px;
}
<div class="container">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
<div class="image-three"> Image three </div>
</div>
You should be able to simple add flex to the container, and then add the content within a left and a right div.
Here's a working example:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.image-one,
.image-two {
width: 250px;
height: 95px;
background-color: green;
margin-bottom: 10px;
}
.image-three {
background-color: lightblue;
width: 240px;
height: 200px;
margin-left: 10px;
}
<div class="container">
<div class="left">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
</div>
<div class="right">
<div class="image-three"> Image three </div>
</div>
</div>
You can use flexbox for this:
.container {
display: flex;
flex-direction: column; /* align items in columns */
flex-wrap: wrap; /* wrap to a new column when height is reached */
justify-content: space-between; /* add spacing in between top and bottom image */
height: 210px; /* height of your 2 images plus and spacing you want */
width: 510px; /* width of 2 columns plus any spacing */
}
.image-one,
.image-two {
width: 250px;
height: 100px;
background-color: green;
display: block;
}
.image-three {
background-color: lightblue;
width: 250px;
height: 210px; /* I would make this image the height of the other 2 plus spacing */
align-self:flex-end; /* align this to the right of the container */
}
<div class="container">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
<div class="image-three"> Image three </div>
</div>
Maybe you can add some internal divs like this:
<div class="container">
<div class="container-left">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
</div>
<div class="container-right">
<div class="image-three"> Image three </div>
</div>
</div>
Then, add css to container-left and container-right to properly set the width and the float. Like this:
.container-left, .container-right{
width:250px;
float:left;
}
Why don't you make use of bootstrap columns?
HTML
<div class="container">
<div class="row main-row">
<div class="col-6 left-col">
<div class="row left-col-top">
<!-- Top left image here -->
</div>
<div class="row left-col-bottom">
<!-- Bottom left image here -->
</div>
</div>
<div class="col-6 right-col">
</div>
</div>
</div>
CSS
.main-row {
height:300px;
}
.left-col-top {
background-color:blue;
height:50%;
}
.left-col-bottom {
background-color:red;
height:50%;
}
.right-col {
background-color:green;
height:100%;
}
Easy flexbox solution :)
#main, #left {
display:flex;
}
#left {
flex-direction: column;
flex: 1;
}
.section {
flex: 1;
margin: 2px;
background-color: green;
}
<div id="main">
<div id="left">
<div class="section">Hello</div>
<div class="section">Hello</div>
</div>
<div id="right" class="section">Hello</div>
</div>
I have the following code:
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
overflow: hidden;
background-color: #00FF00;
}
<div>
<div id="left">
left
</div>
<div id="right">
right<br/> down
</div>
</div>
What I am trying to achieve is to make the left column's background-color to fill the whole div. This should be the case regardless of the height of the #right column.
so far I have tried/added
display: flex;
height: 100%
flex 1;
To the #left style but it is not working.
This has to be a CSS only solution.
You can use flexbox here. Demo:
.container {
/* become a flex-container */
/* flex-items will be stretched vertically by default */
display: flex;
}
#left {
width: 180px;
background-color: #ff0000;
}
#right {
/* occupy remaining width */
flex: 1;
background-color: #00FF00;
}
<div class="container">
<div id="left">
left
</div>
<div id="right">
right
<br/> down
</div>
</div>
Also you can use CSS Grid layout here. Demo:
.container {
/* become a grid-container */
display: -ms-grid;
display: grid;
/* first column should occupy 180px and second should occupy remaining width */
-ms-grid-columns: 180px 1fr;
grid-template-columns: 180px 1fr;
}
#left {
background-color: #ff0000;
}
#right {
background-color: #00FF00;
/* specify column for IE/Edge explicitly */
-ms-grid-column: 2;
}
<div class="container">
<div id="left">
left
</div>
<div id="right">
right
<br/> down
</div>
</div>
Need to understand why #left doesn't takes height of 100% and that's because you have used float:left property in #left. So whenever float left is used on an element it by default changes it display to inline-block and that's the reason that you have to change display of your parent div to overcome this.
Here is below using flex,
div{
display:flex;
}
div #left {
width: 180px;
background-color: #ff0000;
}
div #right {
flex:1;
overflow: hidden;
background-color: #00FF00;
}
<div>
<div id="left">
left
</div>
<div id="right">
right<br/> down
</div>
</div>
Read this to understand how float works.
.main-table {
display: table;
}
#left {
display: table-cell;
float: none;
width: 180px;
background-color: #ff0000;
}
#right {
display: table-cell;
overflow: hidden;
background-color: #00FF00;
}
<div class="main-table">
<div id="left">
left
</div>
<div id="right">
right<br/> down
</div>
</div>
Something like table may help you in this case!!
child1: side content, child2: display flex.
I need child2 to move left by 150px.
If I set margin-left on child2 it doesn't work.
But if I set margin-left on child of child2 it works.
.side {
width: 200px;
float: left;
position: relative;
}
.table-wrap {
margin-left: -150px; /* doesn't work */
}
.table {
margin-left: -150px; /* doesn't work */
display: flex;
}
.item {
margin-left: -150px; /* works oyea */
}
.stuff {
width: 100px;
height: 100px;
background: green
}
<div class="content">
<div class="side">
side content
</div>
<div class="table-wrap">
<div class="table">
<div class="item"></div>
<div class="stuff"></div>
</div>
</div>
</div>
Why? pen: http://codepen.io/anon/pen/JGwVpP
That's because the float is out-of-flow, so it overlaps .table-wrap. But it reduces the length of line boxes inside it.
Then it seems the margin is ignored, but in fact it's not: .table-wrap is really moved to the left, but the contents aren't due to the float.
Instead, you should make .table-wrap establish a new block formatting context (BFC). Then it won't overlap the float.
For example, you can establish a BFC with overflow: hidden, display: inline-block or float: left. Here the former would be bad because it would hide the content overflowing due to the negative margin, so use one of the others.
.side {
width: 200px;
float: left;
position: relative;
}
.table-wrap {
display: inline-block; /* Establish Block Formatting Context */
margin-left: -150px; /* Now this works */
}
.table {
display: flex;
}
.stuff {
width: 100px;
height: 100px;
background: green
}
<div class="content">
<div class="side">
side content
</div>
<div class="table-wrap">
<div class="table">
<div class="item"></div>
<div class="stuff"></div>
</div>
</div>
</div>
Alternatively, since you are already using flexbox, you can make .content be a flex container instead of floating .side
.content {
display: flex;
}
.side {
width: 200px;
position: relative;
}
.table-wrap {
margin-left: -150px; /* Now this works */
}
.table {
display: flex;
}
.stuff {
width: 100px;
height: 100px;
background: green
}
<div class="content">
<div class="side">
side content
</div>
<div class="table-wrap">
<div class="table">
<div class="item"></div>
<div class="stuff"></div>
</div>
</div>
</div>
Try display: inline-block instead of display: flex; on .table element.
I'm trying to build certain structure on page.
Main div (.row) with 400px height, two child divs (columns col-md-6), and five inner divs: two with 50% of parent height, three with 33% of parent height. And I don't get how to implement this. Could you recommend the best solution?
P.S. I'm using bootstrap3.
UPDATE: Added code.
<div class="row">
<div class="col-md-6">
<div id="ember828" class="ember-view bar-category-box">
</div>
<div id="ember829" class="ember-view bar-category-box">
</div>
</div>
<div class="col-md-6">
<div id="ember830" class="ember-view bar-category-box">
</div>
<div id="ember831" class="ember-view bar-category-box">
</div>
<div id="ember832" class="ember-view bar-category-box">
</div>
</div>
</div>
Since the .row is fixed at 400px height, you can give whats inside the same height:
.row > .col-md-6 {
height: 100%;
}
then for each div inside .col-md-6 you give the height you need:
.row > .col-md-6 .half {
height: 50%;
}
.row > .col-md-6 .third {
height: 33.33%;
}
This should work.
And even if the parent .row div height changed the inside should adapt.
You can do this with Flexbox, or with combination of bootstrap and flexbox DEMO
body, html {
margin: 0;
padding: 0;
}
.container {
height: 400px;
width: 100%;
box-sizing: border-box;
display: flex;
border: 1px solid #73FCD6;
padding: 10px;
}
.left, .right {
display: flex;
flex-direction: column;
flex: 1;
}
.box {
border: 1px solid #965504;
flex: 1;
margin: 5px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="left">
<div class="box">Content</div>
<div class="box">Content</div>
</div>
<div class="right">
<div class="box">Content</div>
<div class="box">Content</div>
<div class="box">Content</div>
</div>
</div>
Can't fixed it...
I have a div with 2 divs inside. The first one determinates height and the second one takes that height. But chrome don't want to do it.
<div style="display: table; height: 100%; width: 100%; min-height: 100%;">
<div FIRST-DIV-HEIGHT-VARIABLE WITH FLOAT LEFT></div>
<div style="box-sizing: border-box; display: table; float: right;
height: auto; min-height: 100%; padding: 0 20px 81px; position: relative;
width: 280px; -moz-box-sizing: border-box; -ms-box-sizing: border-box;
-webkit-box-sizing: border-box; -khtml-box-sizing: border-box;
-o-box-sizing: border-box;"></div>
</div>
Flexboxes are the easiest way to create columns of equal height:
<style>
.container {
display: flex;
display: -mx-flexbox; // IE10
display: -webkit-flex; // Safari
flex-grow: 0;
-ms-flex-grow: 0; // IE10
-webkit-flex-grow: 0; // Safari
}
.left, .right { width: 50%; }
.left {
background-color: #c66;
height: 200px;
}
.right { background-color: #66c; }
</style>
<div class="container">
<div class="left">
<p>This is the left DIV.</p>
</div>
<div class="right">
<p>This is the right DIV.</p>
<p>Its height is equal to the left DIV.</p>
</div>
</div>
Flexboxes do not work in IE9 and older. Suresh idea above works in older browsers, but there is a mistake in the code (table cells don't float) and inline CSS is better avoided:
<style>
.container { display: table; }
.row { display: table-row; }
.left, .right {
display: table-cell;
width: 50%;
}
.left {
background-color: #c66;
height: 200px;
}
.right { background-color: #66c; }
</style>
<div class="container">
<div class="row">
<div class="left">
<p>This is the left DIV.</p>
</div>
<div class="right">
<p>This is the right DIV.</p>
<p>Its height is equal to the left DIV.</p>
</div>
</div>
</div>
Add display:table-cell property for your child div. So that automatically adjust the height of sibling divs.
<div style="display:table; width:100%; height:100%; border:1px solid #f000ff;">
<div style="height:400px; display:table-cell; background-color:#ff000f;">My Main Content</div>
<div style="display:table-cell; float:right; height:100%; background-color:#ff00ff;">My Sample Content</div>
</div>
Check the Working JSFIDDLE HERE
In the above fiddle I have assigned the first child div height as 400px. If you modify this height, the right side div automatically adjust its height. Check it out and let me know if any issues.