i have the below structure on my website and there are alternating float:left and float:right assigned to these div containers. But now I want all these divs not to appear side by side (as they do right now) but one below the other
html
<div class="chat">
<div class="chat-message a">...</div>
<div class="chat-message b">...</div>
<div class="chat-message a">...</div>
<div class="chat-message b">...</div>
</div>
css
.chat{
min-height: 100px;
max-height: 600px;
height: 600px;
overflow-y: scroll;
position: relative;
}
.chat-message{
background-color: #D3D3D3;
max-width: 90%;
margin: 20px 15px 0 15px;
border-radius: 8px;
}
.a{
float: left;
background-color: #79d2a1;
}
.b{
float: right;
background-color: #7eaacd;
}
Add clear: both; to the chat-message class, as follows:
.chat{
min-height: 100px;
max-height: 600px;
height: 600px;
overflow-y: scroll;
position: relative;
}
.chat-message{
background-color: #D3D3D3;
max-width: 90%;
margin: 20px 15px 0 15px;
border-radius: 8px;
clear: both;
}
.a{
float: left;
background-color: #79d2a1;
}
.b{
float: right;
background-color: #7eaacd;
}
<div class="chat">
<div class="chat-message a">...</div>
<div class="chat-message b">...</div>
<div class="chat-message a">...</div>
<div class="chat-message b">...</div>
</div>
you say : But now I want all these divs not to appear side by side
can you use bootstrap
<div class="col align-self-start"></div>
<div class="col align-self-end"></div>
<div class="col align-self-start"></div>
<div class="col align-self-end"></div>
<div class="col align-self-start"></div>
<div class="col align-self-end"></div>
Try Flexbox
.chat{
min-height: 100px;
max-height: 600px;
height: 600px;
overflow-y: scroll;
position: relative;
display:flex;
flex-direction: column;
}
.chat-message{
background-color: #D3D3D3;
max-width: 90%;
margin: 20px 15px 0 15px;
border-radius: 8px;
}
.a{
align-self: flex-start;
background-color: #79d2a1;
}
.b{
align-self: flex-end;
background-color: #7eaacd;
}
Related
I'm trying to align div horizontally as the browser resizes, currently, I have 3 divs. As per the requirement, I can add an additional div. My problem is as soon I increase the window size above 2500, the right side of the screen becomes empty & all the divs are floating to left. As I cannot set the div width to 30-33% as per the requirement. Below is my code. kindly help.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
float: left;
display: flex;
width: 100%
}
div.box {
float: left;
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 30%;
border: 1px solid #cccccc;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
As #Arman Ebrahimi had already mentioned correctly. Use flex box only. The issue of responsibility can be handled well with media queries.
Working example
* {
box-sizing: border-box;
}
div.box-container {
display: flex;
flex-wrap: wrap;
font-size: 30px;
text-align: center;
gap: 10px;
width: 80%;
margin: 0 auto;
/* or use justify-content: center; */
}
.box {
background-color: #f1f1f1;
padding: 10px;
flex: 30%;
border: 1px solid #cccccc;
word-break: break-word;
height: 326px;
}
#media (max-width: 800px) {
.box {
flex: 100%;
}
}
<div class="box-container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
Remove float and only use flex:
* {
box-sizing: border-box;
}
body,
html {
margin: auto;
}
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
}
div.box {
background-color: #ffffff;
padding: 10px;
height: 326px;
margin-left: 20px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: calc(100vw / 3);
/*calc(100vw / number of div)*/
border: 1px solid #cccccc;
word-break: break-word;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
Use justify-content: center; when you are using flex. This means the flexed contents will always be centered on all screen types.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 33.33%;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
Edit ~ add another div, reduce the % the div covers. Demonstrate min-width responsiveness.
div.box-container {
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
width: 100%
}
div.box {
background-color: #ffffff;
position: relative;
padding: 10px;
box-sizing: border-box;
height: 326px;
margin-bottom: 0;
top: 55px;
border-top-right-radius: 0px;
width: 24%;
min-width: 300px;
border: 1px solid #cccccc;
}
body {
margin: 0;
}
<div class="box-container">
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
<div class="box">
<p>jfn,mnfngf,mn,mgfnbgnkjdkjgkdg</p>
</div>
</div>
I am struggling to make my .centerIt divs be centered vertically, and to have the .div1 stay scrollable after I add more .centerIt divs into the column.
The .centerIt divs have to keep their height: 20px and not squeeze after I add more of them.
JSFiddle example
.container {
display: flex;
background: red;
width: 300px;
height: 300px;
}
.div1 {
background: yellow;
height: 90%;
width: 27%;
margin: 5px;
overflow-y: scroll;
}
.div2 {
background: blue;
height: 90%;
width: 74%;
margin: 5px;
}
.centerIt {
background: green;
width: 100%;
border: solid 1px black;
height: 20px;
color: green;
}
<div class="container">
<div class="div1">
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
</div>
<div class="div2"></div>
</div>
Just try to add min-height: 20px to .centerIt instead of height and
display: flex;
flex-direction: column;
justify-content: center;
to .div1 styles, should do it.
JSFiddle fork
I don't think the title is a good one but I don't know how to say it in a better way.
I have 3 divs representing an image, user info, user experience.
Due to mobile responsiveness experience must come last, but with the code below the experience div doesn't touch the top.
.one{
width: 40%;
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two{
width: 40%;
height: 70px;
padding: 5px;
background-color: #0ff;
float: left;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
<div class="four">
<div class="one">1 image</div>
<div class="two">2 info</div>
<div class="three">3 experience</div>
</div>
How it should look like:
You can wrap the left hand side in a separate div and float that left.
.left {
float: left;
width: 40%;
}
.one {
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two {
height: 70px;
padding: 5px;
background-color: #0ff;
}
.three {
width: 58%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
}
.four {
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
<div class="four">
<div class="left">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
An alternative approach using flexbox:
.left {
min-width: 40%;
}
.one {
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two {
height: 70px;
padding: 5px;
background-color: #0ff;
}
.three {
flex: 1;
height: 100px;
padding: 5px;
background-color: #f00;
}
.four {
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
display: flex;
}
<div class="four">
<div class="left">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
Your 1st div(image) has a margin to the right so 3rd div(experience) won't fit in. So at first you have to wrap the 1st two div's into a container like the example below
<div class="four">
<div class = "container">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
After that you will need to inline the container and set the width of container to 40% and first two div's to 100% like the CSS below.
.one{
width: 100%;
height: 50px;
padding: 5px;
background-color: #0f0;
}
.container {
display:inline-block;
width:40%;
}
.two{
width: 100%;
height: 70px;
padding: 5px;
background-color: #0ff;
float: left;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
vertical-align: text-top;
background-color: #f00;
float: right;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
Here's it on Codepen and Jsfiddle
Wrap div's one and two in a div that sets the width and floats left, then float div three to the right.
Make div class one and two to 100% width so they fill the left div completely, and set the left div to the width you wanted.
HTML:
<div class="four">
<div class="left">
<div class="one">
1 image
</div>
<div class="two">
2 info
</div>
</div>
<div class="three">
3 experience
</div>
</div>
CSS:
.one{
height: 50px;
padding: 5px;
background-color: #0f0;
display: block;
}
.two{
height: 70px;
padding: 5px;
background-color: #0ff;
display: block;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
display: inline-block;
}
.left {
float: left;
display: block;
width: 42%;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
display: block;
float: left;
}
So I have this code:
/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
width: 200px;
height: 200px;
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
float: left;
background: red;
}
.img-circular1{
background-image: url('/Images/learn.jpg');
}
.img-circular2{
background-image: url('/Images/watch.jpg');
}
.img-circular3{
background-image: url('/Images/practice.jpg');
}
#container1
{
top: 100px;
position: relative;
margin-left:auto;
margin-right:auto;
width:70%;
background-color: green;
overflow: auto;
bottom: 0;
}
<div id="container1" style="padding-bottom: 500px;">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
<div class="img-circular1"></div>
</div>
I have no managed to get 2 of them to show in a green box. But the third (which I duplicated before and after the other 2) will not show for some reason?
Also, they are not equidistant apart - how can I get them an equal spacing apart?
Please help
NOTE: Instead of images there are red circles, just for visibility reasons.
Apply float: left on images themself, not on container:
/*--- Circular images --- */
.img-circular1, .img-circular2, .img-circular3{
/*width: 200px;*/
/*height: 200px;*/
width: 100px;
height: 100px;
background-size: cover;
display: block;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
float: left;
}
.img-circular1{
background-image: url('/Imageslearn.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.img-circular2{
background-image: url('/Images/watch.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.img-circular3{
background-image: url('/Images/practice.jpg');
background: #aaa; /*added to as an alternative to image*/
}
.container1{
left: 15%;
width: 70%;
/* float: left; */
height: 300px;
position: relative;
}
<div class="container1">
<div class="img-circular1"></div>
<div class="img-circular2"></div>
<div class="img-circular3"></div>
</div>
To answer your second question:
wrap circles in some other div
make their width be some percentage value and float them left
set margin on circles to margin: 0 auto.
Here is prototype for you to study:
#green {
background: green;
padding: 10px;
overflow: auto;
}
#blue {
background: blue;
width: 50%;
float: left;
border: 1px solid #fff;
box-sizing: border-box; /*good for when there is border or padding*/
}
#red {
background: red;
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
}
<div id="green">
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
<div id="blue">
<div id="red"></div>
</div>
</div>
I updated your code to use FlexBox. Since you want your circles to be equally spaced across the row, float: left won't help much. I had to add a wrapper div around each circle div so that it could expand to fill the space without distorting the circles.
/*--- Circular images --- */
.img-circular1,
.img-circular2,
.img-circular3 {
width: 200px;
height: 200px;
background-size: cover;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
background: red;
display: block;
margin: 0 auto;
}
.img-circular1 {
background-image: url('/Images/learn.jpg');
}
.img-circular2 {
background-image: url('/Images/watch.jpg');
}
.img-circular3 {
background-image: url('/Images/practice.jpg');
}
#container1 {
top: 100px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: green;
overflow: auto;
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrap {
flex-grow: 1;
}
<div id="container1" style="padding-bottom: 500px;">
<div class="wrap">
<div class="img-circular1"></div>
</div>
<div class="wrap">
<div class="img-circular2"></div>
</div>
<div class="wrap">
<div class="img-circular3"></div>
</div>
<div class="wrap">
<div class="img-circular1"></div>
</div>
</div>
So, whenever there is content inside the boxes, they align weird and not side by side. How do i fix this? Ive tried quite alot and i havent been able to figure it out.
Any help here would be greatly appreciated/
So i have This as my main code:
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>
Add box-sizing: border-box; at ".donator-box"
.content-wrapper {
background-color: #B31CFF;
width: 100%;
height: 1000px;
}
.content {
background-color: #E3E3E3;
width: 80%;
height: 1000px;
margin-left: 10%;
margin-right: 10%;
}
.donator-box {
border: 3px solid #FFF;
background-color: #FFF;
margin: 1%;
display: inline-block;
width: 47%;
height: 250px;
border-radius: 5px;
overflow: hidden;
box-sizing: border-box;
}
.donator-box {
padding: 5px;
}
<div class="content-wrapper">
<div class="content">
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="donator-box">
<div class="donator-content">
content
</div>
</div>
<div class="advert">
</div>
</div>
</div>