I wrote a simple code to have two boxes center aligned with different dimensions
and now I would like to add a third one based on the dimensions of the second one (grey) and to start outside of the second one.
The second one (grey) is the core and the third one that I want to be the coil around the core but with it's own dimensions.
That's why I want to be based on the dimensions of second.
Please could you help me to make it?
Thank you very much in advance!
Kind Regards,
George
Here is the code:
<html>
<head>
<style>
#container {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
margin: 50px;
background: black;
height: 50px;
width: 200px;
border-radius:20px
}
.box2 {
display: flex;
justify-content: center;
align-items: center;
margin: -1000px;
background: grey;
height: 10px;
width: 100px;
border-radius:5px
}
</style>
</head>
<div id="container">
<div class="box1">
<div class="box2">
<div></div>
</div>
</div>
</div><!-- end #container -->
</html>
So considering the grey as the core and the red border around it as the coil. Is this how you wanted it to be done?
#container {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
margin: 50px;
background: black;
height: 50px;
width: 200px;
border-radius: 20px
}
.box2 {
display: flex;
justify-content: center;
align-items: center;
margin: -1000px;
background: grey;
height: 10px;
width: 100px;
border-radius: 5px;
position: relative;
}
.box2:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid red;
border-radius: 5px;
}
<div id="container">
<div class="box1">
<div class="box2">
</div>
</div>
</div>
<!-- end #container -->
Related
I want to make a image (inside a div) to the most left of the bottom div and I don't how to do this.
For example I have this image
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
I'm new to html & css so I will appreciate your help making this image to the most left of his bottom div.
If you know the width of the div, it's easy. You can give the .applicationinfo element align-self: flex-start; and margin-left: 10%; (10% is calculated by this formula: (100% - widthOfDiv) / 2)
body {
background: black;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationinfo {
align-self: flex-start;
margin-left: 10%;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
remove the flex direction, here's it
display: flex;
justify-items: flex-end;
align-items: flex-end;}
You can do it by positioning applicationinfo since you haven't styled it.
you can add parent position: relative; then child to absolute; then give child top: 0; left: 0;
.container {
display: flex;
height: 80vh;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
position: relative;
background: #222;
border: 1px solid yellow;
}
.applicationinfo {
width: 80%;
top: 0;
left: 0;
border: 1px solid green;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
border: 1px solid blue;
}
.settings {
display: flex;
width: 80%;
height: 80%;
background-color: white;
align-self: center;
}
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
So I have 2 <div> tags in my body, and I want them both to be in one line. However, it automatically makes a line break. Is there a way to fix this?
.firstDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 30%;
background-color: grey;
}
.secondDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 30%;
background-color: grey;
margin-left: 10px;
}
.mainDiv {
display:flex;
flex-direction: row;
}
<div class="mainDiv">
<div class="firstDiv">
First Div
</div>
<div class="secondDiv">
Second Div
</div>
</div>
Use display inline block
.content {
width: 100px;
height: 100px;
display: inline-block;
background-color: black;
}
<div class="content">Content</div>
<div class="content">Content</div>
So basically I am trying to make all my div boxes one size but a unique color. I currently have just done it in CSS below. However I know this isn't efficient, calling out each box with a specific class and changing the color. Is there a better way in CSS?
<div class='containera'>
<div class='box1a'>#c37857</div>
<div class='box2a'>#eeedbe</div>
<div class='box3a'>#99b27f</div>
</div>
.containera{
display: flex;
height: 250px;
width: 800px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-shrink: 1;
background-color: #734444;
border-radius: 35px;
}
.box1a,.box2a,.box3a{
height: 100px;
width: 200px;
margin: -50px 5px 5px 5px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.box1a{
background-color: #c37857;
}
.box2a{
background-color: #eeedbe;
}
.box3a{
background-color: #99b27f;
}
Create a new class then add that class name onto the element you want.
.containera{
display: flex;
height: 250px;
width: 800px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-shrink: 1;
background-color: #734444;
border-radius: 35px;
}
.box-size{
height: 100px;
width: 200px;
margin: -50px 5px 5px 5px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.box1a{
background-color: #c37857;
}
.box2a{
background-color: #eeedbe;
}
.box3a{
background-color: #99b27f;
}
<div class='containera'>
<div class='box-size box1a'>#c37857</div>
<div class='box-size box2a'>#eeedbe</div>
<div class='box-size box3a'>#99b27f</div>
</div>
You can give div a comprehensive style using * and set separate classes for each box with your favorite colors
you can write inline css... you should use !important to make sure that inline css overwrites class
<div class='containera'>
<div class='box-size box1a' style="background-color:red !important;">#c37857</div>
<div class='box-size box2a'>#eeedbe</div>
<div class='box-size box3a'>#99b27f</div>
</div>
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 2 years ago.
I am using flex-wrap. if textBox are more then width available in container
and in the end there is add button now if things are in single line it's look perfect
but if there are more textBox then width available it shift to next line thats fine but because of that there is too much space left between button and text box
which looks very odd.. i tried many ways but didn't get succeed to place button just next to textBox of 1st line.
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
If you add a rule for the individual flex-lines like justify-content: space-between; Or jsutify-content: space-evenly. It will adjust to whatever number of Elements you add and display them in a more responsive way. See the examples below.
Edit: at the end you can find a 3rd example which uses specific margin-rules instead of flex-rules. I personally dont prefer this but it could look neater in your case.
with space-between
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
with space-evenly
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
margin: 5px;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
margin-rules, commented the css code where i changed it
.container{
background: #E3E3E3;
width: 500px;
display: flex;
}
.textContainer{
background: #AFACAC;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.textContainer div{
background: #E3FF33;
height: 30px;
padding: 5px;
/*new margin-rules*/
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
}
.addBtn{
background: #5C5AF5;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px
}
<body>
<div class="container">
<div class="textContainer">
<div>aaaaa</div>
<div>eeeeee</div>
<div>ee</div>
<div>cccc</div>
<div>ggg</div>
<div>ggggggggg</div>
<div>uuu</div>
<div>12222qqqqqq</div>
<div>qqq</div>
<div>zzzzzzzz</div>
</div>
<div class="addBtn">
<span>+</span>
</div>
</div>
</body>
There are a few divs. I want to set width of black as needed and put it on the middle (horizontally) of red. Then put some elements in black in one line and position them on the middle (vertically) of black.
The final result should looks like:
There is a problem with center vertically.
My code is:
<html>
<body>
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
</body>
<style>
#mainContainer {
background: red;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
}
#singleOptions {
height: 100%;
background: black;
display: inline-block;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
</style>
</html>
How is it possible to get this effect?
You can try it like this
#mainContainer {
background: red;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
}
#singleOptions {
height: 100%;
background: black;
display: flex;
margin: 0 auto;
justify-content: space-between;
width: min-content;
align-items: center;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
margin-right: 5px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
<html>
<body>
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
</body>
</html>
You can achieve this using flexbox:
#mainContainer {
background: red;
width: 100px;
height: 100px;
text-align: center;
display: flex;
justify-content: center;
}
#singleOptions {
height: 100%;
background: black;
display: flex;
align-items: center;
}
#myObject {
width: 10px;
display: inline-block;
height: 10px;
background: green;
}
#mySecondObject {
width: 10px;
display: inline-block;
height: 10px;
background: yellow;
}
<div id="mainContainer">
<div id="singleOptions">
<div id="myObject"></div>
<div id="mySecondObject"></div>
</div>
</div>
This is solved easily with Flexbox.
Change your CSS for #singleOptions as follows.
#singleOptions {
height: 100%;
background-color: black;
display: flex;
justify-content: space-between;
align-items: center;
}