My problem is that whenever I resize the window, the divs should warp to the next row if there is not place with the same size as all the other divs.
View this in "Full Page" and try to resize yourself.
<html>
<body>
<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;">
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
</div>
</body>
</html>
This is how it should look like:
They can't have the same size on 2nd row with the given setup.
And reason is when you set flex: 13px, it means flex: 1 1 13px, hence they will grow, if there is space left, until they reach the max-width, and when to little space, they will shrink until reaching the min-width.
There is also no possibilities to detect when an item wrap, so to keep the min/max-width concept you need to add a few media query's.
Note, the !important used in the CSS is needed to override the inline value of 250px
Fiddle demo
Stack snippet
body {
margin: 0;
}
#wrapper div {
box-sizing: border-box;
}
#media (max-width: 900px) {
#wrapper div:nth-child(6) { /* 6th child */
max-width: calc(100% / 5) !important;
}
}
#media (max-width: 750px) {
#wrapper div:nth-child(n+5) { /* from 5th child */
max-width: calc(100% / 4) !important;
}
}
#media (max-width: 600px) { /* from 4th child */
#wrapper div:nth-child(n+4) {
max-width: 250px !important;
}
}
<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;">
<div id="content1" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content2" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content3" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content4" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content5" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content6" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
</div>
Change justify-content from center to flex-start in #wrapper which is by default is flex-start and then it align child divs to left every time when user resize.
<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content:flex-start;">
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
</div>
Remove flex: 13px; from the div. Also, you are using same id for all the divs, please remove that. I have used class instead.
Below is the solution
#wrapper {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.content {
text-align: center;
background-color: red;
border: 3px solid grey;
height: 200px;
min-width: 150px;
max-width: 250px;
}
<html>
<head>
</head>
<body>
<div id="wrapper">
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
</div>
</body>
</html>
Related
I have 6 s inside a parent
The height of the internal divs change dynamically based on the underlying data.
The outer Div has a set height.
What I want is that when one of the internal Divs no longer fit (heightwise) in the parent that it should just move over to a "new column" inside the parent Div
Here is a short snippet with my situation:
#outer {
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
Here is another snippet of how I would want it to appear:
#outer {
float:left;
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
<div id="outer">
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
Can anyone suggest anything?
Thanks
Flex wrapping can easily solve this problem.
[If you're using bootstrap, you don't need to write the css written in '*' selector]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#outer {
display: flex;
flex-wrap: wrap;
width: 200px;
height: 90px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
I am trying to make menu items out of the following items, but I'm struggling with making the text inside the paragraph element responsive to its parent. I tried all positioning combinations, as well as every possible combination with percentages and sizing, but nothing worked the way it's supposed to.
I just want to have the text centered inside the circles...
.div-1 {
display: inline-block;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
}
<span class="navbar-text">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programs</p>
</div>
</span>
You can see I used flexbox to achieve what you wanted.
.navbar-text {
display: flex;
justify-content: space-around;
}
.div-1 {
display: flex;
align-items: center;
justify-content: center;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
}
<span class="navbar-text">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programs</p>
</div>
</span>
Here you go using flex box for aligment.
.div-1 {
display: flex;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
align-items:center;
justify-content: center;
}
.div-1 p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<span class="navbar-text" style="display:flex">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programsasdfsdfsdfsdfds</p>
</div>
</span>
I decided to add not-flex approach
You can try to use text-align and line-height. But one issue here - it doesn't support multiline. If you want long texts - then use flex.
.div-1 {
display: inline-block;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
text-align: center;
line-height: 80px;
}
.div-1 > p {
margin: 0;
}
<span class="navbar-text">
<div class="div-1">
<p>Home</p>
</div>
<div class="div-1">
<p>Services</p>
</div>
<div class="div-1">
<p>Programs</p>
</div>
</span>
.div-1 {
display: flex;
margin: 0 15px;
border: solid 1px blue;
padding: 20px;
height: 80px;
width: 80px;
border-radius: 50%;
align-items:center;
justify-content: center;
}
.div-1 p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The below diagram was given to me in an interview questions and the interviewer told me that I am missing clear:both in my code.
I tried something like this. But couldn't get the desired results
.name3 {
border: 1px solid black;
height: 50px;
width: 90px;
}
.name {
border: 1px solid black;
height: 10px;
width: 90px;
}
.name1 {
border: 1px solid black;
height: 40px;
width: 30px;
}
#name2 {
border: 1px solid black;
height: 20px;
width: 30px;
float: left;
}
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
</div>
</body>
Try this
.name3 {
border: 1px solid black;
height: 55px;
width: 100px;
float: left;
}
.name {
border: 1px solid black;
height: 10px;
width: 99px;
float: left;
}
.name1 {
border: 1px solid black;
height: 42px;
width: 34px;
float: left;
}
#name2 {
border: 1px solid black;
height: 20px;
width: 30px;
float: left;
}
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
<div id="name2"></div>
</div>
</body>
I tried to reproduce this with Flexbox.
Here you can learn more: https://www.w3schools.com/css/css3_flexbox.asp
.top,.side,.square {
padding: 5px;
box-sizing: border-box;
border: 1px solid black;
}
.container {
display: flex;
flex-direction: column;
width: 200px;
}
.container .main {
display: flex;
flex-direction: row;
max-width: 200px;
}
.container .main .content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container .main .content .square {
width: 50%;
}
<div class="container">
<div class="top">.top</div>
<div class="main">
<div class="side">.side</div>
<div class="content">
<div class="square">.square</div>
<div class="square">.square</div>
<div class="square">.square</div>
<div class="square">.square</div>
</div>
</div>
</div>
Hi SIMIN i have read your question and here is my solution to that. Copy past the code below in your editor. Also note that i was using opera browser for running this code, so if you are using different browser there may be a little difference in output. Good luck
<html>
<head>
<style>
.name3{
border: 1px solid black;
height: 53px;
width: 93px;
}
.name{
border: 0.5px solid black;
height: 10px;
width: 92px;
float: left;
}
.name1{
border: 0.5px solid black;
height: 41px;
width: 30px;
float: left;
clear: left;
}
#name2one{
height: 20px;
width: 30px;
border: 0.5px solid black;
float: left;
clear: none;
}
</style>
</head>
<body>
<div class="name3">
<div class="name"></div>
<div class="name1"></div>
<div id="name2one"></div>
<div id="name2one"></div>
<div id="name2one"></div>
<div id="name2one"></div>
</div>
</body>
</html>
How about using percentage in width
<div class="wrapper">
<div class="header"></div>
<div class="sidebar"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
.wrapper, .header, .sidebar, .article{
border: 1px solid black;
float: left;
}
.wrapper {
height: 100px;
width: 100px;
}
.header{
width: 100%;
height: 20px;
}
.sidebar {
height: 80px;
width: 33.33%;
}
.article {
height: 40px;
width: 33.33%;
}
<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;">
<img src="" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;">
<div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div>
</div>
I found bottom line of img and #here do not in a line, if I add any text to #here, who can tell me why.
And how to make the #here and img verticall center in the outside (img and #here in the same line )
vertical-align is what you are looking for.
.outside > * {
vertical-align: middle;
}
<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;">
<img src="http://www.fillmurray.com/20/10" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;">
<div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div>
</div>
Do you want it in the horizontal center?
#ImageCtr {
width: 10px;
height: 20px;
}
#outer {
width: 500px;
height: 20px;
background-color: #FF0000;
display: flex;
align-items: center;
justify-content: center;
}
<div id="outer">
<div id="ImageCtr"><img src="http://i.imgur.com/vCVDBHB.png">
</div>
</div>
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is.
Like this: http://s7.postimg.org/tvmmw91jf/theboxes.png
Fiddle: http://jsfiddle.net/NightSpark/1L5027qr/
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
Update: I put in a clearer illustration above than the one I had at first.
The easiest thing you could do to center the elements is using CSS Flexbox.
Here's the HTML :
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
</div>
Here's the CSS :
#footer {
display: flex;
flex-direction: row;
justify-content: space-between;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
Here's a Fiddle : http://jsfiddle.net/1L5027qr/1/
You can create a 25% width around each div.
<div id="footer">
<div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox1">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox2">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox3">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox4">
</div>
</div>
</div>
If you are able to modify the mark-up a little:
<div id="footer">
<div id="fbox1" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox2" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox3" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox4" class="outer">
<div class="inner">...</div>
</div>
<div>
CSS:
#footer {
width: 100%;
clear:both;
}
#footer .outer {
width: calc(100% / 4 - 4px);
text-align: center;
display: inline-block;
margin: 0px;
border: 0px;
}
#footer .inner {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
display: inline-block;
}
Fiddle: http://jsfiddle.net/simbunch/wcvb88yg/