This is how I want the page to split, so that I can have a fluid layout.
<div class="container">
<div class="top">Top</div>
<div class="image">image</div>
<div class="footer">footer</div>
</div>
.container{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
.top {
flex: 25%;
width: 100%;
background-color: red;
}
.image {
flex: 50%;
width: 100%;
background-color: green;
}
.footer{
flex: 25%;
width: 100%;
background-color:blue;
}
https://jsfiddle.net/9n7zmr60/
In the image section, I wanna insert an image and I want it to fit in the same ratio (25% 50% 25%) as above. However, when I try, its getting stretched like below:
.container{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
.top {
flex: 25%;
width: 100%;
background-color: red;
}
.image {
flex: 50%;
width: 100%;
background-color: green;
max-width: 100%;
object-fit: contain;
}
.footer{
flex: 25%;
width: 100%;
background-color:blue;
}
https://jsfiddle.net/qcnwu7fe/
Please help
Do this changes:
.image {
flex: 50%; /*delete this*/
height: 50%;
width: 100%;
background-color: green;
}
img{
height: 100%;
width: 100%;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
.top {
flex: 25%;
width: 100%;
background-color: red;
}
img {
height: 100%;
width: 100%;
}
.image {
width: 100%;
background-color: green;
height: 50%;
}
.footer {
flex: 25%;
width: 100%;
background-color: blue;
}
<div class="container">
<div class="top">Top</div>
<div class="image"><img src="https://static1.momsimage.com/wordpress/wp-content/uploads/2019/08/Kids-cartoons.jpg" alt=""></div>
<div class="footer">footer</div>
</div>
Related
I have a container with 3 elements that together share a width of 100% (25%,50%,25%). If the container has less than 800px the order of the elements should be changed. #box2 has a width of 100%. #box1 and #box3 should both have a width of 50% and be on the same column.
So as a final result I should have one column with #box2 at 100% and a second column with #box1 and #box2 at 50%. How do I get #box1 and #box3 to be in the same column in the code below?
JsFiddle (link)
#container {
display: flex;
flex-direction: row;
max-width: 100vw;
width: 100%;
}
#box1 {
background: yellow;
width: 25%;
}
#box2 {
background: orange;
width: 50%;
}
#box3 {
background: red;
width: 25%;
}
/* Large Ansicht */
#media only screen and (max-width: 800px) {
#container {
flex-direction: column;
}
#box1 {
background: yellow;
width: 50%;
order: 2;
}
#box2 {
background: orange;
width: 100%;
order: 1;
}
#box3 {
background: red;
width: 50%;
order: 3;
}
}
<div id="container">
<div id="box1">sidemenu</div>
<div id="box2">app</div>
<div id="box3">sidemenu 2</div>
</div>
You could replace flex-direction: column; with flex-wrap: wrap; :
#container {
display: flex;
flex-direction: row;
max-width: 100vw;
width: 100%;
}
#box1 {
background: yellow;
width: 25%;
}
#box2 {
background: orange;
width: 50%;
}
#box3 {
background: red;
width: 25%;
}
/* Large Ansicht */
#media only screen and (max-width: 800px) {
#container {
flex-wrap: wrap;
}
#box1 {
background: yellow;
width: 50%;
order: 2;
}
#box2 {
background: orange;
width: 100%;
order: 1;
}
#box3 {
background: red;
width: 50%;
order: 3;
}
}
<div id="container">
<div id="box1">sidemenu</div>
<div id="box2">app</div>
<div id="box3">sidemenu 2</div>
</div>
I want to have the ability to move the .secDiv down when resizing the browser. Currently the coloured squares in the .boxes overlap the .secDiv when scaling the browser down.
Please assist.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.boxes {
position: relative;
width: 100%;
height: 300px;
border: 2px solid pink;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
.secDiv {
position: relative;
width: 100%;
height: 300px;
border: 2px solid yellow;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red2 {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green2 {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue2 {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
<div class="boxes">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<div class="secDiv">
<div class="red2"></div>
<div class="green2"></div>
<div class="blue2"></div>
</div>
I would suggest using dynamic heights such as % or vh. Because you have a fixed height of 300px. It will try to keep that height when resizing, and simply your content doesn't fit in a 300px height when you resize. You can use something simple like overflow-y: scroll if you want to use a fixed height, but I don't think that is what you're going for. I added width: 50% on your boxes and secDiv classes. You can use either 50%, 25% or whatever you desire for your end result. But I would stay away from using fixed units when looking for a responsive design.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.boxes {
position: relative;
width: 100%;
height: 50%;
border: 2px solid pink;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
.secDiv {
position: relative;
width: 100%;
height: 50%;
border: 2px solid yellow;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red2 {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green2 {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue2 {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
<div class="boxes">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<div class="secDiv">
<div class="red2"></div>
<div class="green2"></div>
<div class="blue2"></div>
</div>
I've added the #media query, so it changes responsively when the browser resizes, and the <div>'s break nicely under each other.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
}
.boxes {
position: relative;
width: 100%;
height: 300px;
border: 2px solid pink;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
.secDiv {
position: relative;
width: 100%;
height: 300px;
border: 2px solid yellow;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.red2 {
width: 300px;
background-color: red;
height: 150px;
margin: 15px;
}
.green2 {
width: 300px;
background-color: green;
height: 150px;
margin: 15px;
}
.blue2 {
width: 300px;
background-color: blue;
height: 150px;
margin: 15px;
}
#media(max-width: 994px) {
.secDiv, .boxes {
height: 600px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="boxes">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
<div class="secDiv">
<div class="red2"></div>
<div class="green2"></div>
<div class="blue2"></div>
</div>
</body>
</html>
I am trying to make a content slider with a chatbox to the side and a footer stuck to the bottom.
Here is a diagram of what I am trying to achieve:
The problem with below code is that the chatbox is the height of the page. I want the chat box to stop at the footer so that it is the height of the page -60px.
And here is what I have so far:
body {
margin: 0;
}
.wrapper {
background: #95a5a6;
display: table;
height: 100vh;
width: 100%;
}
.wrapper-inner {
display: table-cell;
padding-left: 300px;
padding-bottom: 60px;
vertical-align: middle;
text-align: center;
}
.chatbox {
background: #bdc3c7;
min-height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
z-index: 2;
}
.footer {
background: #2c3e50;
bottom: 0px;
height: 60px;
position: absolute;
width: 100%;
z-index: 1;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner">Content</div>
</div>
<div class="footer"></div>
https://jsfiddle.net/bjxsyve7/4/
Here's a simplified version using only flex and calc():
body {
display: flex;
flex-wrap: wrap;
margin: 0;
}
.chatbox {
flex: 0 0 300px;
height: calc(100vh - 60px);
overflow-y: auto;
background-color: #bdc3c7;
}
.content {
flex: 1;
background-color: #95a5a6;
}
.footer {
flex-basis: 100%;
height: 60px;
background: #2c3e50;
}
<div class="chatbox"></div>
<div class="content">Content</div>
<div class="footer"></div>
jsFiddle
You can use CSS calc() to achieve this. Add this min-height: calc(100% - 60px) to .chatbox. For more info about calc().
body {
margin: 0;
overflow-x:hidden;
}
.wrapper {
background: #95a5a6;
display: table;
height: 100vh;
width: 100%;
}
.wrapper-inner {
display: table-cell;
min-height: 100%;
padding-left:300px;
padding-bottom: 60px;
}
.chatbox {
background: #bdc3c7;
min-height: calc(100% - 60px);
position: absolute;
overflow-x: hidden;
overflow-y: auto;
top:0;
width: 300px;
z-index: 2;
}
.footer {
background: #2c3e50;
bottom: 0px;
height: 60px;
position: absolute;
width: 100%;
z-index: 1;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner"></div>
</div>
<div class="footer"></div>
You need only adding this:
.wrapper{
position: relative;
}
In your code the chatbox div has height 100% of the body. But if you set position: relative; to it's parent(.wrapper) it will have height 100% of it's parent.
This is an easy way to do this with flex:
body {
display: flex;
flex-direction:column;
min-height: 100vh;
}
.wrapper {
background: #95a5a6;
display: flex;
flex: 1;
}
.chatbox {
background: #bdc3c7;
overflow-x: hidden;
overflow-y: auto;
width: 200px;
}
.footer {
background: #2c3e50;
height: 60px;
}
<div class="wrapper">
<div class="chatbox"></div>
<div class="wrapper-inner">Content</div>
</div>
<div class="footer"></div>
I want to make a header with a centered textbox in it but can't seem to center it. I know countless similar questions have been asked but I can't wrap my head around how I would do it with the textbox on top of the image.
Does anyone here have a solution? I prefer using flex.
In the code snippet I'm trying to center the red box.
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back {
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
margin-left: 25%;
margin-top: auto;
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back {
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
left: 50%; /* center horizontally */
top: 50%; /* center vertically */
transform: translate(-50%,-50%) /* tweak for precise centering; details:
http://stackoverflow.com/q/36817249 */
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>
here is another answer jsfiddle 1
#container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
background: purple;
width: 100%;
height: 100vh;
}
#back{
background: blue;
height: 80%;
width: 80%;
}
#top {
position: absolute;
background: red;
width: 40%;
height: 40%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 12%;
}
<div id="container">
<div id="top"></div>
<div id="back"></div>
</div>
Is it possible without table tag or display: table?
https://monosnap.com/file/MoxMr7WehKJD4RyKWPTJ7Dyqg8dsez
<div class="wrapper">
<div class="title">Some title</div>
<div class="content">Content</div>
</div>
.wrapper {
border: 3px solid yellow;
width: 250px;
height: 350px;
position: fixed;
top: 10px;
left: 10px;
background: green;
}
.title {
min-height: 30px;
max-height: 80px;
background: blue;
}
.content {
background: red;
height: 100%;
}
http://jsfiddle.net/wqozs28y/
Ill try it with position absolute, but i donw know what will be the height on TITLE div :(
Yes, you can use flexbox depending on what level of browser support you want.
.wrapper {
border: 3px solid yellow;
width: 250px;
height: 350px;
position: fixed;
top: 10px;
left: 10px;
background: green;
display: flex;
flex-direction: column;
}
.title {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
min-height: 30px;
max-height: 80px;
background: blue;
}
.content {
background: red;
flex-grow: 1;
}
<div class="wrapper">
<div class="title">Some title</div>
<div class="content">Content</div>
</div>
JSFiddle Demo