I have this div with three inner divs.
ONE - I am div TWO - I am div THREE - I am div
But in mobile it can only fit two divs in a row horizontally, I need divs after 2nd to step down.
Like this:
ONE - I am div TWO - I am div
THREE - I am div
How do I do this?
I am using flex.
Edit
I have added HTML code.
I am using React and other UI component and I tried to minimize it in HTML. It's something like this right now.
<div class="parent">
<div class="child">
<span>ONE</span>
<p>I am div</p>
</div>
<div class="child">
<p>TWO</p>
<p>I am div</p>
</div>
<div class="child">
<span>THREE</span>
<p>I am div</p>
</div>
<div>
.parent {
display: flex;
justify-content: space-around;
margin-bottom: 3rem;
white-space: nowrap;
}
.child {
display: flex;
align-items: center;
margin-left: 1rem;
margin-right: 1rem;
}
You can use flex-wrap to continue on the next line. justify-content will center the div
.outer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Styles below are for demonstration purposes */
.inner {
height: 50px;
width: 300px;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
<div class="outer">
<div class="inner red">A</div>
<div class="inner green">B</div>
<div class="inner blue">C</div>
</div>
This will work for responsive layout, and it also permits them to fit in one line, if the screen size allows it. You can use media query to set it for mobile only.
.outer{
display: flex;
flex-flow: wrap;
text-align: center;
}
.inner{
flex-grow: 1;
}
Related
I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?
You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>
Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container
I have come across a problem whereby if I add rows to an overflow container some of the rows at the top are obscured. My real application is a bit more complicated than this in that it also adds things inside of the row, and if you pick a "wrong" option, then the top row gets hidden completely.
Is it possible to fit all of the rows inside of the container, so that when you scroll all the way to the top, you can always see the topmost row? Currently, depending on how many rows you have, a portion, or whole top row is hidden.
JsFiddle link.
And also code here:
window.onload = function() {
let addBtn = document.getElementById("addRow");
addBtn.addEventListener('click', function() {
let wrapper = document.getElementById("wrapper");
let newRow = "<div class='row'></div>"
wrapper.innerHTML += newRow;
})
};
body {
display: flex;
justify-content: center;
}
#wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 40vh;
width: 1000px;
background-color: yellow;
overflow-y: auto;
}
.row {
display: block;
background-color: aliceblue;
min-height: 50px;
margin-top: 10px;
width: 80%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div id="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div>
<button id="addRow">Add</button>
</div>
</body>
</html>
Remove align-item: center from #wrapper.
The problem is this property align all children rows in the middle of parent #wrapper.
So if you count the rows it's just the half of rows that should be appeared.
Try to inspect it, half of rows are above #wrapper which can't be viewed.
you can also have some padding to #wrapper to have some color below the last row.
check this Fiddle
Updated fiddle with the solution - https://jsfiddle.net/zL61c84x/
#wrapper {
height: 40vh;
width: 1000px;
background-color: yellow;
overflow-y: auto;
}
#wrapperInner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
I am trying to write a code is CSS and normal javascript but it won't work. Here is my code (HTML and CSS).
.wrapper{
height: 100%;
margin: 1.5rem 0 0 0;
display: flex;
}
.first{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
}
.second{
vertical-align:top;
display: inline-block;
flex: 1;
}
<div class="wrapper">
<div class="first">
<div class="times">
<div><h1>TIMES</h1><br></div>
<div class="space">
<h2>TIMES</h2>
<p>GESLOTEN</p>
</div>
<div class="space">
<h2>Dinsdag - Zaterdag</h2>
<p>09:30 UUR - 18:00 UUR</p>
</div>
</div>
</div>
<div class="second">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>TEKST</p></div>
</div>
</div>
</div>
I have tried everything, at least I think I have.
The problem is that I can't fix this in CSS but I tried Java.
Still no success. Can someone please explain why I can't get it the same height.
It's a school project and I need to make a website from scratch.
Here is my full website source code: https://codepen.io/crosso_7/pen/VERrvQ
Both first and second divs are actually the same height - I just copied your snippet and applied a border around each div to see the issue and both divs are equal.
.wrapper{
height: 100%;
margin: 1.5rem 0 0 0;
display: flex;
}
.first{
vertical-align: top;
display: inline-block;
margin-right: 2rem;
flex: 1;
border: solid 1px blue;
}
.second{
vertical-align:top;
display: inline-block;
flex: 1;
border: solid 1px red;
}
<div class="wrapper">
<div class="first">
<div class="times">
<div><h1>TIMES</h1><br></div>
<div class="space">
<h2>TIMES</h2>
<p>GESLOTEN</p>
</div>
<div class="space">
<h2>Dinsdag - Zaterdag</h2>
<p>09:30 UUR - 18:00 UUR</p>
</div>
</div>
</div>
<div class="second">
<div class="welcome">
<div><h1>WELKOM</h1></div>
<div><p>TEKST</p></div>
</div>
</div>
</div>
You can do it using flexbox. Something like this code snippet.
.wrapper {
display: flex;
justify-content: space-between;
}
.wrapper div {
background: #000;
color: #fff;
flex: 1;
margin: 10px;
justify-content: center;
}
<div class='wrapper'>
<div>
<h1>1</h1>
<h2>asasasa</h2>
</div>
<div>2</div>
</div>
Is the first div the one thats higher? It's probably created by the padding from first div content vs seconds less content.
May have to set first and second div with a px or % height which are the same to make it equal.
Try using the code below in your .first and .second divs
flex: 1;
display: flex;
I'm needing to create CSS classes that can display content similar to this design image here: design concept
Obviously, the code statements themselves don't matter. But how can I create CSS that could wrap the containing content as seen in the image and have that work to n nested containers? I've been playing around with div tags and display: inline-block styling but nothing is working out.
Here is what I currently have, using flex-box. This is almost what I need except that the "rows" aren't setting their width to fit the text content as it just sets the width of everything to the largest width child... seems that this approach might not be possible.
.container {
display: inline-flex;
flex-direction: column;
padding-left: 15px;
}
.containerRow {
display: flex;
flex-direction: column;
justify-content: center;
height: 35px;
margin: 5px;
}
.dropContainer {
height: 70px;
border: 1px solid #ccc!important;
background-color: white;
color: black;
}
.purple {
background-color: #872A61;
color: white;
}
.green {
background-color: #478B26;
color: white;
}
<div class="container purple">
<div class="containerRow">
if (something == true) then
</div>
<div class="container green">
<div class="containerRow">
<div><b>where</b> something(x: Number, y:Number) <b>is</b></div>
</div>
<div class="dropContainer">
Some more stuff again
</div>
<div class="dropContainer">
Some more stuff again
</div>
<div class="containerRow">
<b>end</b>
</div>
</div>
<div class="containerRow">
<b>end</b>
</div>
</div>
Use margins or padding styles with percentages to achieve the nth term.
I have a <div> like below
<div style="right:0px;bottom:0px;position:absolute;">
</div>
When my mobile site is opened in portrait mode, this div is displayed correctly at the bottom right corner.
But, when opened in landscape mode it is displayed at corner and overlaps the elements already present.
I want this div to be at the bottom of all elements at the bottom right corner of the page. How do I do it?
I would suggest to use flexbox - but it could need to reorganise a little your css code
.page {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height:100vh;
}
.element {
height: 10px;
width: 80%;
border: 1px solid #000;
padding: 20px 0;
}
.element.bottom {
margin-top: auto;
background: red;
}
<div class="page">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element bottom">
</div>
</div>