I try to set my box to the bottom part of the div, but it appears on the top part of the div even I have set bottom:0px;
Here is the link of my code : js fiddle
<div class="container">
<p class="box bottom0" style="background-color:grey">Category1</p>
<p class="box bottom0" style="background-color:red">Category2</p>
<p class="box bottom0" style="background-color:blue">Category3</p>
</div>
margin: 0 auto; height: 500px;
}
.bottom0{
bottom: 0px;
}
.box{
font-size: 15px;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 0px;
margin-right: 30px;
width: auto;
height: auto;
float: left;
display:inline-block;
}
You can use flex on the container
.container {
display: flex;
align-items: flex-end;
}
or
.container {
display: flex;
}
.bottom0{
align-self: flex-end;
}
.container {
width: 960px;
margin: 0 auto;
height: 500px;
display: flex;
}
.bottom0{
align-self: flex-end;
}
.box{
font-size: 15px;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 0px;
margin-right: 30px;
width: auto;
height: auto;
float: left;
display:inline-block;
}
<div class="container">
<p class="box bottom0" style="background-color:grey">Category1</p>
<p class="box bottom0" style="background-color:red">Category2</p>
<p class="box bottom0" style="background-color:blue">Category3</p>
</div>
the bottom property has no effect on statically positioned elements (elements have position: static by default)
you need to set a position: relative on the container and position: absolute on .box in order to see that property work.
You can try this -
<div class="container">
<div class="bottom0">
<p class="box" style="background-color:grey">Category1</p>
<p class="box" style="background-color:red">Category2</p>
<p class="box" style="background-color:blue">Category3</p>
</div>
</div>
and add position:absolute in bottom0 css
.bottom0{
bottom: 0px;
position: absolute;
}
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 want to add text at bottom right corner inside card element. The text which I want to enter is Innings and Average. I have created flex-box but text such as innings and average is not getting displayed in bottom right corner.
Code:
.playercard1 {
display: flex;
align-items: flex-start;
height: 120px;
width: 500px;
margin-top: 30px;
margin-left: 30px;
}
.item {
padding-left: 10px;
}
.info {
margin-top: 25px;
}
<div class="playercard1">
<img class="profilepic" src="./profile.jpg">
<div class="item">
<div class="info">
<h6>Naman Kohli, Team Name, Right-Hand bat</h6>
<h2 className="cardtitle1">150</h2>
<p>Innings:5</p>
<p>Average:40.67</p>
</div>
</div>
</div>
In my screenshot you can see the innings and average is not getting displayed at bottom right corner. Check screenshot below:
What I am trying to achieve see in below screenshot I want to display innings and average at bottom right corner like the one in below screenshot.
Here is my solution, its not perfect, but it will give you a starting point
.playercard1 {
display: flex;
align-items: flex-start;
height: auto;
width: 500px;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
padding: 10px;
}
.item {
padding-left: 10px;
flex:1;
}
.info {
margin-top: 25px;
}
.flex{
display:flex;
justify-content:space-between;
}
.cardtitle1{
font-size:24px;
}
<div class="playercard1">
<img class="profilepic" src="https://placehold.it/100x100">
<div class="item">
<div class="info">
<div>Naman Kohli, Team Name, Right-Hand bat</div>
<div class="flex">
<div class="cardtitle1">150</div>
<div>
<div>Innings:5</div>
<div>Average:40.67</div>
</div>
</div>
</div>
</div>
</div>
With position:absolute
.playercard1 {
display: flex;
align-items: flex-start;
height: auto;
width: 500px;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
padding: 10px;
position: relative;
}
.item {
padding-left: 10px;
flex: 1;
}
.info {
margin-top: 25px;
}
.flex {
display: flex;
justify-content: space-between;
}
.cardtitle1 {
font-size: 30px;
margin-top:25px;
}
.absolute {
position: absolute;
bottom: 10px;
right: 15px;
}
<div class="playercard1">
<img class="profilepic" src="https://placehold.it/80x80">
<div class="absolute">
<div>Innings:5</div>
<div>Average:40.67</div>
</div>
<div class="item">
<div>Naman Kohli, Team Name, Right-Hand bat</div>
<div class="cardtitle1">150</div>
</div>
</div>
.playerCard{
display: flex;
align-items: flex-start;
height: 120px;
width: 500px;
margin-top: 30px;
margin-left: 30px;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
padding: 15px;
}
.playerCard .player_profile_pic{
display: inline-block;
vertical-align: top;
border-radius:50px;
}
.playerCard .player_profile_pic img{
border-radius: 100%;
width: 100px;
height: 100px;
}
.playerCard .player_details_div{
display: inline-block;
vertical-align: top;
margin-top: 10px;
margin-left: 15px;
width: calc(100% - 30px);
}
.player_details_div .player_name_det{
font-size: 16px;
}
.player_details_div .rank_ings_main_div{
width: 100%;
}
.rank_ings_main_div .number_div{
font-size: 30px;
text-align: left ;
float: left;;
}
.rank_ings_main_div .avg_ings_div{
float: right;
text-align: right;
}
.avg_ings_div p{
margin: 5px 0;
}
<div class="playerCard">
<div class="player_profile_pic">
<img src="https://i.stack.imgur.com/l60Hf.png" alt="">
</div>
<div class="player_details_div">
<div class="player_name_det">
Naman Kohli , Team Name, Right Hand Bat
</div>
<div class="rank_ings_main_div">
<div class="number_div">150</div>
<div class="avg_ings_div">
<p>Innings : 3</p>
<p>Average : 50.00</p>
</div>
</div>
</div>
</div>
I guess you need something like this.
Hope this helps.
I'm experiencing an issue with my text where I don't see it at all, or it doesn't act as though I would think it would in a flexbox. I have three images in the flexbox right now, but I would like to place small 'captions' under each of them(not in the p element, the purple, but I would like to place it on the white, which is right under the purple box(the p element). I thought that by adding a child element, that element would at least line up vertically with the element above it but I guess I'm wrong. Can anyone help? Another piece of info is that really my images are 250 pixels, but I wanted to accommodate for a snippet so I made it 50 pixels, but that's probably irrelevant.
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child {
border: 0px;
}
html {
height: 100%;
}
body {
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
margin-top: -130px;
}
#inner {
position:absolute;
display:flex;
flex-wrap: wrap;
height: 600px;
top:50%;
align-items: center;
justify-content: space-between;
margin-top: -300px;
align-content: center;
width: 100%;
}
#inner p {
background-color: #26004d;
padding: 60px;
border-radius: 9px;
}
#inner img {
border-radius: 8px;
}
<div id="wrapper">
<div id="inner">
<p><img src="cat1.jpeg" alt="Picture of a cat" width="50" height="50"></p>
<p><img src="dog1.jpg" alt="Picture of a cat" width="50" height="50"></p>
<p><img src="park.jpg" alt="Picture of a cat" width="50" height="50"></p>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
</div>
Without additional info / image, here's the solution I was able to come up with. If you want to keep each image / caption grouped together, wrap them in another parent div. Then just add the caption below that, which is a block element and should flow below the image, as intended. Snippet below.
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: #862d59;
clear: both;
}
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child {
border: 0px;
}
html {
height: 100%;
}
body {
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
}
#wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
min-height: 100%;
}
#inner {
position:absolute;
display:flex;
flex-wrap: wrap;
height: 600px;
top:50%;
align-items: center;
justify-content: space-between;
margin-top: -300px;
align-content: center;
width: 100%;
}
#inner p {
background-color: #26004d;
padding: 60px;
border-radius: 9px;
}
#inner p.caption {
color: #000;
background-color: transparent;
border-radius: 0;
}
#inner img {
display: block;
border-radius: 8px;
}
<div id="wrapper">
<div id="inner">
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
<div class="image-wrapper">
<p>
<img src="http://placehold.it/100x100" alt="Picture of a cat">
</p>
<p class="caption">Caption</p>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
</div>
Let me know if you have any questions, or if this doesn't satisfy your description.
I want to position text above a rule and to the right of a heading, as shown at the bottom of the below image.
This is my HTML:
<h2>Heading</h2>
<div class="category"><em>Characters</em></div>
<hr>
(I currently have no CSS for the 'character' class, since I've got nothing working.)
I've tried aligning the text, using CSS to float or position and the closest I've gotten is getting the in line with the rule, but it cuts it off at the end.
Can anyone offer some assistance?
Try with flexbox
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-container h2 {
margin-bottom: 0;
align-self: flex-end;
}
.flex-container span.category {
align-self: flex-end;
font-style: italic;
font-size: 14px;
}
<div class="flex-container">
<h2>Heading</h2>
<span class="category">Characters</span>
</div>
<hr>
use can also use this
.category
{
position: absolute;
right: 0px;
}
h2
{
position:absolute
left:0px;
}
You can use floating in order to achieve that like first item will be float: left; and second item will be float: right; an other solution will be display: inline-block; and you can also use display:flex;
.float{overflow: hidden;}
.float h2{
margin: 0;
float: left;
}
.float .category{float: right;}
.inineblock{
overflow: hidden;
letter-spacing: -4px;
}
.inineblock h2{
margin: 0;
width: 50%;
letter-spacing: 0;
display:inline-block;
vertical-align: top;
}
.inineblock .category{
width: 50%;
letter-spacing: 0;
text-align: right;
display:inline-block;
vertical-align: top;
}
.flexbox{
justify-content: space-between;
display: flex;
}
.flexbox h2{
margin: 0;
align-self: flex-end;
}
.flexbox .category{align-self: flex-end;}
<div class="float">
<h2>Heading</h2>
<div class="category"><em>Characters</em></div>
</div>
<hr>
<div class="inineblock">
<h2>Heading</h2>
<div class="category"><em>Characters</em></div>
</div>
<hr>
<div class="flexbox">
<h2>Heading</h2>
<div class="category"><em>Characters</em></div>
</div>
<hr>
.float{overflow: hidden;}
.float h2{
margin: 0;
float: left;
}
.float .category{float: right;}
.inineblock{
overflow: hidden;
letter-spacing: -4px;
}
.inineblock h2{
margin: 0;
width: 50%;
letter-spacing: 0;
display:inline-block;
vertical-align: top;
}
.inineblock .category{
width: 50%;
letter-spacing: 0;
text-align: right;
display:inline-block;
vertical-align: top;
}
.flexbox{
justify-content: space-between;
display: flex;
}
.flexbox h2{
margin: 0;
align-self: flex-end;
}
.flexbox .category{align-self: flex-end;}
<div class="float">
<h2>Heading</h2>
<div class="category"><em>Characters</em></div>
</div>
<hr>
<div class="inineblock">
<h2>Heading</h2>
<div class="category"><em>Characters</em></div>
</div>
<hr>
<div class="flexbox">
<h2>Heading</h2>
<div class="category"><em>Characters</em></div>
</div>
<hr>
I want to have a centered grid of buttons that take up the full width, but I can't seem to get the container centered no matter what I try.
Here's the jsfiddle - https://jsfiddle.net/a6qo6tzL/
Thanks
<div class="Wrapper">
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
</div>
<div style="clear: both;"></div>
CSS
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
float: left;
width: 250px;
text-align: center;
text-transform: uppercase;
}
Your main problem is that your gridButton has
float: left;
Instead, use
display: inline-block;
Now your buttons can move freely next to one another and be centered. Your wrapper element is already full width but you'll need to tell it to center its content:
.Wrapper {
display:block;
width: 100%;
text-align: center;
}
You can get rid of margin: 0 auto because that will only affect blocks with a known width.
.Wrapper {
display: block;
text-align: center;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
display: inline-block;
width: 250px;
text-align: center;
text-transform: uppercase;
}
<div class="Wrapper">
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
</div>
<div style="clear: both;"></div>
You've got .Wrapper set to 100% width, so even though you have margin: auto, the container is full width and will not appear centered. Set it to a constant width at a higher breakpoint:
#media (min-width: 500px) {
.Wrapper {
width: 500px;
}
}
Then consider wrapping your buttons in a columns:
.cell {
float: left;
width: 50%;
}
Here is your updated fiddle.
Use flexbox:
.Wrapper {
display:flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
margin: 0 auto;
width: 100vw;
}
DEMO
I also replaced the width to viewport units
have a look here if this is what you want
https://jsfiddle.net/Raider/744wv0o7/
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
border:1px solid;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px auto;
/*float: left;*/
width: 250px;
text-align: center;
text-transform: uppercase;
}
Is this what you need?
.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
}
.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
width: 250px;
text-align: center;
margin:auto;
text-transform: uppercase;
}
You where using float:left; property which prevents the div's from being centered