I need to layout 2 divs (http://jsfiddle.net/tWE8W/) positioned in a container with a fixed width and height:
<div class="container">
<div class="left">
<div class="element"></div>
</div>
<div class="right">
<div class="element"></div>
</div>
</div>
both divs contain divs of type element with fixed dimensions. the elements can be added and removed dynamically.
div1 is positioned left. The elements should be stacked 2 high and grow to the right.
div2 is positioned right.The elements should be positioned horizontally (float: left). When the elements reach the right corner of div2 (also the rght corner of the container). The should start a new line.
div1 should have a dynamic width based on th enumber of elements it contains.
it only needs to work on the latest version of Google Chrome.
Use the Flexible Box Layout for the boxes on the left like
A C E
B D
FIDDLE
(Relevant) CSS
.left{
float:left;
display:flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
Browser support is also quite good nowadays
EDIT:
You can fiddle with the align-content property to align the boxes on the left.
Setting align-content: space-between; spaces the boxes out like this:
FIDDLE
I hope i understood right http://jsfiddle.net/nindos/8DTp2/9/
<style>
.container
{
height: 50px;
width: 300px;
overflow: hidden;
border: 1px solid black;
}
.left,.right{float:left;width:50%;height:100%;overflow:auto}
.left{background-color:red}
.right{background-color:blue}
.element{display:inline-block;background-color:pink}</style>
Related
I have a full viewport width, full viewport height "hero image" on a homepage. I've made this a Flex container. Inside the flex container is one child div (containing a heading). This flex item should be aligned to the bottom of the flex container. It has a max-width and should be horizontally centered inside the parent.
However, the max-width is being ignored. The div is taking the width of its content - the heading. Please see JS Fiddle: https://jsfiddle.net/4h7q6d5x/
As you can see the .main div inside the hero image is taking the width of its content - unlike the .main div below the hero image.
I have looked at various questions, including this one max-width not working on flex item
But adding width:100% to the flex item doesn't work. At smaller viewport sizes the the width and padding don't play nicely and the heading is cropped off the right hand edge.
How do I get max-width to work with Flexbox?
.hero_image {
min-height: 100vh;
background-color:yellow;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.main {
max-width:500px;
margin:0 auto;
padding:0 50px;
background-color:pink;
}
<div class="hero_image">
<div class="main">
<h1>Heading <br>couple of words</h1>
</div>
</div>
<div class="main">
<p>Lots of content</p>
</div>
The default "width" (actually flex-basis) inside flex-containers is auto which makes it only as wide as it's content.
But adding width:100% to the flex item doesn't work. At smaller viewport sizes the the width and padding don't play nicely and the heading is cropped off the right hand edge.
Then I'd suggest a couple of changes. Don't use a flex-column but position your .main div using align-items:flex-end.
Then set the default "width" (actually flex-grow) with flex: 1.
.hero_image {
min-height: 50vh;
/* for example */
background-color: yellow;
display: flex;
align-items: flex-end;
justify-content: center;
}
.main {
flex: 1;
max-width: 50%;
/* for example */
margin: 0 auto;
padding: 0 50px;
background-color: pink;
}
<div class="hero_image">
<div class="main">
<h1>Heading <br>couple of words</h1>
</div>
</div>
<div class="main">
<p>Lots of text</p>
</div>
how do I position a title on top of a gallery , like in the picture below.
I'm using a shortcode for the gallery, which comes with my theme.
I was able to do it using position:absolute; and top and bottom values, then center it with display:block; and margin:0 auto;. However, when I change the size of the screen it get's all out of whack.
the html is
<div class="gallery-column">
[shortcode goes here]
<h2>Title goes here</h2>
</div>
The easiest way to keep an element centered both horizontally and vertically is with flexbox.
All you need on the parent element is:
display: flex to treat the element as a flexbox
align-items: center for vertical alignment
justify-content: center for horizontal alignment
a fixed height (to create the padding) - 100vh for a full screen
This can be seen in the following:
body {
margin: 0;
}
.gallery-column {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
<div class="gallery-column">
<div class="centered">
<h2>Centered Element</h2>
</div>
</div>
The element in question will remain at the exact center of the page, regardless of screen resizes.
In your case you'll also want a z-index to ensure that the element stays on top.z-index: 1 should suffice.
I cannot seem to get this to work and spending too many hours on this. I am assuming it should be simple. I am looking for the desired effect of having an image over top of some text and have them both centered horizontally, but ALSO have them vertically centered in the middle.
Any help would be appreciated!
A = a row, B = a column, C = an image, D = of text
#TO15108, this can be accomplished using a flexbox. To create one, set the display property value to flex.
From there, you can leverage the justify-content and align-items properties to get the vertical and horizontal centering you are trying to accomplish.
I've included a code snippet for you to see how this works. Make sure to expand it to it's full size.
.d-flex {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.col {
flex: 0 0;
max-width: 50%;
padding: 0px;
margin-right: 5px;
text-align: center;
}
<div class="d-flex">
<div class="col">
<img src="http://via.placeholder.com/350x150">
<div>some text</div>
</div>
<div class="col">
<img src="http://via.placeholder.com/350x150">
<div>some text</div>
</div>
</div>
You could use the a table: table cells can be aligned vertically using the "vertical-align:middle" property.
Here is a quick fiddle: https://jsfiddle.net/rL927hn0/
The page itself is a table:
#page {position:absolute;width:100%;height:100%;display:table;}
The content is placed within the table-cell (the A element in your example):
#content {display:table-cell;vertical-align:middle;text-align:center;}
Each section of the content (the B element in your example) is an inline-block:
.square {display:inline-block;}
Cheers
I have been reading widely about this but haven't been able to solve it to my satisfaction.
I have a div (<section>) that contains one <p> and 3 <div>s. I would like to distribute the 3 divs equally in one line so that the left border of the 1st div is on the left border of the document (<body>) and the the right border of the 3rd div on the right border of the document.
I don't want to use float because the backround-color would vanish.
I have tried flex but justify-content did not yield the expected outcome.
Here's the code on JSBIN.
Thank you!
You can use display: flex on the container, and set the width of the three div elements to take up one third (or as close as we can get) of its container. The container must have a set width (either pixel or percentage) for it to work.
#container {
display: flex;
height: 600px;
width: 600px;
background-color: lightgreen;
}
#container div {
border: 1px solid black;
margin: 0 10px;
width: 33.333333%;
}
#container div img {
width: 100%;
}
<div id="container">
<div id="content1">
I'm some content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/P8z2H80.jpg">
</div>
<div id="content2">
I'm some more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/NfnBZAI.jpg">
</div>
<div id="content3">
I'm even more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/W8M37N2.jpg">
</div>
</div>
So I have a flex-box, or more precisely only a box (display: box) since that's what Sass Compass generates.
I want it to:
base it's height on its content
make the "columns" stretch so that their backgrounds fill the entire parent
have the content of the columns vertically centered.
Like so:
see it on jsbin
The problem is that requirement 2 and requirement 3 in the list above collide. I can have the content vertically centered with box-align: center but to have the backgrounds stretch I must use box-align: stretch.
In the example above I'm using
#div1 { display: table; height: 150px; }
#div1 > div { display: table-cell; vertical-align: middle; }
The problem is that I can't specify a fixed height since the height is decided by the content of the 3rd column (lime).
Any way to solve this without javascript? Nested flex-boxes (tried but can't get to work)? display: table as above?
I don't see the need for the flex box css if you are just trying to get three columns of equal height, that grow with the content and have vertical alignment
If you just use the following structure
<div class="table">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>
You can use these styles:
.table {display:table; width:100%;}
.cell {display:table-cell; vertical-align:middle; width:33.33%;}
Example