Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
Improve this question
Locked. Comments on this question have been disabled, but it is still accepting new answers and other interactions. Learn more.
I want to create something similar to this one:
... and have it in flex, so it will rearrange. I don't know why I can't get to rearrange it to the right side (it overlaps on top of the chart). See the below what I have got:
I would like it to be at the right side, and occupy the rest of the window. How can I arrange this with CSS?
In simple terms, I would like to have the green container to the right side, and when making smaller the navigator, and the green container to flex and go under the red container. I am trying to do this, but for some reason it’s not happening.
I dont uderstand why the right container goes to right side of the first column.
Here’s my snippet:
* {
margin: 0px;
padding: 0px;
}
.general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
.enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
.tablas_carpetas {
position:grid;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 300px;
background-color: #DBE9EE;
}
.tablas {
position:left;
grid-template-columns: auto;
display: flex;
flex-wrap: wrap;
flex-direction:column;
order: 1;
background-color: #dfc0c0;
height: 300px;
}
.tablas > div {
display:right;
float:right;
background: #ddd;
line-height: 20px;
height: 20px;
margin: 1px;
text-align: center;
}
.tablas_carpetas > .carpetas {
display:flex;
position:left;
order: 2;
height: 100%;
background-color: green;
}
.anuncios{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: red;
}
.pie{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: black;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#botones").mouseenter(function () {
$("#resto").show();
});
$("#botones").mouseleave(function () {
$("#resto").hide();
});
});
</script>
<div class="general">
<div class="enlaces"></div>
<div class="tablas_carpetas">
<div class="tablas">
<div>AA</div>
<div>AKo</div>
<div>AQo</div>
<div>AJo</div>
<div>ATo</div>
<div>A9o</div>
<div>A8o</div>
<div>A7o</div>
<div>A6o</div>
<div>A5o</div>
<div>A4o</div>
<div>A3o</div>
<div>A2o</div>
<div>AKs</div>
<div>KK</div>
<div>KQo</div>
<div>KJo</div>
<div>KTo</div>
<div>K9o</div>
<div>K8o</div>
<div>K7o</div>
<div>K6o</div>
<div>K5o</div>
<div>K4o</div>
<div>K3o</div>
<div>K2o</div>
<div>AQs</div>
<div>KQs</div>
<div>QQ</div>
<div>QJo</div>
<div>QTo</div>
<div>Q9o</div>
<div>Q8o</div>
<div>Q7o</div>
<div>Q6o</div>
<div>Q5o</div>
<div>Q4o</div>
<div>Q3o</div>
<div>Q2o</div>
<div>AJs</div>
<div>KJs</div>
<div>QJs</div>
<div>JJ</div>
<div>JTo</div>
<div>J9o</div>
<div>J8o</div>
<div>J7o</div>
<div>J6o</div>
<div>J5o</div>
<div>J4o</div>
<div>J3o</div>
<div>J2o</div>
<div>ATs</div>
<div>KTs</div>
<div>QTs</div>
<div>JTs</div>
<div>TT</div>
<div>T9o</div>
<div>T8o</div>
<div>T7o</div>
<div>T6o</div>
<div>T5o</div>
<div>T4o</div>
<div>T3o</div>
<div>T2o</div>
<div>A9s</div>
<div>K9s</div>
<div>Q9s</div>
<div>J9s</div>
<div>T9s</div>
<div>99</div>
<div>98o</div>
<div>97o</div>
<div>96o</div>
<div>95o</div>
<div>94o</div>
<div>93o</div>
<div>92o</div>
<div>A8s</div>
<div>K8s</div>
<div>Q8s</div>
<div>J8s</div>
<div>T8s</div>
<div>98s</div>
<div>88</div>
<div>87o</div>
<div>86o</div>
<div>85o</div>
<div>84o</div>
<div>83o</div>
<div>82o</div>
<div>A7s</div>
<div>K7s</div>
<div>Q7s</div>
<div>J7s</div>
<div>T7s</div>
<div>97s</div>
<div>87s</div>
<div>77</div>
<div>76o</div>
<div>75o</div>
<div>74o</div>
<div>73o</div>
<div>72o</div>
<div>A6s</div>
<div>K6s</div>
<div>Q6s</div>
<div>J6s</div>
<div>T6s</div>
<div>96s</div>
<div>86s</div>
<div>76s</div>
<div>66</div>
<div>65o</div>
<div>64o</div>
<div>63o</div>
<div>62o</div>
<div>A5s</div>
<div>K5s</div>
<div>Q5s</div>
<div>J5s</div>
<div>T5s</div>
<div>95s</div>
<div>85s</div>
<div>75s</div>
<div>65s</div>
<div>55</div>
<div>54o</div>
<div>53o</div>
<div>52o</div>
<div>A4s</div>
<div>K4s</div>
<div>Q4s</div>
<div>J4s</div>
<div>T4s</div>
<div>94s</div>
<div>84s</div>
<div>74s</div>
<div>64s</div>
<div>54s</div>
<div>44</div>
<div>43o</div>
<div>42o</div>
<div>A3s</div>
<div>K3s</div>
<div>Q3s</div>
<div>J3s</div>
<div>T3s</div>
<div>93s</div>
<div>83s</div>
<div>73s</div>
<div>63s</div>
<div>53s</div>
<div>43s</div>
<div>33</div>
<div>32o</div>
<div>A2s</div>
<div>K2s</div>
<div>Q2s</div>
<div>J2s</div>
<div>T2s</div>
<div>92s</div>
<div>82s</div>
<div>72s</div>
<div>62s</div>
<div>52s</div>
<div>42s</div>
<div>32s</div>
<div>22</div>
</div>
<div class="carpetas">
<div class="botones">
<button id="principal_1">Redes Sociales</button>
<div class="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div class="anuncios"></div>
<div class="pie"></div>
</div>
Here is what I changed:
.tablas_carpetas {
display: flex;
width: 100%;
height: 600px;
background-color: #DBE9EE;
}
.tablas {
width: 50%;
gap: 1%;
display: flex;
flex-wrap: wrap;
background-color: #dfc0c0;
height: 100%;
}
.tablas > div {
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
height: 35px;
flex: 0 0 6%;
margin: 1px;
text-align: center;
border-radius: 5px;
}
.tablas_carpetas > .carpetas {
width: 50%;
height: 100%;
background-color: green;
}
Here's a complete snippet:
* {
margin: 0px;
padding: 0px;
}
.general {
margin: auto;
display: grid;
margin-top: 0%;
width: 100%;
height: 100%;
background-color: #4f6d7a;
}
.enlaces {
float: center;
display: center;
width: 100%;
height: 100px;
background-color: #166088;
}
.tablas_carpetas {
position:grid;
display: flex;
flex-wrap: wrap;
width: 100%;
height: 300px;
background-color: #DBE9EE;
}
.tablas {
position:left;
grid-template-columns: auto;
display: flex;
flex-wrap: wrap;
flex-direction:column;
order: 1;
background-color: #dfc0c0;
height: 300px;
}
.tablas > div {
display:right;
float:right;
background: #ddd;
line-height: 20px;
height: 20px;
margin: 1px;
text-align: center;
}
.tablas_carpetas > .carpetas {
display:flex;
position:left;
order: 2;
height: 100%;
background-color: green;
}
.anuncios{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: red;
}
.pie{
float: center;
display: center;
width: 100%;
height: 100px;
background-color: black;
}
.tablas_carpetas {
display: flex;
width: 100%;
height: 600px;
background-color: #DBE9EE;
}
.tablas {
width: 50%;
gap: 1%;
display: flex;
flex-wrap: wrap;
background-color: #dfc0c0;
height: 100%;
}
.tablas > div {
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
line-height: 20px;
height: 30px;
flex: 0 0 7%;
margin: 1px;
text-align: center;
border-radius: 5px;
}
.tablas_carpetas > .carpetas {
width: 50%;
height: 100%;
background-color: green;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#botones").mouseenter(function () {
$("#resto").show();
});
$("#botones").mouseleave(function () {
$("#resto").hide();
});
});
</script>
<div class="general">
<div class="enlaces"></div>
<div class="tablas_carpetas">
<div class="tablas">
<div>AA</div>
<div>AKo</div>
<div>AQo</div>
<div>AJo</div>
<div>ATo</div>
<div>A9o</div>
<div>A8o</div>
<div>A7o</div>
<div>A6o</div>
<div>A5o</div>
<div>A4o</div>
<div>A3o</div>
<div>A2o</div>
<div>AKs</div>
<div>KK</div>
<div>KQo</div>
<div>KJo</div>
<div>KTo</div>
<div>K9o</div>
<div>K8o</div>
<div>K7o</div>
<div>K6o</div>
<div>K5o</div>
<div>K4o</div>
<div>K3o</div>
<div>K2o</div>
<div>AQs</div>
<div>KQs</div>
<div>QQ</div>
<div>QJo</div>
<div>QTo</div>
<div>Q9o</div>
<div>Q8o</div>
<div>Q7o</div>
<div>Q6o</div>
<div>Q5o</div>
<div>Q4o</div>
<div>Q3o</div>
<div>Q2o</div>
<div>AJs</div>
<div>KJs</div>
<div>QJs</div>
<div>JJ</div>
<div>JTo</div>
<div>J9o</div>
<div>J8o</div>
<div>J7o</div>
<div>J6o</div>
<div>J5o</div>
<div>J4o</div>
<div>J3o</div>
<div>J2o</div>
<div>ATs</div>
<div>KTs</div>
<div>QTs</div>
<div>JTs</div>
<div>TT</div>
<div>T9o</div>
<div>T8o</div>
<div>T7o</div>
<div>T6o</div>
<div>T5o</div>
<div>T4o</div>
<div>T3o</div>
<div>T2o</div>
<div>A9s</div>
<div>K9s</div>
<div>Q9s</div>
<div>J9s</div>
<div>T9s</div>
<div>99</div>
<div>98o</div>
<div>97o</div>
<div>96o</div>
<div>95o</div>
<div>94o</div>
<div>93o</div>
<div>92o</div>
<div>A8s</div>
<div>K8s</div>
<div>Q8s</div>
<div>J8s</div>
<div>T8s</div>
<div>98s</div>
<div>88</div>
<div>87o</div>
<div>86o</div>
<div>85o</div>
<div>84o</div>
<div>83o</div>
<div>82o</div>
<div>A7s</div>
<div>K7s</div>
<div>Q7s</div>
<div>J7s</div>
<div>T7s</div>
<div>97s</div>
<div>87s</div>
<div>77</div>
<div>76o</div>
<div>75o</div>
<div>74o</div>
<div>73o</div>
<div>72o</div>
<div>A6s</div>
<div>K6s</div>
<div>Q6s</div>
<div>J6s</div>
<div>T6s</div>
<div>96s</div>
<div>86s</div>
<div>76s</div>
<div>66</div>
<div>65o</div>
<div>64o</div>
<div>63o</div>
<div>62o</div>
<div>A5s</div>
<div>K5s</div>
<div>Q5s</div>
<div>J5s</div>
<div>T5s</div>
<div>95s</div>
<div>85s</div>
<div>75s</div>
<div>65s</div>
<div>55</div>
<div>54o</div>
<div>53o</div>
<div>52o</div>
<div>A4s</div>
<div>K4s</div>
<div>Q4s</div>
<div>J4s</div>
<div>T4s</div>
<div>94s</div>
<div>84s</div>
<div>74s</div>
<div>64s</div>
<div>54s</div>
<div>44</div>
<div>43o</div>
<div>42o</div>
<div>A3s</div>
<div>K3s</div>
<div>Q3s</div>
<div>J3s</div>
<div>T3s</div>
<div>93s</div>
<div>83s</div>
<div>73s</div>
<div>63s</div>
<div>53s</div>
<div>43s</div>
<div>33</div>
<div>32o</div>
<div>A2s</div>
<div>K2s</div>
<div>Q2s</div>
<div>J2s</div>
<div>T2s</div>
<div>92s</div>
<div>82s</div>
<div>72s</div>
<div>62s</div>
<div>52s</div>
<div>42s</div>
<div>32s</div>
<div>22</div>
</div>
<div class="carpetas">
<div class="botones">
<button id="principal_1">Redes Sociales</button>
<div class="resto" hidden>
<button>Facebook</button>
<button>Twitter</button>
<button>LinkedIn</button>
<button>Gooogle</button>
</div>
</div>
</div>
</div>
<div class="anuncios"></div>
<div class="pie"></div>
</div>
I hope this helps, the code for you to review in case you have doubts: https://jsfiddle.net/0kqzL6dn/37/
Related
I am trying to have 4 little squares inside one big square. Those small squares need to be position at the bottom inside a big square, so far my code looks like this
.date-grid button {
position: relative;
border: 0;
width: 7.5ch;
height: 7.5ch;
background-color: #A1A100;
margin-bottom: 2px;
}
.smallHolder {
display: flex;
align-items: flex-end;
}
.small1 {
border: 0;
width: 2.5ch;
height: 2.5ch;
background-color: gray;
}
.small2 {
width: 2.5ch;
height: 2.5ch;
background-color: red;
}
.small3 {
border: 0;
width: 2.5ch;
height: 2.5ch;
background-color: green;
}
.small4 {
border: 0;
width: 2.5ch;
height: 2.5ch;
background-color: blue;
}
<div class="date-grid">
<button class="vrs22">
<time>3</time>
<div class="smallHolder">
<div class="small1"></div>
<div class="small2"></div>
<div class="small3"></div>
<div class="small4"></div>
</div>
</button>
</div>
What I am trying to achieve is this:
Idea is to have this flexible so if I have 2 small squares, results should be like this:
Can anybody try to help me with this?
This could be a solution. It uses your unaltered HTML, but with completely different CSS. Changing the height and width of the outer container will still result in 4 small squares, as long as width and height of the outer container are equal.
* {
box-sizing: border-box;
}
.date-grid {
width: 100px;
height: 100px;
background: #eee;
display: flex;
flex-direction: column;
}
.vrs22 {
width: 100%;
height: 100%;
background: green;
border: none;
padding: 0;
}
time {
display: block;
height: 75%;
font-size: 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
.smallHolder {
width: 100%;
height: 25%;
display: flex;
}
.smallHolder>div {
width: 25%;
height: 100%;
flex-shrink: 0;
flex-grow: 1;
}
.small1 {
background: #fb0;
}
.small2 {
background: #bf0;
}
.small3 {
background: #f07;
}
.small4 {
background: #ba0;
}
<div class="date-grid">
<button class="vrs22">
<time>3</time>
<div class="smallHolder">
<div class="small1"></div>
<div class="small2"></div>
<div class="small3"></div>
<div class="small4"></div>
</div>
</button>
</div>
With different container size:
* {
box-sizing: border-box;
}
.date-grid {
width: 150px;
height: 150px;
background: #eee;
display: flex;
flex-direction: column;
}
.vrs22 {
width: 100%;
height: 100%;
background: green;
border: none;
padding: 0;
}
time {
display: block;
height: 75%;
font-size: 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
.smallHolder {
width: 100%;
height: 25%;
display: flex;
}
.smallHolder>div {
width: 25%;
height: 100%;
flex-shrink: 0;
flex-grow: 1;
}
.small1 {
background: #fb0;
}
.small2 {
background: #bf0;
}
.small3 {
background: #f07;
}
.small4 {
background: #ba0;
}
<div class="date-grid">
<button class="vrs22">
<time>3</time>
<div class="smallHolder">
<div class="small1"></div>
<div class="small2"></div>
<div class="small3"></div>
<div class="small4"></div>
</div>
</button>
</div>
And a variation with only two squares at the bottom:
* {
box-sizing: border-box;
}
.date-grid {
width: 100px;
height: 100px;
background: #eee;
display: flex;
flex-direction: column;
}
.vrs22 {
width: 100%;
height: 100%;
background: green;
border: none;
padding: 0;
}
time {
display: block;
height: 50%;
font-size: 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
.smallHolder {
width: 100%;
height: 50%;
display: flex;
}
.smallHolder>div {
width: 25%;
height: 100%;
flex-shrink: 0;
flex-grow: 1;
}
.small1 {
background: #fb0;
}
.small2 {
background: #bf0;
}
<div class="date-grid">
<button class="vrs22">
<time>3</time>
<div class="smallHolder">
<div class="small1"></div>
<div class="small2"></div>
</div>
</button>
</div>
I'm trying to create element div that contain 3 part, using 2 row and 2 column.
.flex-row {
flex-direction: row;
display: flex;
width: 310px;
}
.flex-column {
flex-direction: column;
display: flex;
}
.flex-body {
display: flex;
margin: 40px 10px 0px 0px;
}
.flex-body div:not([class*="flex"]) {
border: 1px solid white;
flex: 1 1 260px;
width: 764px;
}
<div class="flex-body">
<div class="flex-row">
<div style="background: #0980cc;"></div>
</div>
<div class="flex-column">
<div style="background: #09cc69;"></div>
<div style="background: #cc092f;"></div>
</div>
</div>
I set the width because if I didn't do it, the width wouldn't fit page.
But the div isn't responsive. I've tried but nothing work. How can I make my div responsive the screen resolution?
I've just created a version that uses percentages:
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
.flex-body {
display: flex;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 40px;
}
.flex-body div:not([class*="flex"]) {
border: 1px solid white;
flex: 1 1 50%;
position: relative;
box-sizing: border-box;
}
.flex-row {
flex-direction: row;
display: flex;
width: 35%;
background-color: #0980cc;
}
.flex-column {
flex-direction: column;
display: flex;
width: 65%;
}
.flex-column div:nth-child(1) {
background: #09cc69;
width: 100%;
}
.flex-column div:nth-child(2) {
background: #cc092f;
width: 100%;
}
jsfiddle link
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;
}
im a bit lost:
im trying to make the space between 3 divs (horizontally) 40px, but it doesnt seem to work when i do it:
https://github.com/itsolidude/Tea_Cozy
i want the yellow marked parts to be 40px:
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
z-index: 2;
background-color: black;
top: 0;
}
#locations h2 {
flex: 1 0 100%; /* shorthand for: flex-grow:1;
flex-shrink: 0;
flex-basis: 100%; */
text-align: center;
position: absolute; /* found this to be a simpler solution, and i sticked with it even tho i dont have exact 10px :p */
top: 1510px;
z-index: 3;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
#mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 70px auto 0;
width: 1200px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
}
#tea-of-month {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto 70px;
}
#tea-of-month img {
height: 200px;
width: 300px;
margin-bottom: 10px;
}
.item {
display: flex;
flex-direction: column;
padding: 10px;
}
.contact {
height: 200px;
}
#locations {
height: 500px;
width: 1200px;
margin: 0 auto;
background-image: url(../images/img-locations-background.jpg);
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.address {
background-color: black;
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
}
#copyright {
text-align: left;
margin-left: 20px;
}
<div id="locations">
<h2>Locations</h2>
<div class="address">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="address">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="address">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
i put in the whole css. just in case something is affecting it. Pls explain what and why you did it :p
Don't use justify-content: space-between; as this will allot space depending on the available space.
Instead, center the flex-children and give them side margin of 20px (2 * 20px = 40px).
.wrap {
display: flex;
justify-content: center;
width: 90%;
margin: auto;
border: 1px solid grey;
}
.box {
background: #000;
width: 150px;
height: 150px;
margin: 20px;
}
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Alternatively, you could set a max-width of the parent container, thus making less available space for the children to spread out with the space-between style.
I don't know why the div on the left doesn't align vertically to center.
here is the html:
<body >
<div id="topH" class="vertCenter-flex">
<div id="profileBox" class="bgc-green divmain centerItems" >
<p>p1</p>
<p>p2</p>
<p>lala</p>
</div>
<div id="offers" class="bgc-blue divmain" ></div>
<div id="news" class="bgc-purple divmain"></div>
</div>
</body>
and here is the necessary css:
.bgc-blue{
background-color: #0066ff;
}
.bgc-white{
background-color: whitesmoke;
}
.bgc-purple{
background-color: purple;
}
.bgc-green{
background-color: rgb(70, 223, 70);
}
.vertCenter-flex{
display: flex;
align-content: center;
justify-content: center;
}
.divmain{
margin-top: 10px;
display: inline-block;
vertical-align: -webkit-baseline-middle;
height: 95%;
}
.centerItems{
text-align: center;
}
#topH{
width: 100%;
height: 95%;
}
#offers{
width: 40%;
margin-left: 10px;
margin-right: 10px;
}
#profileBox{
width: 30%;
height: fit-content;
}
#news{
width: 25%;
}
and this is the output. Again, i dont know what else can i do to center the left div vertically (#profileBox)
Use align-items: center; on the flex-container for that purpose.
.bgc-blue {
background-color: #0066ff;
}
.bgc-white {
background-color: whitesmoke;
}
.bgc-purple {
background-color: purple;
}
.bgc-green {
background-color: rgb(70, 223, 70);
}
.vertCenter-flex {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
.divmain {
margin-top: 10px;
display: inline-block;
vertical-align: -webkit-baseline-middle;
height: 95%;
}
.centerItems {
text-align: center;
}
#topH {
width: 100%;
height: 95%;
}
#offers {
width: 40%;
margin-left: 10px;
margin-right: 10px;
background: #fa0;
height: 300px;
}
#profileBox {
width: 30%;
height: fit-content;
}
#news {
width: 25%;
background: #0fa;
height: 300px;
}
<body>
<div id="topH" class="vertCenter-flex">
<div id="profileBox" class="bgc-green divmain centerItems">
<p>p1</p>
<p>p2</p>
<p>lala</p>
</div>
<div id="offers" class="bgc-blue divmain">content</div>
<div id="news" class="bgc-purple divmain">content</div>
</div>
</body>
Change your css
.vertCenter-flex {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
flex-direction:column;
}