suppose we have 4 dives.
the first div is outer div.
i want to create a HTML that
the second div size be 50% first and be in middle bottom of first div.
the third div size be 50% second and be in middle left of second div.
the fourth div size be 50% third div and be in middle top of third div.
how can i do it?
Is this your desired output? It’s made using position, top and bottom, and translate to make sure it’s centered right.
.div1 div { /* makes every small div 50% the size of the previous */
width: 50%;
height: 50%;
}
.div1 {
width: 200px;
height: 200px;
background-color: red;
}
.div2 {
background-color: green;
position: relative;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
}
.div3 {
background-color: pink;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
.div4 {
background-color: lightblue;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
</div>
</div>
</div>
</div>
you can also use flex(or grid) and margin instead position :
div {
display: flex;
}
body>div {
/* sizing : whatever you want to start from */
height: 90vmin;
width: 90vmin;
background: #ed1c24;
}
div div {
height: 50%;
width: 50%;
}
div div {
background: #22b14c;
margin: auto auto 0;
}
div div div {
background: #ffaec9;
margin: auto auto auto 0;
}
div div div div {
background: #00a2e8;
margin: 0 auto auto;
}
/* center the demo */
html {
display: flex;
height: 100vh;
}
body {
margin: auto;
}
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
We can achieve this by using the CSS Flexbox and Margin properties.
index.html
<body>
<div class="firstdiv">
<div class="seconddiv">
<div class="thirddiv">
<div class="fourthdiv">
</div>
</div>
</div>
</div>
</body>
styles.css
div {
display: flex;
}
.firstdiv {
background-color: red;
width: 600px;
height: 600px;
}
.seconddiv {
background-color: green;
width: 50%;
height: 50%;
margin: auto;
margin-bottom: 0;
}
.thirddiv {
background-color: pink;
width: 50%;
height: 50%;
margin: auto;
margin-left: 0;
}
.fourthdiv {
background-color: blue;
width: 50%;
height: 50%;
margin: auto;
margin-top: 0;
}
You can use CSS flexbox below. There are four divs below and you can change the size of the first div. And then the others automatically align and resize themselves.
HTML file:
<html>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth">
<p>Text</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS file:
* {
margin: 0;
padding: 0;
}
#first {
background: #ed1c24;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: flex-end;
margin: auto;
}
#second {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background: #22b14c;
width: 50%;
height: 50%;
margin: 0 auto;
}
#third {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
background: #ffaec9;
width: 50%;
height: 50%;
}
#fourth {
display: flex;
justify-content: center;
align-items: center;
background: #00a3e9;
width: 50%;
height: 50%;
}
Click to see the result of these lines of code:
Result
Related
I have 2 parent containers in my code below. The first one is just for reference for what I want my second container to look like. The difference between the two is the first one I used absolute positioning and flex display but the second one is grid display. What I'm stuck on is understanding how to center class .item1 and position class .item2 all the way to the right just how it's like on the first parent container i.e class .topAdCon. My specific questions are 1) how to center .item1
2) how to set .item2's position all the way to the right (right: 0%)
3) on the first parent container I just set top: 0% to align it all the way to the top because it has absolute positioning how can I set the positioning of the second parent container where ever I want currently I'm using margin-top for top positioning is that the way to go or what is the right way?
4) Lastly how do I set the height for the second container because height isn't responding as it does on the first container?
Note: I commented out things I tried in order to achieve these things but they aren't working.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.topAdCon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0%;
width: 100%;
height: 18%;
background-color: pink;
}
.topAdCon .adCon {
width: 40%;
height: 100%;
}
.topAdCon .adCon img {
width: 100%;
height: 100%;
}
.topAdCon .sideInfo {
display: flex;
text-align: center;
width: 17%;
height: 100%;
position: absolute;
right: 0%;
border: 1.5px solid #000000;
}
.topAdCon .sideInfo p {
font-size: 0.9vw;
margin: auto;
}
.wrapper {
display: grid;
align-items: center;
justify-content: center;
/*position: relative;
top: 20%;*/
margin-top: 20%;
grid-template-columns: 40% 17%;
width: 100%;
height: 18%;
/*height not responding*/
background-color: gold;
}
.item1 {
/*align-self: center;*/
width: 100%;
height: 100%;
}
.item1 img {
width: 100%;
height: 100%;
}
.item2 {
display: flex;
text-align: center;
/*align-self: flex-end*/
width: 100%;
height: 100%;
border: 1.5px solid #000000;
}
.item2 p {
font-size: 1.5vw;
margin: auto;
}
<div class="topAdCon">
<div class="adCon">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="sideInfo">
<p>this is test statement 1</p>
</div>
</div>
<div class="wrapper">
<div class="item1">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="item2">
<p>this is test statement 2</p>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.topAdCon {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0%;
width: 100%;
height: 18%;
background-color: pink;
}
.topAdCon .adCon {
width: 40%;
height: 100%;
}
.topAdCon .adCon img {
width: 100%;
height: 100%;
}
.topAdCon .sideInfo {
display: flex;
text-align: center;
width: 17%;
height: 100%;
position: absolute;
right: 0%;
border: 1.5px solid #000000;
}
.topAdCon .sideInfo p {
font-size: 0.9vw;
margin: auto;
}
.wrapper {
display: grid;
margin-top: 20%;
grid-template-columns: 30% 40% 12% 18%;
grid-template-areas: 'item item1 item2 item3';
width: 100%;
height: 18vh;
background-color: gold;
}
.item1 {
width: 100%;
height: inherit;
}
.item1 img {
width: 100%;
height: 100%;
}
.item3 {
display: flex;
text-align: center;
justify-content: end;
width: 100%;
height: inherit;
border: 1.5px solid #000000;
}
.item3 p {
font-size: 1.5vw;
margin: auto;
}
<div class="topAdCon">
<div class="adCon">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="sideInfo">
<p>this is test statement 1</p>
</div>
</div>
<div class="wrapper">
<div class="item"></div>
<div class="item1">
<img src="https://images.pexels.com/photos/356830/pexels-photo-356830.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
</div>
<div class="item2"></div>
<div class="item3">
<p>this is test statement 2</p>
</div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
Lets say I have this simple html page:
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
My header is fixed and the content should be beneath it and with height 100% of what ever left of the body.
I've already done that with this style:
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
Here's how the page looks for now: https://elbargho.github.io/sudoku/centerdiv.html
now I'm trying to center the box div horizontally and vertically in relative to the full body - the header size
what I've tried to do:
margin-top: 50% - for some reason the box went all the way down to the bottom
setting the position of content div to relative, and of box div to absolute - the content div overlapped the fixed header
You can set content class as
.content {
/* flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
*{
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.header {
background-color: red;
text-align: center;
position: fixed;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
/*flex: 1; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
This is probably what you need. Documented in the code.
* {
margin-left: 0;
margin-top: 0;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
/* Modified */
.header {
background-color: red;
text-align: center;
/* position: fixed; */
position: sticky;
width: 100%;
}
.content {
background-color: antiquewhite;
padding-top: 38px;
}
h1 {
margin-bottom: 0;
}
/* Modified */
.main {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
}
/* Modified */
.content {
/*flex: 1;*/
display: flex;
align-items: center;
height: inherit;
}
.box {
width: 150px;
height: 150px;
background-color: yellow;
}
<div class="main">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<div class="box">
</div>
</div>
</div>
Here solution:
.content {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
One way is to use CSS Transform.
.box {
position: relative;
top: 50%;
transform: translateY(-50%);
/* horizontal center */
margin: 0 auto;
}
Check out this website for all CSS centering help:
http://howtocenterincss.com/
As you can see in the snippet below, I have a .square-container which is positioned absolutely and it contains a square. I'm trying to vertically position the .square-container in the center of the parent div.
.container {
position: relative;
background-color: blue;
}
.square-container {
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 30px;
}
.square {
width: 100%;
height: 100%;
background-color: red;
}
.hello {
padding: 15px;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class="square-container">
<div class='square'></div>
</div>
</div>
For positioning absolute elements in the middle use top: 50%
And then use transform: translateY(-50%); and its centered
.container {
position: relative;
background-color: blue;
}
.square-container {
position: absolute;
right: 10px;
top: 50%;
height: 30px;
width: 30px;
transform: translateY(-50%);
}
.square {
width: 100%;
height: 100%;
background-color: red;
}
.hello {
padding: 15px;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class="square-container">
<div class='square'></div>
</div>
</div>
.container{
display:flex;
align-items:center;
}
You wouldn't need absolute positioning here. If you set the container as a flex wrapper, you won't also need to position it relatively and can get rid of the square-container div as well that currently wraps the div.square element.
To push the square to the right, we could
A) use auto-margins inside the flex layout. So all that our div.square needs, is margin-left: auto, which tells the browser to push it as far as possible from its left siblings.
B) Use justify-content: space-between on our container. This tells the flex container to space out the elements to the sides.
The approaches differ very slightly and don't really matter in this example until we start adding more elements.
An updated example:
A
.container {
display: flex;
align-items: center;
background-color: skyblue;
padding: 15px;
}
.square {
height: 30px;
width: 30px;
margin-left: auto;
background-color: tomato;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class='square'></div>
</div>
B
.container {
display: flex;
align-items: center;
justify-content: space-between;
background-color: skyblue;
padding: 15px;
}
.square {
height: 30px;
width: 30px;
background-color: tomato;
}
<div class='container'>
<p class='hello'>Hello</p>
<div class='square'></div>
</div>
I have a simple modal on my page, when I resize the browser it adjusts to its size, the problem is when the browsers say 'height' is over the modal element, the top bit seems to 'go out' of the browser, so essentially you cant see that bit part..
I experimented with setting the overflow and max-height on my #content-container and #wrapper but Its completely ineffective, what am I doing wrong?
jsfiddle: https://jsfiddle.net/kmav8ox7/
HTML:
<div id="content-container">
<div id="wrapper">
<ul id="flex-container">
<li class="flex-item">
<div id="list-area"></div>
</li>
<li class="flex-item">
<div id="img-desc-container">
<div class="image-area">
<img src="http://dukes-lancaster.org/wp-content/uploads/2014/11/placeholder.jpg">
</div>
<div class="description-area"></div>
</div>
</li>
</ul>
</div>
</div>
CSS:
/* center content */
#content-container {
width: 50%;
height: 50%;
border: 3px solid red;
/* positioning */
margin-top: 50vh;
margin-left: 50vw;
transform: translate(-50%, -50%);
max-height: 100%;
}
/* wrapp content */
#wrapper {
width: 100%;
height: 100%;
max-height: 100%;
margin: 0;
/*Centering content*/
display: inline-flex;
justify-content: center;
align-items: content;
}
#img-desc-container {
display: flex;
flex-direction: column;
}
/* MULTI ELEMENT */
.image-area,
.description-area {
width: 200px;
height: 125px;
border: 1px solid black;
}
.image-area,
.description-area,
#list-area {
box-sizing: border-box;
margin: 10px;
}
/* LIST AREA */
#list-area {
width: 200px;
height: 250px;
border: 1px solid black;
background-color: #22AED1;
float: left;
}
/* IMG AREA */
.image-area {
background-color: #016FB9;
}
.image-area img {
width: 100%;
height: 100%;
}
/* DESC AREA */
.description-area {
background-color: #AFA98D;
height: 105px;
}
/*FLEX CONTAINER */
#flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
This may help you.
You need to change some css of #content-container. change translate(-50%, 50%) to translate(-50%, 0%) and remove margin-top
/* center content */
body {
display: flex;
align-items: center;
min-height: 100vh;
}
#content-container {
width: 50%;
height: 50%;
border: 3px solid red;
margin-left: 50vw;
transform: translate(-50%, 0%);
}
/* wrapp content */
#wrapper {
width: 100%;
height: 100%;
margin: 0;
/*Centering content*/
display: inline-flex;
justify-content: center;
align-items: content;
}
#img-desc-container {
display: flex;
flex-direction: column;
}
/* MULTI ELEMENT */
.image-area,
.description-area {
width: 200px;
height: 125px;
border: 1px solid black;
}
.image-area,
.description-area,
#list-area {
box-sizing: border-box;
margin: 10px;
}
/* LIST AREA */
#list-area {
width: 200px;
height: 250px;
border: 1px solid black;
background-color: #22AED1;
float: left;
}
/* IMG AREA */
.image-area {
background-color: #016FB9;
}
.image-area img {
width: 100%;
height: 100%;
}
/* DESC AREA */
.description-area {
background-color: #AFA98D;
height: 105px;
}
/*FLEX CONTAINER */
#flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
<div id="content-container">
<div id="wrapper">
<ul id="flex-container">
<li class="flex-item">
<div id="list-area"></div>
</li>
<li class="flex-item">
<div id="img-desc-container">
<div class="image-area">
<img src="http://dukes-lancaster.org/wp-content/uploads/2014/11/placeholder.jpg">
</div>
<div class="description-area"></div>
</div>
</li>
</ul>
</div>
</div>
I think you can use this css code for solution.
#content-container {
width: 50%;
height: 50%;
border: 3px solid red;
margin-top: 0;
margin-left: 50vw;
transform: translate(-50%, 0%);
}
#wrapper {
width: 100%;
height: 94vh;
margin: 0;
display: inline-flex;
justify-content: center;
align-items: content;
overflow: auto;
}
In order to make it Responsive, You must avoid using Pixels to provide height or width.
U can Give Height in Percentage (for eg. 100% for maximum), then it will never get out of the page
Looking for a specific stacking order inside a flex container. Pretty basic footer split into 3 sections, so you have left and right Divs 100% height and 20% width. The middle would flex to fill the difference BUT middle needs to be split in half. So top and bottom Divs inside at 50% height each. I can’t seem to figure out the positions with absolute, fixed, ect. Or floating whatever works best.
Thanks
Ok sorry, here is the CSS inside flex container
.footer_left_box {
position: absolute;
display: inline-block;
float:left;
left:0;
width: 10%;
height: 100%;
background-color:#C9D329;
}
.footer_middle_top_box {
position: relative;
display: inline-block;
width: 80%;
height: 50%;
background-color:#2BB851;
}
.footer_middle_bottom_box {
position: relative;
display: inline-block;
width: 80%;
height: 50%;
background-color:#3954D4;
}
.footer_right_box {
position: absolute;
right:0;
width: 10%;
height: 100%;
background-color:#E33538;
}
This is an example of what I need
Flexbox can do that but you may need to adapt the structure.
footer {
height: 150px;
display: flex;
}
.left,
.right {
flex: 0 0 20%;
}
.left {
background: rebeccapurple;
}
.right {
background: #bada55;
}
.middle {
flex: 1;
border: 2px solid red;
display: flex;
flex-direction: column;
}
.top {
flex: 0 0 50%;
background: #c0c0ae;
}
.bottom {
flex: 0 0 50%;
background: #c0ffee;
}
<footer>
<div class="left"></div>
<div class="middle">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="right"></div>
</footer>