I made a quick wireframe of what I'm trying to create down below.
I'm simply trying to just highlight 25% of the left side of the childDiv to be green, and 65% of the right side to be red.
I want to establish the correct spaces to have the left childInnerDiv to be green, and right childInnerDiv to be red. But it doesn't seem to work...
What I'm trying to Create:
What I have:
JsFiddle: http://jsfiddle.net/8vhgq6k3/
HTML Code
<div class="ProjectsParentDiv">
<div class="childDiv">
Foo
<div class="childInnerDiv left">
</div>
<div class="childInnerDiv right">
</div>
</div>
<div class="childDiv">
Bar
</div>
<div class="childDiv">
Baz
</div>
</div>
CSS Code
.ProjectsParentDiv {
// position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: max-width;
height: 40%;
border: 1px solid black;
}
.childDiv {
display: flex;
background-color: lightblue;
width: 75%;
height: 150px;
margin: 5px auto;
}
.childInnerDiv {
//trying to make the childInnerDiv to be 95% height & width. of the ChildDiv
height: 95%;
width: 95%;
}
.childInnerDiv.left {
flex: 25; //25% of the left side is a div for image.
background: green;
border: 1px solid yellow;
}
.childInnerDiv.right {
flex: 65; //65% of right side is a div for description
background: red;
border: 1px solid silver;
}
You can do below.
.ProjectsParentDiv {
// position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: max-width;
height: 40%;
border: 1px solid black;
}
.childDiv {
align-items: center;
display: flex;;
justify-content: space-around;
background-color: lightblue;
width: 75%;
height: 150px;
margin: 5px auto;
}
.childInnerDiv {
display: flex;
height: 95%;
}
.childInnerDiv.left {
width: 25%;
background-color: green;
border: 1px solid yellow;
}
.childInnerDiv.right {
width: 65%;
background-color: red;
border: 1px solid silver;
}
<div class="ProjectsParentDiv">
<div class="childDiv">
<div class="childInnerDiv left">
</div>
<div class="childInnerDiv right">
</div>
</div>
<div class="childDiv">
Bar
</div>
<div class="childDiv">
Baz
</div>
</div>
Related
I'm facing this problem where I want to have a header, sidebar and content with flexbox. I can't get to a solution to divide these 3 childs. I've been trying to use flex-grow and flex-direction:row but I'm having a problem.
Image of the website
How I want it to be
<style>
.parent {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
height: 100vh;
border: 20px solid black;
display: flex;
flex-direction: column;
}
.header {
width: 200px;
height: 200px;
background: cornflowerblue;
}
.side {
width: 200px;
height: 200px;
background: rgb(219, 133, 133);
}
.content {
width: 200px;
height: 200px;
background: rgb(115, 202, 180);
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
</style>
<div class="parent">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
You need to create two containers, one for all your elements and one for your header and content.
<div class="parent"> <!-- Container 1 -->
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="container"> <!-- Container 2 -->
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
Then, you can treat each container as a separate flex-box. the parent will have a flex-direction: row; and the container will have flex-direction: column;.
You also want to set values in percentages, not absolute values as you have right now (200px, 20rem..).
.parent {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100vh;
border: 20px solid black;
display: flex;
flex-direction: row;
}
.header {
height: 30%;
background: cornflowerblue;
}
.side {
width: 30%;
height: 100%;
background: rgb(219, 133, 133);
}
.content {
height: 70%;
background: rgb(115, 202, 180);
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
width: 70%;
height: 100%;
}
JSFiddle
Images to illustrate the separation:
You have to wrap your header & content section inside another div. Something like this below example. However, The best way to achieve this layout is using a CSS grid. Here is the complete CSS grid guide
.parent {
display: flex;
height: 100vh;
background: #000;
padding: 5px;
margin: 0;
}
.side {
border: 1px solid #000;
width: 30vw;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
margin-right: 5px;
}
.main-body {
border: 1px solid #000;
width: 70vw;
}
.header,
.content {
display: flex;
justify-content: center;
background: #fff;
}
.header {
height: 25vh;
margin-bottom: 5px;
}
.content {
align-items:center;
height: 70vh;
}
<div class="parent">
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="main-body">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
I don't think that you deeply understand how flexbox work. You should read more about it. I advice you to read a book called CSS-in Depth. You can download it online from a website called Z-lib. Try to understand the code that I posted for you.
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.parent {
height: 100vh;
border: 20px solid black;
display: flex;
background: pink;
}
.main {
display: flex;
backgound-color: green;
flex-direction: column;
flex: 2
}
.header {
background: cornflowerblue;
}
.side {
flex: 1;
background: rgb(219, 133, 133);
}
.content {
background: rgb(115, 202, 180);
flex: 1
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
</style>
<div class="parent">
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="main">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
I'm having a bit of difficulty creating a rectangle that looks like this. I'm a novice, any help would be great!
This is what I'm trying to recreate:
I know how to make the rectangle, and I'm assuming you would split the rectangle into two sections, where one would use "table" to create the rows for Name, Diagnosis etc.
#box {
margin-top: 1%;
height: 20px;
width: 562px;
border: 1px solid black;
padding: 100px;
}
.container {
display: table;
width: 100%;
}
.left-half {
position: relative;
left: 0px;
}
.right-half {
position: relative;
right: 0px;
}
Solution
Flex grid <3 they are amazing
I have provided you three examples. Rows, columns and an additional example to show more properties of the flex box.
justify-content and align-items are amazing tools to align things quickly.
Example:
/*ExamplE box*/
.example {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: row; /*Direction of flex*/
justify-content:center; /*horizontally aligns them to center*/
align-items: center; /*Vertically aligns them to center*/
}
.example__children {
width: 5px;
height: 5px;
margin: 0 5px;
border: 1px solid black;
}
/*Column box*/
.column {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.column__children {
width: 100%;
height: 25%;
border: 1px solid black;
}
/*Row box*/
.row {
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
flex-direction: row;
}
.row__children {
width: 25%;
height: 100%;
border: 1px solid black;
}
<div class="example">
<div class="example__children"></div>
<div class="example__children"></div>
<div class="example__children"></div>
<div class="example__children"></div>
</div>
<div class="column">
<div class="column__children"></div>
<div class="column__children"></div>
<div class="column__children"></div>
<div class="column__children"></div>
</div>
<div class="row">
<div class="row__children"></div>
<div class="row__children"></div>
<div class="row__children"></div>
<div class="row__children"></div>
</div>
I would like all my element to have the same height and the separator to cover all the height. How can I achieve that please ?
The separator is pink, you can see it here with a height: 5em
.daddy {
height: 10em;
width: 10em;
}
.container {
width: auto;
height: auto;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
border: 1px solid lightgrey;
}
.child1 {
width: 3em;
height: 10em;
background-color: red;
}
.child2 {
width: 3em;
height: 15em;
background-color: blue;
}
.separator {
width: 10px;
height: 5em;
background-color: pink;
}
<div class="daddy">
<div class="container">
<div class="child1"></div>
<div class="separator"></div>
<div class="child2"></div>
</div>
</div>
If you remove the align items from container, all three columns will grow to fill the row
.daddy {
height: 10em;
width: 10em;
}
.container {
width: auto;
height: auto;
display: flex;
flex-direction: row;
border: 1px solid lightgrey;
justify-content:center;
}
.child1 {
width: 3em;
background-color: red;
height: 10em; /* this is just to give it some height as no column currently has any height */
}
.child2 {
width: 3em;
background-color: blue;
}
.separator {
width: 10px;
background-color: pink;
}
<div class="daddy">
<div class="container">
<div class="child1">
</div>
<div class="separator">
</div>
<div class="child2">
</div>
</div>
</div>
can you please help to get the below output in div using css. if you can customize more it will be much more help full.
You could do something like this using Flexbox:
body {
padding: 5%;
}
.back-div {
width: 500px;
height: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
}
.blue {
background: blue;
width: 400px;
height: 100px;
margin-bottom: 100px;
flex-shrink: 0;
margin-top: -45px;
text-align: center;
}
.yellow {
background: yellow;
width: 400px;
height: 100px;
flex-shrink: 0;
text-align: center;
}
<div class="back-div">
<div class="blue">
<h1> Text 1</h1>
</div>
<div class="yellow">
<h1> Text 2</h1>
</div>
</div>
Fiddle: https://jsfiddle.net/jdzgsxg4/
I want to make a box (flex-item in this case) which always stays in the middle of it's container. In that box, there is a header, footer and content section. If the size of the content grows too big in height, I want the content section to be scrollable. The header and footer should always be visible and the box should always stay in it's container.
Here is what I have been able to write:
HTML
<div class="flex-container">
<div class="flex-item">
<header>Header</header>
<div class="content">
A
<br>B
<br>C
<br>D
<br>E
<br>F
<br>G
<br>H
<br>I
<br>J
<br>K
</div>
<footer>Footer</footer>
</div>
</div>
CSS
body {
margin: 120px;
}
.flex-container {
display: flex;
width: 200px;
height: 200px; /* We can assume that the container's height is hardcoded in this example, but the end solution should work even if this value is changed*/
border: 1px solid black;
justify-content: center;
}
.flex-item {
box-sizing: border-box;
width: 150px;
border: 5px solid blue;
align-self: center;
background-color: red;
display: flex;
flex-flow: column;
max-height: 100%;
}
.content {
/* It should be possible to scroll this element when it get too big in height*/
background-color: grey;
flex: 1;
}
The code is hosted on JSFiddle: https://jsfiddle.net/9fduhpev/3/
To explain the same thing visually, here is the current situation:
Here is what I want:
Use overflow-y: auto;.
Read this: http://www.w3schools.com/cssref/css3_pr_overflow-y.asp
body {
margin: 120px;
}
.flex-container {
display: flex;
width: 200px;
height: 200px;
border: 1px solid black;
justify-content: center;
}
.flex-item {
box-sizing: border-box;
width: 150px;
border: 5px solid blue;
align-self: center;
background-color: red;
display: flex;
flex-flow: column;
max-height: 100%;
}
.content {
background-color: grey;
flex: 1;
overflow-y: auto;
}
<div class="flex-container">
<div class="flex-item">
<header>Header</header>
<div class="content">
A
<br>B
<br>C
<br>D
<br>E
<br>F
<br>G
<br>H
<br>I
<br>J
<br>K
<br>L
</div>
<footer>Footer</footer>
</div>
</div>
I suggest you give it overflow: auto. With that it will be scrollable when needed.
body {
margin: 20px;
}
.flex-container {
display: flex;
width: 200px;
height: 200px;
border: 1px solid black;
justify-content: center;
}
.flex-item {
box-sizing: border-box;
width: 150px;
border: 5px solid blue;
align-self: center;
background-color: red;
display: flex;
flex-flow: column;
max-height: 100%;
}
.content {
background-color: grey;
flex: 1;
overflow: auto;
}
<div class="flex-container">
<div class="flex-item">
<header>Header</header>
<div class="content">
A
<br>B
<br>C
<br>D
<br>E
<br>F
<br>G
<br>H
<br>I
<br>J
<br>K
<br>L
</div>
<footer>Footer</footer>
</div>
</div>
I would do something like this:
.content {
height: 100%;
overflow:auto;
background-color: grey;
flex: 1;
}
https://jsfiddle.net/9fduhpev/4/