I am trying to have a horizontal scrolling page and want the scroll to be 75% of my viewport and vertically aligned. But for some reason the div doesn't get aligned vertically. I tried doing margin left, right, top and bottom but resulted in my code acting unexpectedly. Even I tried using "display flex" but didn't work at all.
<div class="main_background">
<div class="wrapper">
<div class="slide one"></div>
<div class="slide two"></div>
<div class="slide three"></div>
<div class="slide four"></div>
</div>
</div>
and my CSS file...
.slide{
width: 100vw;
height: 80vh;
}
.wrapper{
display: flex;
flex-direction: row;
width: 300vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin:top left;
margin-top: 90px;
}
.one{
background-color: orchid;
}
.two{
background-color: orangered;
}
.three{
background-color: pink;
}
.four{
background-color: green;
}
.main_background{
width: 100vh;
height: 100vw;
background-image: linear-gradient(green, greenyellow);
transform: rotate(-90deg) translateX(-100vh);
transform-origin:top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
It would be greatly helpful if someone can help me with this! Thanks
Try this out. I gave the .wrapper container a height of 100vh and aligned the flexbox along both axes.
.slide {
width: 100vw;
height: 80vh;
}
.wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
width: 300vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin:top left;
margin-top: 90px;
}
.one {
background-color: orchid;
}
.two {
background-color: orangered;
}
.three {
background-color: pink;
}
.four {
background-color: green;
}
.main_background {
width: 100vh;
height: 100vw;
background-image: linear-gradient(green, greenyellow);
transform: rotate(-90deg) translateX(-100vh);
transform-origin:top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
}
<div class="main_background">
<div class="wrapper">
<div class="slide one"></div>
<div class="slide two"></div>
<div class="slide three"></div>
<div class="slide four"></div>
</div>
</div>
Related
To keep things neat and short:
https://jsfiddle.net/m53ockLu/
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-x: scroll;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally? I'm totally out of ideas, I thought that overflow-x & overflow-y should do the trick, but no dice.
Thank you very much for any help.
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally?
No.
I tried Ethan's suggestion and couldn't get the purple box to visibly overflow the scrollbar:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-y: scroll;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
I don't think the browser will let you overflow the scrollbar, I even put z-index, explicitly said to visibly overflow, played around with the position property etc.
Consider this example of letting the content dictate the size:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: max-content;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
background: green;
}
.first {
display: block;
height: 20px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
You made the parent div sidebar have overflow-x: scroll;, overflow-y: auto;. Instead, make each child have its own overflow properties instead of the parent.
I'm creating a grid type layout, the contents of which will be centered, like here.
.outer {
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
I've used text-align: center; but there should be a better way to center the contents vertically too. My issue arises trying to do the same where two of these are next to each other with centered content, like this;
.outer {
width: 50%;
float: left;
position: relative;
background: pink;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
float: left;
position: relative;
background: pink;
}
}
.inner {
position: relative;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
It's looking even worse in a snippet for some reason but something like this would be desired;
I can get the column layout or I can center content. I need to be able to do both.
EDIT
.container {
width: 100%;
height: 500px;
background: pink;
margin-top: 10px;
margin-bottom: 10px;
}
.col {
width: 50%;
float: left;
position: relative;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
position: relative;
}
}
.inner {
position: relative;
}
.inner-details {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="container">
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
</div>
</div>
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 2<h1>
</div>
</div>
</div>
</div>
To center items you can use display: flex on the container div and also use
align-items: center; // vertical
justify-content: center; // horizontal
To achieve the image you attached you don't need so many containers, this can be done simply like in this example:
.container {
width: 100%;
height: 300px;
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
}
#media only screen and (max-width: 500px) {
.inner-details {
width: 50%;
float: left;
position: relative;
}
}
.inner-details {
background: pink;
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
margin: 10px;
}
<div class="container">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
<div class="inner-details">
<h1>Middle 2</h1>
</div>
</div>
I hope this is your desire output. Please check the code snippets.
* {
box-sizing: border-box;
}
.outer {
width: 50%;
height: 100px;
float: left;
position: relative;
background: pink;
margin: 10px 0;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
}
}
.inner {
position: relative;
width: 100%;
height: 100%;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
Using the example from the first snippet and wrapping that twice I've managed to get the desired effect, there's still the issue with having to use text-align to align horizontally but this is the closest I can get without using flex or box-sizing: border-box;. If there's a more appropriate way to do this an example would be appreciated.
.wrap {
width: 100%;
display: table;
}
.col {
width: 50%;
float: left;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
}
}
.outer {a
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="wrap">
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
</div>
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered Too</h1>
</div>
</div>
</div>
</div>
I have a problem with the following snippet: I need to make it work in Internet Explorer 11. In Chrome, Firefox and Edge it looks like it should.
There are 3 elements (red, yellow, green), beneeth each other. Another blue element with 50% of the height is on top of the others.
This is how it should look like:
However Internet Explorer 11 puts the blue element on the right side beneeth the others and not on top of them. Can you guys help me with that problem?
This is how it looks in IE11 - it should not look like this
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
height: 30%;
align-self: center;
position: absolute;
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>
The problem
The issue is that you are positioning .inner absolutely but not giving it a specific position. This means that where the browser first renders it is where it will output on screen. It seems IE handles this differently to other browsers which is why you are getting the discrepancy.
The solution
The following modifications would be required:
Add left: 0; to .inner to align it to the left of .flex-wrapper
Add top: 50%; to .inner to move it down 50% of .flex-wrapper and transform: translateY(-50%); to move it back up by 50% of its height
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
height: 30%;
align-self: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>
I would made some changes.
First:
- Position .inner
- Make it full height thanks to its position
- Make it display: flex
.inner {
position: absolute;
top: 0; bottom: 0; left: 0;
display: flex;
}
Second:
- Give a height to .inner-element
- Center it
.inner-element {
height: 30%;
align-self: center;
}
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
/*height: 30%; No need for that anymore */
/*align-self: center; No need for that anymore */
position: absolute;
top: 0;
bottom: 0;
left: 0; /* Now it's in the right position */
display: flex; /* To be able to align the inner-element */
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
.inner-element {
height: 30%; /* Make it the right height */
align-self: center; /* Center it */
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>
I have tried using overflow: hidden; for each element but it does not seem to be doing anything
The html looks like this, the display is to have the 2 divs side by side (stacks ontop for smaller screens). The left side div will also be on top of the right side div. I have a screen shot and fiddle too.
.sec {
background-color: red;
min-height: 100vh;
overflow: hidden;
}
.sec2 {
background-color: blue;
min-height: 100vh;
overflow: hidden;
}
.img1 {
max-width: 100%;
position: absolute;
}
.img1 {
z-index: 1;
}
.leftCol {
z-index: 10;
width: 50%;
}
.info-row {
display: flex;
flex-direction: row;
margin-left: 10vw;
margin-right: 200px;
}
.rightCol {
width: 50%;
}
<section class="sec">
<div class="info-row">
<div class="leftCol info-column">
<h1>haheaheh</h1>
<p>teataetetat</p>
</div>
<div class='rightCol info-column'>
<img class="img1" src='https://kasonbloom.files.wordpress.com/2017/08/lamb-2.jpg' />
</div>
</div>
</section>
<section class="sec2">
<div class="info-row">
<div class="leftCol info-column">
<h1>asdfasdfasdf</h1>
<p>basfbasdfbasdfba</p>
</div>
<div class='rightCol info-column'>
</div>
</div>
</section>
https://jsfiddle.net/gtrnrd9r/2/ keep result view at a point where the image breaks through the section
Add position:relative; to your outer section .sec and it will work fine.
.sec {
background-color: red;
min-height: 100vh;
overflow: hidden;
position:relative;
}
.sec2 {
background-color: blue;
min-height: 100vh;
overflow: hidden;
}
.img1 {
max-width: 100%;
position: absolute;
}
.img1 {
z-index: 1;
}
.leftCol {
z-index: 10;
width: 50%;
}
.info-row {
display: flex;
flex-direction: row;
margin-left: 10vw;
margin-right: 200px;
}
.rightCol {
width: 50%;
}
<section class="sec">
<div class="info-row">
<div class="leftCol info-column">
<h1>haheaheh</h1>
<p>teataetetat</p>
</div>
<div class='rightCol info-column'>
<img class="img1" src='https://kasonbloom.files.wordpress.com/2017/08/lamb-2.jpg' />
</div>
</div>
</section>
<section class="sec2">
<div class="info-row">
<div class="leftCol info-column">
<h1>asdfasdfasdf</h1>
<p>basfbasdfbasdfba</p>
</div>
<div class='rightCol info-column'>
</div>
</div>
</section>
.rightCol needs his own width and height if i'm not mistaken. overflow doesn't work with the parent element.
I have a layout that is utilizing flex to hold images of varying sizes together.
However, when I resize the browser in Firefox the images don't scale evenly.
I have read a lot of posts about what causes the issue, but I am having a difficult time finding the solution for my particular scenario in the sea of information. Anyone have any ideas?
Image of where the breaks are happening in firefox.
*{box-sizing: border-box;}
.container{
max-width: 1360px;
margin: 0 auto;
}
img{
border:2px solid white;
}
.flex-row {
justify-content: flex-start;
align-items: flex-start;
width: 100%;
display: flex;
flex-direction: row;
}
.flex-column{
align-items: flex-start;
height: 100%;
max-width: 1360px;
display: flex;
flex-direction: column;
}
#media (max-width: 600px) {
.flex-column, .flex-row{
display: block;
}
img{
width: 100%;
}
}
<div class="container">
<div class="flex-row row">
<div class="flex-column">
<div><img src="https://placehold.it/548x227"></div>
<div><img src="https://placehold.it/548x459"></div>
</div>
<div class="flex-column">
<div class="flex-row">
<div><img src="https://placehold.it/812x459"></div>
</div>
<div class="flex-row bug">
<div><img src="https://placehold.it/406x227"></div>
<div><img src="https://placehold.it/406x227"></div>
</div>
</div>
</div>
<div class="flex-row row">
<div><img src="https://placehold.it/812x459"></div>
<div><img src="https://placehold.it/548x459"></div>
</div>
</div>
Here is a link to the code: https://codepen.io/enigmas2/pen/zZYPJj
i'm pretty sure firefox's flex-box is bugged out. columns don't seem to work properly.
despite that, you can kind of achieve the same thing using the float property. it took more code than i expected, however.
a potential issue is that a lot of elements have fixed heights. as i mentioned before, too, another issue with doing it this way is that images will be cropped. (notice the ikea and cheerio logos. it's because their widths far outweighs their heights).
here is a codepen.
body {
margin: 0;
}
#container {
width: 75vw;
height: 1145px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#row-one {
width: 75vw;
display: block;
}
#left-column {
width: 40.294117647058823529411764705882%;
height: 686px;
float: left;
display: flex;
flex-direction: column;
}
#top-left-image {
width: 100%;
height: 227px;
background: url('https://i.ytimg.com/vi/cNGG2SswaKo/maxresdefault.jpg') center/cover;
}
#middle-left-image {
width: 100%;
height: 459px;
background: url('https://s-media-cache-ak0.pinimg.com/originals/8b/da/34/8bda3460f271a77a54b4cfc08583b1fc.jpg') center/cover;
}
#right-column {
width: 59.705882352941176470588235294118%;
height: 686px;
float: right;
display: flex;
flex-direction: column;
}
#top-right-image {
width: 100%;
height: 459px;
background: url('http://cdn.designcrowd.com.s3.amazonaws.com/blog/Famous-Purple-Logos/1-famous-purple-logos.png') center/cover;
}
#right-column-row {
width: 100%;
}
#middle-middle-image {
width: 50%;
height: 227px;
float: left;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Ikea_logo.svg/1024px-Ikea_logo.svg.png') center/cover;
}
#middle-right-image {
width: 50%;
height: 227px;
float: right;
background: url('https://s-media-cache-ak0.pinimg.com/originals/f9/bd/c8/f9bdc85df698cd33535f3517659b9c03.jpg') center/cover;
}
#row-two {
width: 75vw;
height: 459px;
display: block;
}
#bottom-left-image {
width: 59.705882352941176470588235294118%;
height: 459px;
float: left;
background: url('http://logok.org/wp-content/uploads/2014/11/Sprite-logo-2014.png') center/cover;
}
#bottom-right-image {
width: 40.294117647058823529411764705882%;
height: 459px;
float: right;
background: url('https://s-media-cache-ak0.pinimg.com/736x/58/6f/a9/586fa96b662feb46fd10d179a3f5308d.jpg') center/cover;
}
#media screen and (max-width: 768px) {
#left-column, #right-column, #right-column-row, #bottom-left-image, #bottom-right-image {
width: 100%;
float: none;
}
.some-images {
width: 100%;
}
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="a.css">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<div id="container">
<div id="row-one">
<div id="left-column">
<div class="not-all-images" id="top-left-image"></div>
<div class="not-all-images" id="middle-left-image"></div>
</div>
<div id="right-column">
<div class="not-all-images" id="top-right-image"></div>
<div id="right-column-row">
<div id="middle-middle-image"></div>
<div id="middle-right-image"></div>
</div>
</div>
<div>
<div id="row-two">
<div class="not-all-images" id="bottom-left-image"></div>
<div class="not-all-images" id="bottom-right-image"></div>
</div>
</div>
</body>
</html>