I have 7 divs. I am trying to make a three row three column layout. Two of the divs are different sizes. I have everything the way I want it, it's just on the third row one div jumps up to row two, and it wont budge down to row three even with clear:right.I am trying my hardest to have the design Internet Explorer 11 ready before I give up and cut off all traffic to IE.
The way the layout is rendering
The way it should be rendering
<style>
[div_glimg]{ width:390px; height:390px}
[glimg]{ float:left; background-size: cover; }
[div_glvideo], [glvideoobject]{ width:780px; height:390px; float:left}
</style>
<div style="background-color: white ;float:left" div_glimg>
<div glim>
<div glim1title glim1titlerez style=" margin-top:0 !important;">Life<a> in</a> </div>
<div glmaincdiv></div>
<div glimcontent>info.</div>
</div>
</div>
<div style="background-color: hsla(359,36%,62%,1.00); " div_glimg glimg> </div>
<div style="background-color: hsla(213,35%,62%,1.00); " div_glimg glimg> </div>
<div style="background-color: hsla(51,35%,62%,1.00); clear:left" glimgTall glimg> tall</div>
<div style="background-color: hsla(199,35%,62%,1.00); clear:right" div_glvideo> video </div>
<div style="background-color: hsla(302,35%,62%,1.00); " div_glimg glimg> box 1</div>
<div style="background-color: hsla(302,35%,62%,1.00); " div_glimg glimg> box 2</div>
```
Problem : First of all, the answer of the question, that why clear: right; is not working is because when the element, with clear: right; property is rendered, the element in the right of it has not been rendered. That is why, the right element after getting rendered is not affected.
Solution : Either you can choose the grid-system, or if you want to go with what you have, with fixed dimensions, you can do it like this :
<style>
[div_glimg] {
width: 78px;
height: 78px
}
[glimg] {
float: left;
background-size: cover;
}
[div_glvideo],
[glimgTall] {
float: left;
}
[div_glvideo] {
width: 156px;
height: 78px;
}
[glimgTall] {
height: 156px;
width: 78px;
}
[wrapper] {
height: 234px;
width: 234px;
}
</style>
<div wrapper>
<div style="background-color: white ;float:left" div_glimg>
<div glim>
<div glim1title glim1titlerez style=" margin-top:0 !important;">Life<a> in</a> </div>
<div glmaincdiv></div>
<div glimcontent>info.</div>
</div>
</div>
<div style="background-color: hsla(359,36%,62%,1.00); " div_glimg glimg> </div>
<div style="background-color: hsla(213,35%,62%,1.00); " div_glimg glimg> </div>
<div style="background-color: hsla(51,35%,62%,1.00);" glimgTall glimg> tall</div>
<div style="background-color: hsla(199,35%,62%,1.00);" div_glvideo> video </div>
<div style="background-color: hsla(302,35%,62%,1.00); " div_glimg glimg> box 1</div>
<div style="background-color: hsla(302,35%,62%,1.00); " div_glimg glimg> box 2</div>
</div>
I would suggest go for grid layout for better experience. Here is example.
.grid-container {
display: grid;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-column: 1;
grid-row: 1;
}
.item2 {
grid-column: 2;
grid-row: 1;
}
.item3{
grid-column:3;
grid-row:1;
}
.item5 {
grid-column: 2 / span 2;
grid-row: 2;
}
.item4{
grid-row: 2 / span 2;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>A Five Items Grid Layout:</h1>
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item item2">2</div>
<div class="grid-item item3">3</div>
<div class="grid-item item4">4</div>
<div class="grid-item item5">5</div>
<div class="grid-item item6">6</div>
<div class="grid-item item7">7</div>
</div>
<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>
<p>Item 1, 2, and 5 are set to span multiple columns or rows.</p>
</body>
</html>
It would be easier to use CSS Grid for your solution. The layout was generated using this tool: Layoutit Grid
html,
body,
.grid-container {
height: 100%;
margin: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "Div-1 Div-2 Div-3" "Div-4 Div-5 Div-5" "Div-4 Div-6 Div-7";
padding: 10px;
}
div {
border: 2px solid #000;
}
.Div-1 {
grid-area: Div-1;
background: #E975AF;
}
.Div-2 {
grid-area: Div-2;
background: #0075AE;
}
.Div-3 {
grid-area: Div-3;
background: #27408F;
}
.Div-4 {
grid-area: Div-4;
background: #FFF200;
}
.Div-5 {
grid-area: Div-5;
background: #40AD47;
}
.Div-6 {
grid-area: Div-6;
background: #EC008C;
}
.Div-7 {
grid-area: Div-7;
background: #00ADEF;
}
<div class="grid-container">
<div class="Div-1"></div>
<div class="Div-2"></div>
<div class="Div-3"></div>
<div class="Div-5"></div>
<div class="Div-6"></div>
<div class="Div-7"></div>
<div class="Div-4"></div>
</div>
Related
I want div.line with border black like below code to have full height in container scroll.
When there is an element that is too long, for example, line number 4 the borders will be shortened, with no height until the end.
Is there a way for the elements inside the scroll container to always be the same height as the tallest element?
Thanks, everyone!
.container {
display: flex;
align-items: stretch;
height: 300px;
overflow: auto;
}
.line {
width: calc(100% / 4);
border-left: 1px solid #000;
padding: 0 16px;
}
.item {
height: 100px;
background: blue;
color: white;
padding: 16px;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
If I get you right, then
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scroll flex</title>
<style>
.another-container {
height: 300px;
overflow-y: scroll;
}
.container {
display: flex;
}
.line {
width: calc(100% / 4);
border-left: 1px solid #000;
padding: 0 16px;
}
.item {
height: 100px;
background: blue;
color: white;
padding: 16px;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
</style>
</head>
<body>
<div class="another-container">
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
</div>
</body>
</html>
Your solution does not work as intended because you set the height of your flex container explicitly, as #XiaoGuang pointed out. None of flex items could be greater than the container itself. So first step is to remove the height property and let the flex container to become as tall as the tallest flex item. After that, if you still need scrolling, just add another container for that.
You should use grid in this case instead of flex. Take a look at comments in code for more details.
.container {
display: grid; /* change to grid */
grid-template-columns: repeat(4, 1fr); /* create 4 columns */
height: 300px;
overflow: auto;
}
.line {
width: calc(100% - 16px * 2); /* full width column */
border-left: 1px solid #000;
padding: 0 16px;
}
.item {
height: 100px;
background: blue;
color: white;
padding: 16px;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
Since your .line divs also contain an item, you need to make them flexboxs as well, and then make the item grow to the full height. Something like this:
.container {
display: flex;
align-items: stretch;
height: 300px;
overflow: auto;
}
.line {
width: calc(100% / 4);
border-left: 1px solid #000;
padding: 0 16px;
display: flex;
flex-direction: column;
}
.item {
background: blue;
color: white;
padding: 16px;
flex-grow: 1;
}
.line:nth-child(2) .item {
height: 200px;
}
.line:nth-child(4) .item {
height: 600px;
}
<div class="container">
<div class="line">
<div class="item">1</div>
</div>
<div class="line">
<div class="item">2</div>
</div>
<div class="line">
<div class="item">3</div>
</div>
<div class="line">
<div class="item">4</div>
</div>
</div>
And that's basically it.
I have a layout that is a sidebar and a grid both wrapped in a flexbox. I'd like to put a div underneath the grid so it can have prev/next buttons, like in this image, but I can't figure out how to do that. The grid resizes itself with the window so the grid can take as many rows as necessary and then the div should go below that, and be as wide as the grid.
This is what I have, but the div is on the right of the grid:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Boardgame Database</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
aside {
background-color: red;
flex: 1;
min-width: 250px;
}
.grid-container {
flex: 4;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-item {
border: 1px solid black;
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
}
#flex-container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
</style>
</head>
<body>
<div id="flex-container">
<aside class="sidebar">
</aside>
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
</section>
<div id="page-buttons">
prev
next
</div>
</div>
Checkout the following Code.
#main{
display :flex;
}
#sidebar{
width:70px;
height: 300px;
border: solid black 1px;
}
#grid-area{
width:200px;
height: 300px;
border: solid black 1px;
display: block;
}
#grid{
width:200px;
height: 250px;
border: solid black 1px;
display: block;
}
<div id="main">
<div id="sidebar"></div>
<div id="grid-area">
<div id="grid"></div>
<div id="button">next / prev</div>
</div>
</div>
You should use nested flex containers. Section and bottom div should be wrapped inside another flex container with flex direction to column.
So outer flex will make sidebar & inner flex container to be side by side.
Or just use a normal div container instead of flex.
here is another example only with grid keeping the pre/next button at the bottom of the viewport:
body {
margin: 0;
}
#grid-container {
display: grid;
height: 100vh;
grid-template-columns: minmax(250px, 1fr) 4fr;
grid-template-rows: 1fr auto;
}
aside {
background-color: red;
border: 1px solid;
margin: 0.25em;
grid-row: span 2;
grid-column: 1;
}
section,
#page-buttons {
grid-column: 2;
border: solid 1px;
margin: 0.25em;
}
section {
overflow: auto;
}
#page-buttons {
display: flex;
gap: 1em;
padding: 0.5em;
background: lightgray;
justify-content: center;
}
.grid-item {
border: 1px solid black;
padding: 20px;
font-size: 24px;
text-align: center;
overflow: hidden;
}
<div id="grid-container">
<aside class="sidebar">
</aside>
<section class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
<div class="grid-item">17</div>
<div class="grid-item">18</div>
</section>
<div id="page-buttons">
prev
next
</div>
</div>
I would like to make a responsive table layout with DIVs that has two columns and the second column is split into two equal rows so it looks like this.
You can use CSS Flex with flex: 1 and flex: 2
.container {
display: flex;
width: 100%;
height: 300px;
flex-wrap: wrap;
}
.column {
flex: 1;
display: flex;
flex-direction: column;
}
.button {
flex: 1;
color: white;
}
.button.rowspan {
flex: 2;
}
<div class="container">
<div class="column">
<div class="button rowspan" style="background: red;">
Column 1 - rowspan
</div>
</div>
<div class="column">
<div class="button" style="background: green">
Column 2
</div>
<div class="button" style="background: orange">
Column 3
</div>
</div>
</div>
Would be nice to see your attempt of doing it yourself. You can use CSS grid to build responsive layouts:
<html>
<div class="grid">
<div class="left">
</div>
<div class="right-up">
</div>
<div class= "right-down">
</div>
</div>
</html>
CSS:
.grid {
display: grid;
position: absolute;
top: 0;
left: 0;
grid-template-columns: 50vw 50vw;
grid-template-rows: 50vh 50vh;
grid-template-areas:
"left right-up"
"left right-down";
}
.left {
grid-area: left;
background-color: blue;
}
.right-up {
grid-area: right-up;
background-color: green;
}
.right-down{
grid-area: right-down;
background-color: red;
}
JSfiddle: JSfiddle link
Image link How to create css grid layout as given in image link.
I want to add empty space in blank area and cell div element at blue area.
this is how much i am able to achieve.
<html>
<head>
<style>
.grid-contaienr {
display: grid;
grid-template-columns: 120px 100px;
grid-auto-rows: ;
}
.cell {
background-color: aqua;
box-shadow: 0px 0px 1px 0px rgb(71, 71, 71) inset;
}
.cell:nth-child(3n) {
grid-column: 2;
}
.cell:nth-child(3n+1) {
grid-column: 2;
}
.cell:nth-child(3n) {
grid-column: auto/span 2;
}
</style>
</head>
<body>
<div class="grid-contaienr">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">11</div>
<div class="cell">12</div>
<div class="cell">13</div>
<div class="cell">14</div>
<div class="cell">15</div>
<div class="cell">16</div>
<div class="cell">17</div>
</div>
</body>
</html>
I don't want to used grid-area property as my html content is dynamic.
You can pass display: grid to create a grid structure in css. You can read more here CSS_Grid_Layout
.container {
display:grid;
grid-template-columns: 150px 150px;
grid-row: auto auto;
}
.cell {
border: 2px solid #000;
width: 150px;
height: 100px;
}
.container div:nth-child(2),
.container div:nth-child(3),
.container div:nth-child(6),
.container div:nth-child(7){
background-color: blue
}
<div class="container">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
</div>
EDIT: Added blue background to alternate divs
Can I achieve this layout with flexbox with the below document structure?
I want the big <img> on the left with two smaller images on the right and wrapping.
This is what I did, with display: flex on gallery-container and flex-wrap.
.container {
height: 100%;
}
.container .gallery-container {
background-color: #f6f6f6;
display: flex;
flex-wrap: wrap;
width: 300px;
align-items: flex-start;
}
.container .gallery-container .gallery-big-image {
display: block;
width: 200px;
height: 200px;
background: lavender;
}
.container .gallery-container .gallery-small-img {
display: block;
width: 100px;
height: 100px;
background-color: purple;
}
<div class="container">
<div class="gallery-container">
<div class="gallery-big-image">big</div>
<div class="gallery-small-img">small</div>
<div class="gallery-small-img">small</div>
<div class="gallery-small-img">small</div>
<div class="gallery-small-img">small</div>
<div class="gallery-small-img">small</div>
</div>
</div>
(codepen)
The layout is clunky and inefficient with flexbox, for reasons explained here: CSS-only masonry layout
However, the layout is relatively simple and easy with CSS Grid.
No changes to HTML.
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-auto-rows: 100px;
width: 300px;
background-color: #f6f6f6;
}
.gallery-big-image {
grid-column: span 2;
grid-row: span 2;
background: lavender;
}
.gallery-small-img {
background-color: purple;
color: white;
}
<div class="container">
<div class="gallery-container">
<div class="gallery-big-image">big</div>
<div class="gallery-small-img">small 1</div>
<div class="gallery-small-img">small 2</div>
<div class="gallery-small-img">small 3</div>
<div class="gallery-small-img">small 4</div>
<div class="gallery-small-img">small 5</div>
<div class="gallery-small-img">small 6 (continues wrapping)</div>
<div class="gallery-small-img">small 7 (continues wrapping)</div>
</div>
</div>
How about using grid layout instead?
.container {
height: 100%;
}
.gallery-container {
background-color: #f6f6f6;
width: 300px;
height: 100px;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.gallery-img {
background: purple;
width: 100px;
height: 100px;
}
.gallery-img-large {
background: lavender;
width: 200px;
height: 200px;
grid-column-start: 0;
grid-column-end: span 2;
grid-row-start: 0;
grid-row-end: span 2;
}
<div class="container">
<div class="gallery-container">
<div class="gallery-img-large">big</div>
<div class="gallery-img">small</div>
<div class="gallery-img">small</div>
<div class="gallery-img">small</div>
<div class="gallery-img">small</div>
<div class="gallery-img">small</div>
</div>
</div>