As you could see the total height is 1000px, inside their 3 boxes which give 600px height in total. What I'm trying to do is to make the last box be in the middle between box2 and end of container. Good solution would be margin: "auto 0" to box3, but it doesn't work.
How can I get that result?
.container {
width: 1000px;
height: 1000px;
background: black;
}
.box1 {
width: 100%;
height: 200px;
background: red;
}
.box2 {
width: 100%;
height: 200px;
background: blue;
}
.box3 {
width: 100%;
height: 200px;
background: green;
}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="center">
<div class="box3"></div>
</div>
</div>
It would be easiest to do something like this, just give the center class the following styles:
.center{
display:flex;
justify-content:center;
align-items:center;
height: 600px;
}
Use CSS Flexbox:
.center-content {
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
}
example
Related
I have a wrapper width fixed width - 300px;
I have a child, content, width width 600px - causing the container to have scrolling.
I have another child, header, that I want to stretch the entire width of the wrapper. I say width 100% - but I only get 300px. I want it to get 600px (the full scrollable width of the wrapper)
I can probably solve this with Flex, but I want to know if there is another way.
Here's a screenshot of my problem:
How do I do that?
.wrapper{
width:300px;
height:300px;
overflow:auto;
background-color:gray;
}
.header{
background-color:red;
width:100%;
height:30px;
}
.content{
height:100px;
width:600px;
background-color:yellow;
}
<div class="wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
It seems the solution is to add an inner wrapper, inside the wrapper, that contains the header and content, and set that inner-wrapper to display:inline-block
.wrapper {
width: 300px;
height: 300px;
overflow: auto;
background-color: gray;
}
.inner-wrapper {
display: inline-block;
}
.header {
background-color: red;
width: 100%;
height: 30px;
}
.content {
height: 100px;
width: 600px;
background-color: yellow;
}
<div class="wrapper">
<div class="inner-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
</div>
You can display the .wrapper as grid with grid-auto-rows: min-content to "glue" their items together:
.wrapper {
display: grid;
grid-auto-rows: min-content; /* or: "align-content: start" */
width: 300px;
height: 300px;
overflow: auto;
background-color: gray;
}
.header {
background-color: red;
width: 100%;
height: 30px;
}
.content {
height: 100px;
width: 600px;
background-color: yellow;
}
<div class="wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
The problem is that you set .header { width: 100% } and it is getting its parent width, which is 300px.
You can set a class with the desired width and set it to the elements you would like to have wider width then the parent.
.wrapper{
width:300px;
height:300px;
overflow:auto;
background-color:gray;
}
.header{
background-color:red;
min-width: 100%;
height:30px;
}
.content{
height:100px;
background-color:yellow;
}
.wide-content {
width:600px;
}
<div class="wrapper">
<div class="header wide-content">
</div>
<div class="content wide-content">
</div>
</div>
You can try using a wrapper for the content and set scroll to that wrapper to prevent the header from scrolling.
Also note the height of the content-wrapper: 100% height - height of header
.wrapper {
width: 300px;
height: 200px;
position: relative;
background-color: gray;
}
.header {
background-color: red;
width: 100%;
height: 30px;
color: white;
}
.content-wrapper {
width: 100%;
overflow: auto;
height: calc(100% - 30px);
}
.content {
height: 100px;
width: 600px;
background-color: yellow;
}
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content-wrapper">
<div class="content">
Content Content Content Content Content Content Content Content Content Content Content Content Content Content
</div>
</div>
</div>
I want to fix and horizontally scrolling with bg class.
And make top:0; with panels class.
I want to these scrolling.
enter image description here
And I want to make like it.
How can I solve this problem?
I use skrollr.js
HTML
<div id="wrapper">
<div class="panels" style="background-color:deeppink">Panel 1</div>
<div class="container">
<div class="bg" style="background-color:red"
data-0="transform:translate3d(0%,0%,0); opacity:1"
data-5000="transform:translate3d(-100%,0%,0); opacity:0">
</div>
</div>
<div class="panels" style="background-color:orange">Panel 2</div>
</div>
CSS
div {
display: inline-block;
}
.panels {
top: 0px;
height: 100px;
width: 10px;
}
.container {
background-color: black;
width: 300px;
height: 200px;
overflow: hidden;
}
.bg {
width: 100%;
height: 300px;
}
I'm using Bootstrap v4 alpha4
Currently I have:
.row
.col-xs-12.col-md-8
div A
.col-xs-12.col-md-4
div B
div C
For the xs layout, I'd like the div order to be:
Div B
Div A
Div C
I have no idea how to do this or how to even ask about it. I'm not a front-end dev so I don't know what things are called.
We can change the HTML to whatever we want. It does not have to stay like it is now.
Bootstrap does have column ordering classes, but in this case you can simply use the responsive float classes..
<div class="row">
<div class="col-md-4 pull-md-right">
b
</div>
<div class="col-md-8">
a
</div>
<div class="col-md-4">
c
</div>
</div>
http://www.codeply.com/go/XL5zJELyLD
So using the classes from bootstrap and some general style you can achieve that like I did in this pen.
http://codepen.io/TunderScripts/pen/PGadpr
The Html:
<div class="row">
<div class="col-xs-12 col-md-4 pull-right col1"></div>
<div class="col-xs-12 col-md-8 pull-left col2"></div>
<div class="col-xs-12 col-md-4 pull-right col3"></div>
</div>
the css:
.col1{
background: red;
height: 200px;
}
.col2{
background: blue;
height: 600px;
}
.col3{
background: green;
height: 200px;
}
You can change the default behavior by using their classes for floats(pull-left, pull-right).
Instead of flexbox, I used combination of float and position css properties to get the expected result. Assuming large width as 150px and small width as 100px.
Working Fiddle
.container {
width: 250px;
position: relative;
}
.blue {
width: 150px;
height: 300px;
background: blue;
position: absolute;
}
.pink {
width: 100px;
height: 100px;
background: pink;
float: right;
}
.green {
width: 100px;
height: 100px;
background: green;
clear: right;
float: right;
}
#media (max-width: 450px) {
.blue {
position: relative;
}
.green,
.pink {
float: none;
width: 150px;
}
}
<div class="container">
<div class="pink"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
As promised, a simple draft
HTML
<div class="row">
<div class="col1">DIV A</div>
<div class="col2">DIV B</div>
<div class="col3">DIV C</div>
</div>
CSS
.row {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
width: 400px;
margin: 0 auto;
}
.col1 {
width: 200px;
height: 400px;
background-color: #86a0ff;
}
.col2 {
width: 150px;
height: 150px;
background-color: #ff6cde;
}
.col3 {
margin-top: -200px;
margin-left: auto;
width: 150px;
height: 150px;
background-color: #35af6d;
}
#media (max-width: 768px) {
.row {
justify-content: center;
flex-direction: column;
}
.col1 {
order: 2;
width: 200px;
margin-top: 50px;
}
.col2 {
order: 1;
width: 200px;
}
.col3 {
order: 3;
width: 200px;
margin-top: 50px;
margin-left: 0;
}
}
As for explanation, here is a great guide to flexbox. The main idea in my example is that by using order property you can manipulate the order in which blocks are displaying. The main plus of using flexbox is that you won't need to load any library(such as Bootstrap) to achieve the desired result, such as responsiveness. And it also has a good browser support, unless you need to support older versions of browsers. I hope my answer will be helpful for you!
I am trying to make a flex container of divs in which all the divs will have the same width (two divs per line, 50% width of the container each of them).
I have set the divs inside the container with max-width: 50%; because I want them to be equals but it does not seem to respect this max-width when there is only one item in this line.
HTML:
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
</div>
<div id="right" class="block">Right</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
}
#container{
display: flex;
height: 100%;
background-color: blue;
}
.block{
flex: 1;
}
#left{
background-color: green;
}
#center{
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
}
#right{
background-color: orange;
}
.flexContainer{
flex: 1;
min-width: 100px;
max-width: 50%;
height: 150px;
background-color: red;
padding: 10px;
}
.flexDiv{
width: 100%;
height: 100%;
background-color: yellow;
}
JSFiddle in which you can see how the width of the third element is bigger than the others.
Why the flex divs inside the container are not respecting max-width property?
Thanks in advance!
you can reset or switch box model to include padding within width calculation:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
https://www.w3.org/TR/css-ui-3/#box-sizing
.flexContainer{
flex: 1;
min-width: 100px;
max-width: 50%;
height: 150px;
background-color: red;
padding: 10px;
box-sizing:border-box;/* includes borders & padding within width calculation
}
https://jsfiddle.net/b5h9rjcd/1/
Is it possible to use flexbox to have a div that will fill the entire remaining area (using flex-grow: 1) and have its' child div dimensions in percentages?
I tried:
<div style="height:700px; width 100%; display:flex; flex-direction: column; background-color:red;">
<div>Hello Plunker!</div>
<div style="background-color:green; flex-grow:1;">
<div style="background-color: blue; height:70%; width:70%;"></div>
</div>
</div>
Is flexbox the right way to achieve this?
Yes, it's entirely possible as mentioned in this question
You just need to specific a height of 100% for the child (holding the grandchild element)
JSfiddle Demo
.child {
background-color:green;
flex-grow:1;
height: 100%;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.parent {
height: 100%;
display: flex;
flex-direction: column;
background-color: rgba(255, 0, 0, 0.5);
}
.child {
background-color: green;
flex-grow: 1;
height: 100%;
}
.g-child {
background: blue;
height: 70%;
width:70%;
}
<div class="parent">
<div>Hello Plunker!</div>
<div class="child">
<div class="g-child"></div>
</div>
</div>
Needed to set the parent div as 'position:relative;' and the child as 'position:absolute;'
<div style="height:700px; width 100%; display:flex; flex-direction: column; background-color:red;">
<div>Hello Plunker!</div>
<div style="background-color:green; flex-grow:1; position:relative;">
<div style="background-color: blue; position:absolute; height:100%; width:100%;"></div>
</div>
</div>