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>
Related
I am wondering, if there are any alternative/better ways to create this dashboard layout with flex or maybe grid? So I wouldn't need to add this pusher with 200px margin.
I heard about that it can be done using flex 1 1 0% or something like that, I am not sure how to implement it.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 200px;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
background: blue;
flex: 1;
height: 100vh;
}
.pusher {
margin-right: 200px;
}
.nav{
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="pusher">
</div>
<div class="body">
<div class="nav">
Nav
</div>
test
</div>
</div>
Here you go...
I removed the div with class="pusher" and changed/added the CSS as follows:
.sidebar {
width: 20vw;
}
.body {
position: absolute;
width: 80vw;
right: 0;
}
Basically, I made the div class="sidebar" and the div with class="body" make up to 100 % of the screen but in different relative units, i.e. vw (20 vw + 80 vw = 100 vw). So, now I just needed to add right: 0; to the div with class="body" in order to achieve the exact same result as you did with margin-right: 200px;. I also added position: absolute; to the div with class="body", otherwise it won't work.
See the snippet below.
body {
margin: 0;
}
.content {
display: flex;
}
.sidebar {
position: fixed;
left: 0;
width: 20vw;
background: red;
height: 100vh;
overflow-y: auto;
}
.body {
position: absolute;
background: blue;
height: 100vh;
width: 80vw;
right: 0;
}
.nav {
background: yellow;
height: 60px;
}
<div class="content">
<div class="sidebar"></div>
<div class="body">
<div class="nav">Nav</div>
<div>test</div>
</div>
</div>
Hi I change your HTML and CSS code and I do my best for you.
HTML CODE:
<div class="main">
<div class="sidebar">This is Sidebar</div>
<div class="content">
<div class="nav">
Nav
</div>
<div class="content-body">
test
</div>
</div>
</div>
CSS Code:
body {
margin: 0;
}
.main{
display: flex;
width: 100vw;
}
.sidebar {
left: 0;
width: 200px;
background: red;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
width: 100vw;
background: #ddd;
height: 100vh;
}
.nav{
background: yellow;
height: 60px;
}
.content-body {
background: blue;
height: 100vh;
}
I want the divs inside content_container to be stacked vertically below each other and not overlap. Please help.
My HTML code:
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
My CSS code:
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav{
position: fixed;
width: 100%;
}
#content{
width: 100%;
}
[1]: https://i.stack.imgur.com/28184.jpg
HTML
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
CSS
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
display: flex;
flex-direction: column;
}
#sub_nav{
position: -webkit-sticky;
position: sticky;
top:0;
width: 100%;
}
#content{
width: 100%;
}
Hope this helps !!
Also, refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for full flexbox reference.
Your problem is the "position: fixed;" for the #sub_nav div.
Remove that and they should stack one on top of the other.
It will be much easily to use flex boxes:
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: red;
width: 200px;
}
#content {
flex: 1;
background: blue;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
Try This...
#content_container{
width: 100%;
height: 100%;
display: flex;
}
#sub_nav{
width: 50%;
height: 200px;
background-color: red;
}
#content{
width: 50%;
background-color: blue;
height: 200px;
}
<body>
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
<body>
Much easier to do with flex boxes.
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: white;
width: 100px;
}
#content {
flex: 1;
background: green;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
position: fixed takes the element out of the flow and make it fixed to the viewport. which leads the next element to overlap.
so you need to let fixed element sub_nav show on top. and content would show by giving it padding on top or move the top start point with relative
element{
position: relative;
top: 20px;
}
Example
#content_container {
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav {
background-color: yellow;
position: fixed;
width: 100%;
z-index: 1;
}
#content {
background-color: cyan;
width: 100%;
padding-top: 30px;
height: 100px;
}
<div id=content_container>
<div id=sub_nav>sub_nav
</div>
<div id=content>content
</div>
</div>
I'm trying to create a specific layout in which:
Two images have to be one to the side of the other, filling all the width
Images height must adapt to create a squared image
In the middle of both images, an icon or text will be placed, as linking the images
The external container doesn't have a fixed height nor width
This is a representation of what I'm looking for:
Side to side images with one overlapping in the center
This is what I've managed to do, but it has the following problems:
Depending on the size of the images, the squares take a different size
The middle icon doesn't go to the middle...
.main_container_1 {
position: absolute;
width: 100%;
height: 600px;
background-color:lime;
margin: 10px;
padding: 10px;
}
.row {
width: 100%;
background-color: yellow;
display:flex
}
.image_cell {
width:50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.image_cell img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
.text-cell {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background:white;
}
.inner {
width: 50px;
height: 50px;
background-color:red;
}
<div class="main_container_1">
<div class="row">
<div class="image_cell">
<img src="http://placehold.it/450x200">
</div>
<div class="image_cell">
<img src="http://placehold.it/200x200">
</div>
<div class="text-cell">
<div class="inner">
text
</div>
</div>
</div>
You basically need to make your .row's height to be half its width (that would give you space for two squares). To do that you need to use the padding trick.
.row {
width: 100%;
padding-top: 50%;
background-color: yellow;
position: relative;
}
and then you'll need to position your images absolutely since you're faking their parent's height with padding.
.image_cell {
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
.image_cell:nth-child(1) {
left: 0;
}
.image_cell:nth-child(2) {
right: 0;
}
and finally you can position your .text-cell in the center using transform like this (you must make sure to put position: relative to the parent container you want to position it relative to, which is .row in this case):
.text-cell {
position: absolute;
background: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Here's the final result:
.main_container_1 {
position: absolute;
width: 100%;
height: 600px;
background-color: lime;
margin: 10px;
padding: 10px;
}
.row {
width: 100%;
padding-top: 50%;
background-color: yellow;
position: relative;
}
.image_cell {
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
.image_cell:nth-child(1) {
left: 0;
}
.image_cell:nth-child(2) {
right: 0;
}
.image_cell img {
width: 100%;
height: 100%
}
.text-cell {
position: absolute;
background: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.inner {
width: 50px;
height: 50px;
background-color: red;
}
<div class="main_container_1">
<div class="row">
<div class="image_cell">
<img src="http://placehold.it/450x200">
</div>
<div class="image_cell">
<img src="http://placehold.it/200x200">
</div>
<div class="text-cell">
<div class="inner">
text
</div>
</div>
</div>
One more thing: you probably want to look into using background images instead to maintain aspect ratio.
In order to solve this, I've added a .square class to maintain the aspect ratio. The other thing I did is use justify-content and align-items on the div surrounding the cells in order to center the text cell.
* {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
color: #fff;
padding: 10px;
background-color: #333;
display: inline-block;
}
.container .cells {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container .cells .image {
flex: 0 0 50%;
background: linear-gradient(
135deg,
rgb(252, 223, 138) 0%,
rgb(243, 131, 129) 100%
);
}
.container .cells .image img {
width: 100%;
height: 100%;
}
.container .cells .text {
position: absolute;
width: 60px;
line-height: 60px;
background-color: #5e2563;
text-align: center;
}
.container p {
margin-top: 10px;
}
.square {
position: relative;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.square .content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="container">
<div class="cells">
<div class="image square">
<div class="content"></div>
</div>
<div class="image square">
<div class="content"></div>
</div>
<div class="text">
middle
</div>
</div>
<p>This is a variable width and height container</p>
</div>
Current Situation
Using the following code I show a couple of divs floated to the left.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
white-space: nowrap;
}
.column {
height: 500px;
width: 150px;
background: red;
float: left;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
Current result:
Problem
What I want is that the red boxes don't wrap within its container. I want both, a vertical and horizontal scroll bar if the space is not enough. For the vertical scrollbar it works. What am I missing?
JSFiddle: https://jsfiddle.net/brainchest/j6zh400v/
A fix I found was to change the .column from being a float: left to display: inline-block. This treats each column as a "word" (like a word in text) and thus the white-space: no-wrap; applies. Otherwise, the float: left changes the way the element gets positioned.
Edited Fiddle: https://jsfiddle.net/9bo4f5pv/
Use display: flex on the parent, then flex: 0 0 150px on the columns.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
display: flex;
}
.column {
height: 500px;
flex: 0 0 150px;
background: red;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
I don't understand why the float: right doesn't work on the other box.
Anyone who can help me about this?
This is my code:
.main-box {
height: 400px;
width: 400px;
position: relative;
background: black;
}
.right-box {
float: right;
width: 100px;
height: 100px;
background: red;
}
.left-box {
width: 100px;
height: 100px;
background: red;
}
.bottom-boxes {
position: absolute;
bottom: 0;
}
<div class="main-box">
<div class="top-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
<div class="bottom-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
</div>
This is the resulting image of my code:
This is the resulting image I want to achieve:
Because of position: absolute on bottom-boxes so you need to add width: 100%
.main-box {
height: 400px;
width: 400px;
position: relative;
background: black;
}
.right-box {
float: right;
width: 100px;
height: 100px;
background: red;
}
.left-box {
width: 100px;
height: 100px;
background: red;
}
.bottom-boxes {
position: absolute;
bottom: 0;
width: 100%;
}
<div class="main-box">
<div class="top-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
<div class="bottom-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
</div>
But here is better solution using flexbox
.main-box {
height: 200px;
width: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: black;
}
.row {
display: flex;
justify-content: space-between;
}
.box {
width: 50px;
height: 50px;
background: red;
}
<div class="main-box">
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Here's a working fiddle
When you put absolute position on a container, you have to specify also top, right and left property with bottom property to set a width and a height of it.
.bottom-boxes{
position:absolute;
bottom: 0;
left: 0;
right: 0;
}
In this case, left: 0; and right: 0; are equivalent to width: 100%; and top: 0 and bottom: 0; are equivalent to height: 100%;
When you don't specify a value, by default it's "auto;"
float won't work on an absolutely positioned element - you need to give top or bottom and right or left parameters to it (the default setting is top: 0; and left: 0;, i.e. the upper left corner of the parent element).